JavaScript Arrow Function, Spread & Rest Operators And Destructuring Syntax

With ECMAScript6 (ES6) JavaScript got new syntax. Followings are some of the new syntax.

Arrow Functions

New syntax for defining a function

Traditional Function	ES6 Arrow Function
function myFunction() { ... }	const myFunction = () => { ... }
function myFunction(name) { ... }	const myFunction = (name) => { ... } also without parenthesis if only one argument const myFunction = name => { ... }
function add(n, m) {     return n+m; }	const add = (n, m) => n+m; if a single line return then the return keyword and the  curly brackets can be omitted

Spread Operator

Used to split up array elements OR object properties

const newArray = [...oldArray, 1, 2];

const newObject = {...oldObject, newProerty:newValue}

newArray is a one dimensional array contains all the elements in oldArray and additionally 1, 2

newObject has all the properties of oldObject in addition to the it has newProperty 

(if the oldObject already has newProperty it will be overwritten)

Spread operator is useful when copying an array or an object.

Rest Operator

Used to merge a list of function arguments into an array

function sortArgs(...args) {
       return args.sort();
}

Destructuring

Easily extract array elements or object properties and store them in variables

Array Destructuring

[a, b] =  ["Hello", "World"]
console.log(a) // Hello
console.log(b) // World

Object Destructuring

{name} = {"name": "Aang", "age" : 112}
console.log(name) // Aang
console.log(age) // undefined