[JavaScript] ECMAScript 6

Scopes of the var and let Keywords

var i = 'global scope'

function checkScope() {
  let i = 'function scope';
  console.log(i); // function scope

  if (true) {
    i = 'block scope';
    console.log(i); // block scope
  }
  console.log(i); // block scope
  return i;
}
console.log(checkScope()); // block scope
console.log(i); // global scope

When you declare a variable with the var keyword, it is declared globally, or locally if declared inside a function.

When you declare a variable with the let keyword inside a block, statement, or expression, its scope is limited to that block, statement, or expression.

Mutate an Array Declared with const

const s = [5, 6, 7];
s = [1, 2, 3]; // error
s[2] = 45;
console.log(s); // [5, 6, 45]

The const keyword in JavaScript to declare variables whose value can be initialized only at the time of declaration.

Some developers prefer to assign all their variables using const by default unless they know they will need to reassign the value. Only in that case, they use let.

However, objects (including arrays and functions) assigned to a variable using const are still mutable.

Object.freeze()

let obj = {
  name:"Jame",
  age:45
};
Object.freeze(obj);

obj.name = "Mike"; // error
obj.age = 32; // error

const declaration alone doesn't protect your data from mutation. To ensure your data doesn't change, JavaScript provides a function Object.freeze to prevent data mutation.

Arrow Functions

// Function
function func() {
  //Your Code Here
}
// Anonymous function
function() {
    //Your Code Here
}
// Inline function
var func = function() { 
    //Your Code Here 
};

We often don't need to name our functions, especially when passing a function as an argument to another function. Instead, we create inline functions. We don't need to name these functions because we do not reuse them anywhere else. ES6 allows us to not have to write anonymous functions this way.

// arrow function
const myFunc = () => {
  const myVar = "value";
  return myVar;
}
// When there's only a return value
const myFunc = () => "value";

Instead, you can use the arrow function syntax. When there is no function body, and only a return value, arrow function syntax allows you to omit the keyword return as well as the brackets surrounding the code.

Default Parameters

const greeting = (name = "Anonymous") => "Hello " + name;

console.log(greeting("John")); // Hello John
console.log(greeting()); // Hello Anonymous

ES6 allows function parameters to have default values.

Rest Parameter

function howMany(...args) {
  return args.length;
}
console.log(howMany(0, 1, 2)); // 3
console.log(howMany("string", null, [1, 2, 3], { })); //4

The rest parameter (...) allows a function to treat an indefinite number of arguments as an array.

The Spread Operator

const numbers = [1, 2, 3, 4, 5, 6];

const [one, two, ...rest] = numbers;

console.log(one); // 1
console.log(two); // 2
console.log(rest); // [ 3, 4, 5, 6 ]

The spread operator ( ... ) allows us to quickly copy all or part of an existing array or object into another array or object.

Destructuring Assignment

//Array destructuring
[x, y, ...rest] = [10, 20, 30, 40, 50];
console.log(x); // 10
console.log(y); // 20
console.log(rest); // [30, 40, 50]

//Object destructuring
({x, y, ...rest} = {x: 10, y: 20, m: 30, n: 40});
console.log(x); // 10
console.log(y); // 20
console.log(rest); // {m: 30, n: 40}

Destructuring Assignment is a JavaScript expression that allows us to unpack values from arrays, or properties from objects, into distinct variables data can be extracted from arrays, objects, nested objects and assigned to variables.

Template Literals

let text = `He's called "James"`;

Template Literals use back-ticks (``) rather than quotes ("") to define a string. With template literals, you can use both single and double quotes inside a string.

let firstName = "firstName";
let lastName = "lastName";

let text =
`Hello,
my name is ${firstName}, ${lastName}!`;

Template literals allow you to create multi-line strings and to use string interpolation features to create strings.