05 POWERBUTTON

What we need to learn: 

 

      • Control flow: else-if
      • True and false values
      • Functions

True and False Values

 

In JavaScript, all variables and conditions have a truthy or falsy value.

 

let variableOne = ‘I Exist!’;

if (variableOne) {

// This code will run because variableOne contains a truthy value.

else {

// This code will not run because the first block ran.

}

If we changed if (variableOne) to say if (variableTwo), that condition would evaluate to falsy because we have not created a variable called variableTwo in this program. In other words, variableOne is truthy and variableTwo is falsy.

All variables that have been created and set are truthy (and will evaluate to true if they are the condition of a control flow statement) unless they contain one of the seven values listed below:

  • false
  • 0 and -0
  • “” and ” (empty strings)
  • null
  • undefined
  • NaN (Not a Number)
  • document.all (something you will rarely encounter)

There is an important distinction between a variable’s value and its truthiness: variableOne’s value is ‘I exist’ because that is the data saved to the variable. variableOne is truthy because it exists and does not contain any of the seven falsy values listed above.

In programming, we often evaluate whether or not an expression is true or truthy. Conveniently, JavaScript provides a shorthand notation for this.

 

let isRaining = true;

if (isRaining) {

   console.log(‘Carry an umbrella!’);

else {

  console.log(‘Enjoy the sun!’);

}

 

 

In the example above, the condition is simply if (isRaining). In JavaScript, this is evaluating whether isRaining is truthy. If you read the code out loud to yourself, it sounds like a simple sentence: “If it’s raining, carry an umbrella. Else, enjoy the sun!”

JavaScript provides an operator for swapping the truthiness and falsiness of values – the exclamation point (!). We can use this in conditional statements as shorthand to check if the value of a variable evaluates to false rather than true.

 

let isPhoneCharged = true

if (!isPhoneCharged) {

  console.log(‘Plug in your phone!’);

else {

  console.log(‘No need to charge!’);

}

 

In the example above, the program checks if isPhoneCharged evaluates to false. Because isPhoneCharged is true, the second block of code will execute.

 

 

Functions

How does this code work?

 

let calculatorIsOn = false;

 

const pressPowerButton = () => {

  if (calculatorIsOn) {

    console.log(‘Calculator turning off.’);

    calculatorIsOn = false;

  } else {

    console.log(‘Calculator turning on.’);

    calculatorIsOn = true;

  }

};

 

pressPowerButton();

// Output: Calculator turning on.

 

pressPowerButton();

// Output: Calculator turning off.

 

Let’s explore each part in detail.

1. We created a function named pressPowerButton.

  • const pressPowerButton creates a variable with a given name written in camelCase.
  • The variable is then set equal = to a set of parentheses followed by an arrow token () =>, indicating the variable stores a function. This syntax is known as arrow function syntax. 
  • Finally, between the curly braces {} is the function body, or the JavaScript statements that define the function. This is followed by a semi-colon ;. In JavaScript, any code between curly braces is also known as a block. 

2. Inside the function body is an if/else statement. 

3. On the last few lines, we call the function by writing its name followed by a semi-colon pressPowerButton();. This executes the function, running all code within the function body. 

4. We executed the code in the function body twice without having to write the same set of instructions twice. Functions can make code reusable!

 

 

 Function Parameters

So far our function has not required any input. We can also write functions that accept data. We do this with parameters. Parameters are variables in a function definition that represent data we can input into the function.

 

const multiplyByThirteen = (inputNumber) => {

  console.log(inputNumber * 13);

};

 

multiplyByThirteen(9);

// Output: 117

 

Let’s explore how this function works:

  • We add inputNumber within the parentheses () => of the multiplyByThirteen function. inputNumber is a parameter.
  • Inside the multiplyByThirteen() function, we use console.log to print the inputNumber multiplied by 13.
  • When we call the multiplyByThirteen() function on the last line, we set the inputNumber parameter. Here, we set it to 9. Then, inside the function block, 9 is multiplied by 13, resulting in 117 printing to the console.
  • Note on terminology: inputNumber is a parameter, but when we call multiplyByThirteen(9), the 9 is called an argument. In other words, arguments are provided when you call a function, and parameters receive arguments as their value. When we set the value 9 as the argument, we pass a value to the function.

Parameters let us write logic inside functions that are modified when we call the function. This makes functions more flexible.

 

 

 If we can set one parameter, can we set two?

We can set as many parameters as we’d like by adding them when we declare the function, separated by commas, like this:

 

const getAverage = (numberOnenumberTwo) => {

  const average = (numberOne + numberTwo) / 2 ;

  console.log(average);

};

 

getAverage(36527);

// Output: 196

  • The getAverage() function has two parameters: numberOne and numberTwo, both entered in the parentheses ().
  • When we call the getAverage() function on the last line, we include two numbers as the parameters, also separated by commas. 
    In this case, we are telling the function to assign numberOne the value of 365 and numberTwo the value of 27. We are passing in 365 and 27 to the getAverage() function.
  • When getAverage() runs, the function knows what numberOne and numberTwo equal since we passed in two parameters when we called the function. Therefore it evaluates (365 + 27) / 2 and stores the result in the average variable. When logged to the console, the value of the average is 196.

By adding multiple parameters, we can build functions that are more flexible. Now the function has two variables that we can define when we call the function.

 

 

 Return

 

To return a result, we can use the return keyword. Take a look at our function from the last exercise, now re-written slightly:

 

const getAverage = (numberOnenumberTwo) => {

  const average = (numberOne + numberTwo) / 2;

  return average;

}

 

console.log(getAverage(36527));

// Output: 14

 

  1. Instead of using console.log() inside the getAverage() function, we used the return keyword. return will take the value of the variable and return it. 
  2. On the last line, we called the getAverage() function inside of a console.log() statement, which outputted the result of 196. 
  3. This code achieved the same output as before, however now our code is better. Why? If we wanted to use the getAverage() function in another place in our program, we could without printing the result to the console. Using return is generally a best practice when writing functions, as it makes your code more maintainable and flexible.