JS | ES6

Lecture Summary

ES6 most important changes/new features:

let and const (block scoping)
Template literals (template strings)
Arrow functions
Default parameters
Arrow functions
Destructuring assignment
Enhanced object literals (key: value shorthand)
Promises
Classes - (class syntax)
Modules

`let` and `const`

Block - block is any code between open and closed curly braces {}.
let and const variables are block scoped.
let and const cannot be accessed before they are declared.
let and const hoist but can't be accessed before the line on which they are declared, which is called Temporal dead zone .

//  BLOCK SCOPE - let and const variables
let name = "Ironhacker";

if (true) {
  let name = "Ted";
  console.log(`Name inside if block statement: ${name}`);
}

console.log(`Name outside if block statement: ${name}`);

// Name inside if block statement: Ted
// Name outside if block statement: Ironhacker

`let`

let can be updated (reassigned new value), but it can't be redeclared.

// THIS IS OK
let message = "This is the first message.";
message = "NEW - This is the second message.";

// BUT THIS WILL THROW AN ERROR
let message = "This is the first message.";
let message = "This is the second message."; // <== Duplicate declaration "message"

`const`

const variables must be initialized in the moment of declaration.

const name1 = "John"; // <== CORRECT

const name2;
name2 = "John"; // WRONG! - This will throw an Error

const variables can't be redeclared.

// AND THIS WILL THROW AN ERROR - redeclaring
const message = "This is the first message.";
const message = "This is the second message."; // <== Duplicate declaration "message"

const variables can't be assigned another value, after they are created.

// THIS WILL THROW AN ERROR - assigning another value
const message = "This is the first message.";
message = "This is the second message."; //  This will throw TypeError: Assignment to constant variable.

const Objects and arrays can be mutated (BUT not reassigned).

// This is ok ✅
const obj = {};
obj.name = "Ironhacker";

// This is not 🚨
obj = { name: "Ironhacker" };
// SyntaxError: Assignment to constant variable

// This is ok ✅
const arr = [];
arr[0] = "Sarah";

// This is not 🚨
arr = [];
// SyntaxError: Assignment to constant variable

Template Strings

// OLD WAY - CONCATENATING VALUE
const name = 'John';
let greeting = 'Hello ' + name;

// NEW WAY - TEMPLATE STRINGS
const newGreeting = `Hello ${name}`;

const num = 25;
const str = `The result is: ${ num / 5 + 5 }`

// TEMPLATE STRINGS - Enter creates a new line
let multiLiner = `string text line 1
string text line 2
`

console.log(multiLiner);

String methods `includes()`, `startsWith()` , `endsWith()`

// NEW STRING METHODS
const str = "To be, or not to be, that is the question.";

console.log(str.includes("to be")); // true
console.log(str.includes("nonexistent")); // false

console.log(str.startsWith("To be")); // true
console.log(str.startsWith("not to be")); // false

console.log(str.endsWith("question.")); // true
console.log(str.endsWith("to be")); // false

Arrow function

Arrow function doesn't have built in arguments object.
Arrow function doesn't have this variable.

// Arrow function ES6

var greeting = (name) => {
  console.log(arguments);
  console.log(this);
	return 'Hello ' + name;
}

console.log(greeting() );

Concise Arrow function

Concise arrow function is used for code that can fit in one line and it doesn't use {} or return.

Function still returns value same like if the return keyword is present.

// Concise arrow function ES6
var greeting = (name) =>  'Hello ' + name;

console.log(greeting() );

Destructuring Objects and Arrays

Destructuring Is a way to create variables with data from arrays and objects.

Objects

  // OBJECTS
  // OLD WAY
  let person = {
    name: "Ironhacker",
    age: 25,
    favoriteMusic: "Metal"
  };
  
  let name = person.name;
  let age = person.age;
  let favoriteMusic = person.favoriteMusic;
  
  console.log(`Hello, ${name}.`);
  console.log(`You are ${age} years old.`);
  console.log(`Your favorite music is ${favoriteMusic}.`);
  

  // DESTRUCTURING 
  const { name, age, favoriteMusic } = person;

Arrays

// ARRAYS
const numbers = ["one", "two", "three", "four"];

// DESTRUCTURING

// Take the first 3 elements of the array
const [first, second, third] = numbers;
console.log(first, second, third);

// Skip the elements on indices 0(first) and 1(second) and take the third one
const [ , ,thirdString] = numbers;
console.log(third); // <== three

// Fail safe destructuring
const [a,b,c,d,e] = numbers;
console.log('d -> ', d);
console.log('e -> ', e);  // No value is availalbe, JS assigns undefined

Default Arguments in the functions

// DEFAULT ARGUMENTS
function getNum(num = 99) {
	console.log(num);
}

getNum(10); // 10
getNum(); // 99

Spread operator `...`

Spread operator ... allows us to spread the entire array and/or do the shallow copy of the array.

Spread operator - arrays

// SPREAD THE ARRAY
const numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3

const newArray = [...numbers, 5, 6, 7];
console.log(newArray); // [1, 2, 3, 5, 6, 7]

Spread operator - objects

Spread operator ... can be used to copy properties from one object to the new object.

// COPYING THE OBJECT PROPERTIES
const obj1 = { firstName: 'Foo', age: 22 };
const obj2 = { lastName: 'Bar', gender: 'M' };

const newObj = { ...obj1, ...obj2, planet: 'Earth' };
console.log(newObj)

Rest operator `...`

Rest operator is same ..., but it is used when creating a function.

We use it in the parentheses of the function to select passed arguments.

It allow us to get the remaining arguments passed in a function - replaces the function's default arguments.

Important :

When used ... in a function rest operator has to be the last formal parameter within the function parentheses.

// REST OPERATOR  ...

function myFunction(arg1) {
  console.log(arg1);
  console.log(arguments);
}

// Before ES6 there wsa no simple way to capture remaining arguments
myFunction("first argument", "second argument", "third argument", "fourth");


// Using the Rest operator
function myNewFunction(arg1, ...args) {
  console.log(arg1);
  console.log(args);
}

myNewFunction("One", "Two", "Three", "Four", "Five");


// WRONG !!!
// Throws `SyntaxError: Rest parameter must be last formal parameter`
function myNewFunction(arg1, ...args, lastArg) {
  console.log(args);
  console.log(lastArg);
}

Enhanced object literals - `key: value` shorthand

const name = 'Bob';
const age = 20;

const x = {
  name
  age,
}

/* same as:

const x = {
  name: name,
  age: age
}

*/

ross-u/README.md