Marcy Lab School Docs
  • Welcome
  • Student Guidelines & Policies
    • Student Handbook
    • AI Policy
    • Academic Calendar
  • Environment Setup
    • Local Environment Setup - Mac
    • Local Environment Setup - Windows
    • GitHub Setup
    • Postgres Setup
  • How-Tos
    • How To Code at Marcy: Code Style Guide
    • How to Do Short Response and Coding Assignments
    • How to Debug
    • How to PEDAC
    • How to Create A GitHub Organization and Scrumboard
    • How to Create Projects with Vite
    • How to Deploy on GitHub Pages
    • How to Deploy on Render
    • How to Test your API with Postman
  • Mod 0 - Command Line Interfaces, Git, and GitHub
    • Overview
    • 1. Command Line Interfaces
    • 2. Git & GitHub
    • 3. Git Pulling & Merging
    • 4. Git Branching & PRs
  • Mod 1 - JavaScript Fundamentals
    • Overview
    • 1. Intro to Programming
    • 2. Errors
    • 3. Node & Node Modules
    • 4. Variables, Functions & String Methods
    • 5. Control Flow, typeof, and Math
    • 6. Loops
    • 7. Arrays
    • 8. Objects
    • 9. Higher Order Functions: Callbacks
    • 10. Higher Order Functions: Array Methods
    • 11. Regex
  • Mod 2 - HTML, CSS & the DOM
    • Overview
    • 1. HTML
    • 2. CSS
    • 3. Accessibility (a11y)
    • 4. The Document Object Model (DOM) API
    • 5. Events
    • 6. Forms
    • 7. The Box Model and Positioning
    • 8. Flexbox
    • 9. Grid & Media Queries
    • 10. ESModules
    • 11. Vite
    • 12. LocalStorage
  • Mod 3 - Async & APIs
    • Overview
    • 1. Promises
    • 2. Fetch
    • 3. Building a Fetching App
    • 4. Async & Await
    • 5. A Generic Fetch Handler
  • Mod 4 - Project Week!
    • Important How Tos and Guides
      • How to Create a GitHub Organization and Scrum Board
      • How To Start a Project with Vite
      • How To Deploy a Project with GitHub Pages
    • Project Week Overview
    • Agile Methodologies
    • Deliverables & Milestones
    • Technical Requirements Checklist
    • Free API List
    • Collaborative GitHub
  • Mod 5 - Object-Oriented Programming
    • Overview
    • 1. Intro to OOP, Encapsulation, Factory Functions, and Closure
    • 2. Classes
    • 3. Private & Static
    • 4. UML Diagrams & Has Many/Belongs To Relationships
    • 5. Challenge: Implementing Has Many/Belongs To
    • 6. Inheritance
    • 7. Polymorphism
    • 8. Review and Practice
    • MDN: Object Prototypes
  • Mod 6 - Data Structures & Algorithms
    • Overview
    • Important How Tos and Guides
      • How to Debug
      • How to PEDAC
    • 1. Nodes & Linked Lists
    • 2. Singly & Doubly Linked Lists
    • 3. Stacks & Queues
    • 4. Recursion
    • 5. Trees
  • Mod 7 - React
    • Overview
    • Important How Tos and Guides
      • How to Create Projects with Vite
      • How to Deploy on GitHub Pages
    • 1. Intro to React
    • 2. Events, State, and Forms
    • 3. Fetching with useEffect
    • 4. React Router
    • 5. Building a Flashcards App
    • 6. React Context
    • 7. Global Context Pattern
  • Mod 8 - Backend
    • Overview
    • Important How Tos and Guides
      • How to Deploy on Render
      • How to Test your API with Postman
      • Postgres Setup
    • 1. Intro to Express
    • 2. Building a Static Web Server with Middleware
    • 3. Securing API Keys and Environment Variables
    • 4. RESTful CRUD API
    • 5. Model-View-Controller Architecture
    • 6. SQL and Databases
    • 7. JOIN (Association) SQL Queries
    • 8. Knex
    • 9. Your First Fullstack App!
    • 10. Migrations & Seeds
    • 11. Schema Design & Normalization
    • 12. Hashing Passwords with Bcrypt
    • 13. React Express Auth Template Overview
  • Mod 9 - Civic Tech Hackathon
    • Overview
    • Rubric
  • Mod 10 - Capstone
    • Overview
Powered by GitBook
On this page
  • 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
  1. Mod 1 - JavaScript Fundamentals

5. Control Flow, typeof, and Math

Previous4. Variables, Functions & String MethodsNext6. Loops

Last updated 7 months ago

Follow along with code examples !

Table of Contents

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"
}
here
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