Control Flow, typeof, and Math

Follow along with code examples here!

Table of Contents

• Slides

• Overview

• Control Flow Review

  • if/else statements

  • Comparison Operators:

  • Logical Operators:

  • Coercions and Truthiness

• Simplify Your Logic

  • Guard Clauses and Ternary Operators

  • Scope and Variables

• typeof Operator

  • Identifying null, Arrays, and NaN

• Math Operations

  • The Math Object

Slides

Overview

Key Terms

• Comparison Operators - Operators that compare two values and return a boolean

• Logical Operators - Operators used to combine conditions, such as && (AND), || (OR), and ! (NOT)

• Type Coercion - The automatic conversion of a value from one data type to another

• Guard Clause - A statement used to check if the remaining lines of code should be executed or not

• Scope - Scope is the current context of execution in which values and expressions are "visible" or can be referenced

Control Flow Review

• Programs usually change their behavior based on inputs.

• Conditions and Booleans help decide if something is true or false.

• Use if/else, switch, or ternary operators to decide what to do in a given situation.

• They do this with Comparison Operators and Logical Operators which return a Boolean.

if/else statements

• 3 parts: if, else if, else.

• Starts checking at the top and stops checking when it hits a match.

• Only 1 block is executed, so be specific first and get more general.

Example:

const isItHot = (temp) => {
  if (temp > 75) {
    return "it is hot!"
  } else if (temp > 90) {
    return "it is too hot!"
  } else {
    return "it is NOT!"
  }
}
console.log(isItHot(80)); // Prints "it is hot"
console.log(isItHot(95)); // Prints "it is too hot"
console.log(isItHot(60)); // Prints "it is NOT"

• Conditions in an if statement must evaluate to true or false.

Comparison Operators:

• Comparison Operators compare two values of the same type.

Operator	Name	Example	Result
===	Equal To	'Hi' === 'Hi'	true
!==	Not Equal To	6 !== 7	true
!=	Loose Equal To	"6" == 6	true
!=	Loose Not Equal To	6 != "6"	false
>	Greater Than	10 > 1	true
<	Less Than	30 < 5	false
>=	Greater or Equal	5 >= 5	true
<=	Less or Equal	2 <= 2	true

Logical Operators:

• Logical Operators compare the outcomes of two conditions and let you be more expressive

Operator	Name	Example	Result
&&	AND	5 > 3 && 2 > 3	false
		5 > 3 && 4 > 3	true
||	OR	5 > 3 || 2 > 3	true
!	NOT	!(5 > 3)	false

• We can use () to group together each condition

const isItHot = (temp, isRaining) => {
  // if it is at least 90 or it is over 75 and isn't raining, its hot
  if (temp >= 90 || (temp > 75 && !isRaining)) {
    return "it is hot!"
  } else {
    return "it is NOT!"
  }
}
console.log(isItHot(90, true)); // Prints "it is hot"
console.log(isItHot(90, false)); // Prints "it is hot"
console.log(isItHot(80, false)); // Prints "it is hot"
console.log(isItHot(80, true)); // Prints "it is NOT"
console.log(isItHot(60, false)); // Prints "it is NOT"

Coercions and Truthiness

• Type Coercion ("co-er-shun") — JavaScript will automatically convert (coerce) types when necessary. For example, '1' + 1 results in '11'.

• Truthy/Falsy Values — any expression you use for an if statement's (condition) will be coerced into a Boolean.

  • "Falsy" values are coerced to be false and only these 5 values will behave this way: 0, "", null, undefined, and NaN

  • All other values are truthy

const isTruthy = (value) => {
  if (value) { // the value will be coerced to be a Boolean. If it is true, we will return true.
    return true;
  }
  else { // if not, we will return false.
    return false;
  }
}

console.log(isTruthy('')) // Prints false
console.log(isTruthy(0)) // Prints false
console.log(isTruthy(NaN)) // Prints false
console.log(isTruthy(null)) // Prints false
console.log(isTruthy(undefined)) // Prints false
console.log(isTruthy('hello')) // Prints true
console.log(isTruthy(' ')) // Prints true
console.log(isTruthy(5)) // Prints true
console.log(isTruthy([])) // Prints true
console.log(isTruthy({})) // Prints true

Simplify Your Logic

Guard Clauses and Ternary Operators

• Code should be readable.

• Avoid deeply nested if/else statements. Use guard clauses and ternary operators.

• A guard clause is an if statement that returns before subsequent has a chance to be executed.

// Okay - if and else statements that each return something
const isTruthy = (value) => {
  if (value) {
    return true;
  }
  else {
    return false;
  }
}

// Better - Guard clause lets us skip the else statement by exiting early
const isTruthy = (role) => {
  if (value) {
    return true;
  }
  // if the guard clause above doesn't run, this line will!
  return false;
};

• if and else statements let you choose between one of two code blocks to execute.

• The ternary operator condition ? valA : valB is used to choose between one of two values.

// Okay - Use an If statement to choose which code block to execute
const isThisEven = (num) => {
  let message;
  if (num % 2 === 0) {
    message = 'it is even!';
  } else {
    message = 'it is odd!';
  }
  console.log(message);
}

// Better - Use a ternary to choose which value to assign to message
const isThisEven = (num) => {
  const message = num % 2 === 0 ? "it is even!" : "it is odd!";
  console.log(message);
}

Scope and Variables

• If you want to get variables out of blocks, you have to define them in a higher scope.

• Values in a higher scope are visible to lower scopes.

Example:

const getBioBest = (age, first, last) => {
  let dynamicBio = `Wow, ${first} ${last} is already ${age} years old. Getting up there!`;
  if (age < 18) {
    dynamicBio = `${first} ${last} is only ${age} years old. Still a child!`;
  } else if (age < 50) {
    dynamicBio = `${first} ${last} is ${age} years old. Still young at heart!`;
  }
  console.log(dynamicBio);
};

typeof Operator

• typeof value returns the type of a given value as a string. It’s an operator, not a function.

• Example usages:

console.log(typeof "hi"); // Prints "string"
console.log(typeof 4); // Prints "number"
console.log(typeof NaN); // Prints "number"
console.log(typeof true); // Prints "boolean"
console.log(typeof undefined); // Prints "undefined"
console.log(typeof console.log); // Prints "function"
console.log(typeof {}); // Prints "object"
console.log(typeof null); // Prints "object"
console.log(typeof []); // Prints "object"

Identifying null, Arrays, and NaN

• Unfortunately, typeof tells us that arrays are objects (they are) so we have to use Array.isArray() to check if something is an array.

• It also tells us that null is an Object so we have to check that manually

• It also tells us that NaN is a number, which it is, but to know if something is NaN, we can use the isNaN() function

const arr = [];
console.log(Array.isArray(arr)); // Prints true

const nullVal = null
console.log(nullVal === null); // Prints true

const badNumber = NaN
console.log(isNaN(badNumber)); // Prints true

Math Operations

• Use basic math operators: +, -, /, *.

• The power operator x ** y raises x to the power of y.

• % returns the remainder after division.

console.log(5 % 2); // 1 (5 divided by 2 is 2 with a remainder of 1)
console.log(10 % 3); // 1 (10 divided by 3 is 3 with a remainder of 1)
console.log(15 % 5); // 0 (15 divided by 5 is 3 with no remainder)

The Math Object

• In JavaScript Math is a globally available object with methods and properties for doing more complex math.

console.log(Math.round(2.5))    // Prints 3
console.log(Math.floor(2.99))   // Prints 2
console.log(Math.ceil(2.01))    // Prints 3
console.log(Math.random())      // Prints a random decimal from 0 to 1 (exclusive)
console.log(Math.PI)            // Prints 3.141592653589793
console.log(Math.sqrt(25));     // Prints 5
console.log(Math.abs(-25));     // Prints 25
console.log(Math.max(2, 5, 3))  // Prints 5
console.log(Math.min(2, 5, 3))  // Prints 2

• Here is an example of a function that makes use of Math.random() to flip a coin

const flipCoin = () => {
  return Math.random() > 0.5 ? "Heads" : "Tails"
}