Session Plan

• Conditions

  • Code inspiration

  • Exercises

• Functions (https://twitter.com/wesbos/status/1105907924088565762)

  • General description - A function is a reusable piece of code.

  • Function usage

    • Arguments

  • Function creation

    • Parameters - Acts as placeholders

    • Parameters vs arguments

    • Return value - Variable can capture return value.

    • Calling a function on something Math.random - calling the function random on Math

  • Code inspiration

  • Code inspiration 2

  • Exercise

• Global vs local scope

  • Lexical scope - inner functions contain the scope of parent functions even if the parent function has returned.

  • Code inspiration

  • Exercise

• For loop

  • Try start off with giving the trainees the Exercise string logger and not explain for loop. Let them figure it out through the exercise (problem based learning)

  • Code inspiration

  • Exercise string logger

  • Exercise send emails

The trainees really struggle with the return value. What it means, how it is captured. What happens when nothing is returned etc. Try really hammering in this concept with lots of simple examples and exercises! e.g. if a function is called get something. That means that something is returned from that function.

Zoey Zou made a nice Notion session plan here: https://www.notion.so/JS1-Week2-8f2d4b7e7ba0425ea4a9e97816e9ceb7

Flipped classroom videos

Flipped classroom videos

Code inspiration

if statements

const age = 14;

// if-else statement, `age > 18` is called an expression
// `age > 18` is called a boolean expression
if (age > 18) {
  console.log("Allowed");
} else {
  console.log("Denied");
}

if (age < 18) console.log("You're not old enough");

// Boolean operators
// && is called AND
// || is called OR
// ! is called NOT

// Chained if statement
if (age > 0 && age < 13) {
  console.log("You are a child");
} else if (age >= 13 && age < 20) {
  console.log("You are a teenager");
} else if (age <= 0) {
  console.log("You are an infant");
} else {
  console.log("You are an adult");
}

if (age < 18 || age === 18) {
  // same as saying `age <= 18`
  console.log("You are almost there");
}

// New example
const userRole = "guest";
const isAdmin = userRole === "admin";
const isLoggedIn = userRole !== "guest";

if (isAdmin) {
  console.log("You are in charge");
} else if (isLoggedIn) {
  console.log("Welcome user");
} else {
  console.log("Welcome guest");
}

Functions

// usage
const randomNumber = Math.random();
console.log(randomNumber); // logs out some number between 0 and 1

const maxNumber = Math.max(3, 5); // 3 and 5 are arguments
console.log(maxNumber); // logs out 5

// Creation
let todoItem = "Buy Groceries";
console.log(todoItem);

// Create the function
function checkItem() {
  todoItem = todoItem + " - done";
}

// use the function by calling it using ()
// If we don't call the function that code will NEVER EVER IN A MILLION YEARS run!
checkItem();
console.log(todoItem);

// a and b are called parameters. This function has two parameters
function sum(a, b) {
  return a + b;
}

// 5 and 10 are called arguments now when called in a function
// Arguments are "passed" to the function: "we pass `4` and `5` to the function sum
const returnedSum = sum(5, 10);
console.log(returnedSum); // logs 15

function multiply(a, b) {
  // the value of a will be substituted with the value of 10!
  // the value of b will be substituted with the value of 4!
  console.log(a, b); // logs out 10 4
  return a * b;
}

multiply(10, 4);

// Return value
function sum(a, b) {
  return a + b;
}
const returnedSum = sum(5, 10); // the variable returnedSum captures the return value from calling the function!
console.log(returnedSum); // logs 15

// If we don't return, we cannot capture the returned value!
function sumNoReturn(a, b) {
  a + b; // no return!
}
const returnedSum = sum(5, 10);
console.log(returnedSum); // logs undefined

// Calling a method on something
let s = " this is a string  ";
// calling a function (trim) on the string s
s.trim(); // -> "this is a string"

if and function

function isAuthenticated(userRole) {
  // userRole here is different from `var userRole`
  const isAdmin = userRole === "admin";
  const isLoggedIn = userRole !== "guest";

  if (isAdmin) {
    return true; // if this is run, all other code after is ignored inside the function
  } else if (isLoggedIn) {
    return true;
  }

  return false;
}

console.log(userRole);
console.log(isAuthenticated(userRole));
console.log(isAuthenticated("admin"));

Scope

// Global scope
const globalScopeVariable = "globalScopeVariable";
function outerFunction() {
  // function scope A
  console.log(globalScopeVariable);
  const outerFunctionScope = "outerFunctionScope";

  function innerFunction() {
    // Function scope B
    console.log(globalScopeVariable);
    console.log(outerFunctionScope);

    const innerFunctionScope = "innerFunctionScope";
  }

  console.log(innerFunctionScope);

  innerFunction();
}

outerFunction();

if (true) {
  const blockScope = "blockScope";
}

console.log(blockScope);

for loop

function spam(number) {
  let repeated = ""; // Define the simplest case

  // Think about the condition. How many times do we want to repeat
  for (let i = 0; i < number; i++) {
    repeated = repeated + "hue"; // What is our update rule
  }

  return repeated; // Return in the end
}

console.log(spam(1));

// Test cases. I always do "empty" (here zero), once, and then a bunch of times
console.log(spam(0) === "");
console.log(spam(1) === "hue");
console.log(spam(6) === "huehuehuehuehuehue");
console.log(spam(14) === "huehuehuehuehuehuehuehuehuehuehuehuehuehue");

Exercises

if statements exercise

Use if statements to give a user a message based on their bank account balance. Use the balance variable and change that.

• If a user has 0 or less balance log out 'Please deposit some money!'

• If a user has more than 0 and at most 1000 log out 'Your balance is looking okay'

• If a user has more than 1000 and at most 3000 log out 'Your balance is looking good'

• If a user has more than 3000 and at most 10000 log out 'Your balance is fantastic'

• If a user has more than 10000 log out 'Your balance is AMAZING!'

const balance = 1000;

Function

Create a function called getCircleArea. It should have the radius of the circle as parameter and return the circle area. What happens if we don't return anything in the function?

Create a function called celsiusToFahrenheit it should have a parameter called celsius. It should return the temperature in fahrenheit.

Try call the function and check with google if the function returns the right value.

Exercise: Scope

With pen and paper write what is logged out.

const global = "global";
function scopeTest() {
  console.log(functionScope);
  console.log(global);
  const functionScope = "functionScope";

  function tester() {
    console.log(global);

    const testerVariable = "testerVariable";
  }

  tester();
  console.log(testerVariable);
}

scopeTest();

for loop exercises

Simple for loop

Create a for loop that logs out the numbers from 74 - 98

for loop in a function

Create a function that has two parameters: stringToLog and numberOfTimesToLog

When calling the function it should log out the stringToLog the amount of times specified in numberOfTimesToLog. Use a for loop.

logString("hello", 3);
// hello
// hello
// hello

Send emails

Imagine we work at a company. Anna from the HR department wants us to send out a couple of emails to some recipients. The only problem is that she sent us the email in a weird format: [email protected]|[email protected]|[email protected]|[email protected]|[email protected]|[email protected]|[email protected]

Use the sendEmailTo function to send an email to all the recipients that we got from Anna.

Hint use the .split method and look up iterating an array js for loop on google.

// This function emulates sending emails to recipients
function sendEmailTo(recipient) {
  // But really it only logs out a string
  console.log("email sent to " + recipient);
}