ES6 or ECMAScript 2015 Features

List

• arrow functions
• let + const
• Template literals (Template strings)
• for..of
• Default parameters
• Spread and rest syntax (...)
• Destructuring assignment
• Enhanced Object Literals

Default parameters

Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed.

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5, 2));
// expected output: 10

console.log(multiply(5));
// expected output: 5

Spread and rest syntax (...)

Spread syntax (...)

• allows an iterable such as an array expression or string to be expanded into single arguments/elements.

For function calls:

myFunction(...iterableObj); // pass all elements of iterableObj as arguments to function myFunction

For array literals or strings:

[...iterableObj, '4', 'five', 6]; // combine two arrays by inserting all elements from iterableObj

For object literals (new in ECMAScript 2018):

let objClone = { ...obj }; // pass all key:value pairs from an object 

Useful:

• when we want to create copy of object or an array. Note it only copies one level down so won't work on nested elements
• When we want to combine two arrays or objects
• While combining objects if we have same properties, it will override it based on the order

Rest parameter

• collects all remaining elements into an array.
• used in functions
• Rest parameters have to be at the last argument. This is because it collects all remaining/ excess arguments into an array. Else it will throw an error
• Before rest parameters existed, to get all the arguments in a function we used arguments which is an array-likeobject. but it had many disadvantages and couldn't be used with arrow functions.

function add(x, y) {
  return x + y;
}

add(1, 2, 3, 4, 5) // returns 3

function add(...args) {
  let result = 0;

  for (let arg of args) result += arg;

  return result
}

Destructuring assignment

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

let a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

// Stage 4(finished) proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

Enhanced Object Literals

• short hand syntax

If key and value variable is same then we can just use one name while creating object

let name = "preeti";

const person = {
                 name
               }

• computed properties

Before, whenever we wanted use a variable name for object property we used to do like this:

const name = "person_name";

const person = {};
person[name] = "preeti";

now we can directly use variables names inside the object

const name = "person_name";

const person = {
   [name]: "preeti"
};

• short hand function syntax inside object

const math = {
  add(a,b){
       a+b;
  }
}

math.add(2,3);
// output:  5