In this tutorial I will show you some of the great features from javascript ES6.

Destructuring

This is a convenient way of extracting multiple values from data stored in (possibly nested) objects and Arrays. It can be used in locations that receive data (such as the left-hand side of an assignment).

Let’s say we have a simple array

let myArray = [1,2,3,4];

Destructuring would look like:

let [first, second, third] = myArray;

Now the variable first will be 1, second will be 2 and third will be 3

If you want to skip a value, you can do something like:

let [first, ,third] = myArray;

Spread

A syntax that allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

Let’s say we have the following function:

function add(...myNumbers) {
  return myNumbers.reduce((accumulator, currentValue) => accumulator + currentValue);
}

We can call it this way:

var numbers = [1, 2, 3];
add(...numbers); // this is a Spread operator

This syntax is very useful when you have an unknown (at dev time) number of arguments that you want to pass to a function. You can .push() several values into an array then use them as parameters to a function.

Rest

A syntax that looks exactly like spread syntax, but is used for destructuring arrays and objects. In a way, rest syntax is the opposite of spread syntax: spread ‘expands’ an array into its elements, while rest collects multiple elements and ‘condenses’ them into a single element.

This operator takes the form ...variableName which will assign to variableName all the remaining parameters after those that were already assigned.

For example:

function add(...myNumbers) {  // this is a Rest operator
  return myNumbers.reduce((accumulator, currentValue) => accumulator + currentValue);
}

Calling add(1, 2, 3); will return 6. In this example, myNumbers is an Array and is assigned the parameters [1, 2, 3].

Andy

Andy

Highly creative and reliable UI Software Engineer and Designer based in Dublin with over 9 years experience currently working at IBM.