ali-hd/w04-d1

JS ES6 arrow functions let const

Advanced JS & ES2015

Agenda

1. Scope review
2. Let vs Var [source]
3. Const [source]
4. Arrow (or fat) functions

1. Scope review

• See slides

2. Let vs. Var

• let gives you the privilege to declare variables that are limited in scope to the block, statement of expression unlike var.

• var is a keyword which defines a variable globally regardless of block scope.

2.1 Block Scoping

• For loop using let variable

for (let i = 0; i < 10; i++){
  console.log(i); // i is visible thus is logged in the console as 0,1,2,....,9
}
  console.log(i); //throws an error as "i is not defined" because i is not visible

• For loop using var variable

for (var i = 0; i < 10; i++){
  console.log(i); // i is visible thus is logged in the console as 0,1,2,....,9
}
  console.log(i); //i is visible here too. thus is logged as 10.

2.2 Re-declaration

• var variables can be re-declared in the same scope but let variables can't be re-declared in the same scope.

var varVariable = "I'm a var variable";
var varVariable = "I think more than a variable"; // No issues
// varVariable <-- "I think more than a variable"

let letVariable = "I'm a let variable";
let letVariable = "I think more than a variable"; // Uncaught SyntaxError: Identifier 'letVariable' has already been declared
// letVariable <-- "I'm a let variable"

2.3 Function Scoping

• let and var variables work the same way when in comes to function scoping

function ohFunctionMyFunction(){
    let letVariable = "I'm a let variable";
    var varVariable = "I'm a var variable";
    console.log(letVariable);
    console.log(varVariable);
}
ohFunctionMyFunction()
// <-- "I'm a let variable"
// <-- "I'm a var variable"

console.log(letVariable); // Uncaught ReferenceError: letVariable is not defined
console.log(varVariable); // Uncaught ReferenceError: varVariable is not defined

• Read more about var vs let here

3. Const

• Constants are block-scoped, much like variables defined using the let statement. The value of a constant cannot change through reassignment, and it can't be re-declared.

const myFavoritePerson = "Usman";
let myFavoriteAlien = "Moath";

myFavoritePerson = "Mic"; // Error
myFavoriteAlien = "Ghadeer"; // Good call

• Read more about const here

4. Arrow Functions

But How?

1. Convert regular function declarations to arrow function expressions
2. Refactor arrow functions
3. Debug your arrow functions

Convert

function addFive(num) {
  return 5 + num;
}

function divide(num1, num2) {
  return num1/num2;
}

function whosTheBestIA() {
  let iaName = 'Ghadeer';
  console.log(iaName);
}

Refactor

const addFive = (num) => 5 + num;

const divide = (num1, num2) => num1/num2;

const whosTheBestIA = () => {
  let iaName = 'Ghadeer';
  console.log(iaName);
}

• Read more about arrow functions here

YOU DO

Refactor the following code to ES6. The console should return:

var alwaysTrue = true;

function myBarn(petMe) {
 var that = this;
  that.petMe=petMe;
  var animals = {
    petMe: petMe,
  };
  
  if (alwaysTrue) {
    var animals = {
      petMe: "pig",
    };
    var greeting = 'This animal should be a pig; it is a: ' + animals.petMe + '.';
    
    console.log(greeting);
  }
  
  console.log('This animal should be a dog; it is a: ' + animals.petMe);  // 2
}

myBarn("dog");

Solution

const alwaysTrue = true;

const myBarn = petMe => {
 
  this.petMe=petMe;
  let animals = {
    petMe,
  };
  
  if (alwaysTrue) {
    let animals = {
      petMe: "pig",
    };
    const greeting = thisOne => `This animal should be a pig; it is a: ${thisOne}.`;
    console.log(greeting(animals.petMe));
  }
  
  console.log('This animal should be a dog; it is a: ' + animals.petMe);
}

myBarn("dog");

Resources

• Slides
• Code