ES6 Breakout

array_destructuring.js

// Array Destructuring

// Destructuring the array the conventional way
const anArray = [1, 2, 3];
const a = anArray[0];
const b = anArray[1];
const c = anArray[2];

// With ES6 Destructuring

const [a, b, c] = [1, 2, 3];
// a = 1, b = 2, c = 3

// Default Values

const [a=10, b=20, c = 30] = [100, 200]

// With Rest Operator

const [e=1, f=2, g=3, ...h] = [1,2,3,4,5,6,7]

// Swaping Values
let a = 25, b = 50;
[a, b] = [b, a]; 

arrow_function.js

// From function declaration

function double(arg1) {
  return arg1 * 2;
}

// Regular function expression

const double = function(arg1) {
  return arg1 * 2;
};

// Make it an arrow function
// Take out the keyword function and insert => after the parameters

const double = arg1 => {
  return arg1 * 2;
};

// With map function

// regular way
const numbers = [4, 5, 6, 7];

const doubles = numbers.map(function(nb) {
  return nb * 2;
});
// Arrow function
const doubles = number.map(nb => {
  return nb * 2;
});
// Shorthand
const doubles = number.map(nb => nb * 2);

// filter

const temperatures = [-1, 25, 15, 10, 30];

const hot = temperatures.filter(temperature => temperature > 20);

// Default Values

// default value with ES5

const square = nb => {
  nb = nb || 1;
  return nb * nb;
};

// square(0); // 25

// problem with 0

function exist(nb) {
  nb = nb || 0;
  if (nb) {
    console.log("nb exists");
  } else {
    console.log("nb does not exist");
  }
}

// With ES6 default value

const square = (nb = 1) => {
  return nb * nb;
};

// This keyword
// is bind to the function
const player = {
  score: 10,
  addScore: function(nb) {
    this.score += nb;
  }
};

// With Arrow function, the this keyword
// is not bind to the function

  const player = {
    score: 10,
    addScore: nb => {
      this.score += nb;
    }
  };

block_scope.js

// var vs let/const
// var is function scope
// let and const are block scope

// Block anything inside {}


function say() {
  if (true) {
    var word = 'yeah!';
  }

  return word;
}



// What is the function returning?
function say() {
  if (true) {
    const word = 'yeah!';
  }
  return word;
}

// a block

function say() {
  let word = 'Boo'
  {
    let word = 'Yeah!'
  }
  return word;
}

// Dead Zone

function say() {
  let word = 'Boo'
  {
    let word = 'Yeah!'
    console.log(word);
  }
  return word;
}

//

var countries = {
    Europe: ['Spain', 'Italy', 'France', 'UK']
}

function findContinent (country, countries) {

  for (var continent in countries ) {
    if (countries[continent].indexOf(country) >= 0) {
      var continentFound = continent;
      } else {
        var continentFound = 'Not found';
      }
    }
    return continentFound;
}

// let vs const
// When declaring const the value cannot be reassigned
// let can be reassigned
// Not to be confused with cannot change value

const temperature = 20;
temperature = 30 // This is not allowed

const temperatures = [20,30,15,-5,-15]
temperatures.push(22); // Is this allowed?
temperatures = []; // Is this allowed

const music = {
  track: 'I Don't Wanna Go to Bed',
  performer: 'Simple plan'
}

music.performer = 'Ed Sheeran'; // Is this allowed?

// Is this allowed?
music = {
  track: 'Boulevard of Broken Dreams',
  performer: 'Green Day'
}

object_destructuring.js

// Object Destructuring


// Destructuring the object the conventional way
const anObj = {a:1, b:2, c: 3};

const a = anObj.a;
const b = anObj.b;
const c = anObj.c;

// With ES6 Destructuring

const {a: a, b: b, c: c} = anObj;
//or 
const {a, b, c} = anObj;

// Different key names
const {a: x, b: y, c: z} = anObj;
// With Default values
const {
        a: x = 10, 
        b: y = 20, 
        c: z = 30, 
        d: w = 40} = anObj;

x=1 y=2 z=3 w=40

string_literals.js

// String Literals

const character = {
    firstName: "Jack",
    lastName: "Sparrow",
    movie: "Pirates of the Carribean",
    actor: "Johnny Depp"
}
// ES5
const outputStr = character.firstName + ' ' + character.lastName + 
                  ' is the main character in the movie ' + 
                  character.movie + ' portrayed by ' + character. actor+ '.';
            
// ES6
...

let outpuStr = `${character.firstName} ${character.lastName} is the main character`