Day 8: Consolidation 2

Lesson 2: Functions Part 1

Functions let us take chunks of code, wrap them up and make them reusable.

1function myCoolFunction() {
2  console.log("Hello!");
3}

We broke this day up into 5 so we will do the same here:

No Input, No Return

<h1>Hello World<h1>

function pointlessFunction() {
  console.log("I take no inputs and have no returns 🤷‍♂️")
}

pointlessFunction();

A function that takes no inputs and has no return isn't actually useless. It's just unusual in the JavaScript world as we tend to want to know what our functions are doing, not have them going off and changing things without our knowledge. As such we would rather have them explicitly return something that we can do something with.

Input, No Return

<h1>Hello World<h1>

function logTemperature(temperature) {
  console.log("The temperature is: " + temperature)
}

logTemperature(20);

This is more like it, a function that takes a value and uses it internally. The name you give the argument when you declare the function (so the function logTemperature(temperature) bit) is what you will use to refer to the value inside the function. It doesn't matter what it's called externally.

In the example below I create a variable called reading and then pass it into the logTemperature function which has one argument called temperature, inside the function I don't use reading anymore, I use temperature instead.

1function logTemperature(temperature) {
2  console.log("The temperature is: " + temperature);
3}
4
5let reading = 22;
6logTemperature(reading);

Input, Return

<h1>Hello World<h1>

function calculateProductivity(cupsOfCoffee){
  const coffeeFactor = 25;
  const productivity = cupsOfCoffee * coffeeFactor
  return productivity + "% productive"
}

let cupsDrunk = 5;
const productivity = calculateProductivity(cupsDrunk);
console.log(productivity);

The function takes one input cupsOfCoffee, has two internal constants coffeeFactor and productivity and then returns a string of productivity + "% productive".

Outside the function above we create a variable that is passed into the function and then the result is printed.

We can return any value we want from a function, much like we can pass any value in.

Multiple Inputs

<h1>Hello World<h1>

function calculateProductivity(cups, drinkType){
  const coffeeFactor = 25;
  const teaFactor = 15;
  const energyDrinkFactor = 35;

  let productivity = 4;
  if(drinkType === "coffee") {
    productivity = cups * coffeeFactor;
  } else if (drinkType === "tea") {
    productivity = cups * teaFactor;
  } else if (drinkType === "energy") {
    productivity = cups * energyDrinkFactor;
  }
  return productivity + "% productive";
}

let cupsDrunk = 5;
const productivity = calculateProductivity(cupsDrunk, "tea");
console.log(productivity);

In our new example above we are being more drink inclusive. We take a number of cups and the drinkType and then work out the productivity based on those two factors. Everyone knows that tea, coffee and energy drinks create the most productivity, so they get their own factors and get included in the if statements.

If a different drink type is passed in like water then we leave the default productivity of 4.

In the example above add an alcoholic drink type with two productivity factors. 3 and under give it a productivity factor of 20, over 3 give it a 1 🤣

Multiple Returns

In JavaScript functions can only return one value and only execute one return statement. So, let's rewrite our drink productivity example.

<h1>Hello World<h1>

function calculateProductivity(cups, drinkType){
  if(drinkType === "alcoholic") {
    if(cups <= 3) {
      return 20 * cups + "% productive";
    }
    return cups + "% productive";
  }
  if(drinkType === "coffee") {
    return 25 * cups + "% productive";
  }
  if(drinkType === "tea") {
    return 15 * cups + "% productive";
  }
  if(drinkType === "energy") {
    return 35 * cups + "% productive";
  }
  return 4 * cups + "% productive";
}

let cupsDrunk = 5;
const productivity = calculateProductivity(cupsDrunk, "tea");
console.log(productivity);

This is pretty much the same as the code before, however now it uses return statements to exit the function when the appropriate condition has been met.

If you wanted to return a bit more information, for example the productivity factor used, then you would need to return an object instead of a single value.

<h1>Hello World<h1>

function calculateProductivity(cups, drinkType){
  if(drinkType === "alcoholic") {
    if(cups <= 3) {
      return {text: 20 * cups + "% productive", factor: 20};
    }
    return {text:  cups + "% productive", factor: 1};
  }
  if(drinkType === "coffee") {
    return {text: 25 * cups + "% productive", factor: 25};
  }
  if(drinkType === "tea") {
    return {text: 15 * cups + "% productive", factor: 15};
  }
  if(drinkType === "energy") {
    return {text: 35 * cups + "% productive", factor: 35};
  }
  return {text: 4 * cups + "% productive", factor: 4};
}

let cupsDrunk = 5;
const productivity = calculateProductivity(cupsDrunk, "tea");
console.log(productivity.text);
console.log(productivity.factor);