This part of the ES6 series will discuss, you guessed it, various features of ES6, also known as ECMAScript 2015.

The first post will start with a simple introduction to desctructuring. In short, destructuring is a convenient way of extracting values from data stored in objects and arrays.

Object destructuring

Object destructuring can have basic assignment where variable names match those of object keys. Alternatively, it's possible to assign object keys to new variable name.

const person = { name: 'Karolis', age: 99 };
const { name, age } = person; // basic assignment
const { name: name2, age: age2 } = person; // asssigning to new variable name

console.log(person.name, person.age); // Karolis 99
console.log(name, age); // Karolis 99
console.log(name2, age2); // Karolis 99

As you can see, destructuring as above is very convenient as instead of having to repeat writing person.name, person.age and so on, you can just desctructure it all in one line via const { name, age } = person.

Now imagine we have an object with one-level deep nesting. In that case, we can still desctructure the values by using slightly more complex syntax.

const person = {
  name: 'Karolis',
  age: 99,
  social: {
    twitter: 'https://twitter.com/superkarolis',
    facebook: 'https://www.facebook.com/karolisram'
  }
};

const { social: { twitter, facebook } } = person;
console.log(twitter); // https://twitter.com/superkarolis
console.log(facebook); // https://www.facebook.com/karolisram

As you can see, we can have one-level down by referencing object key and then doing further desctructuring within that key, as in the twitter and facebook keys example.

You can also set default values when destructuring by simply assigning variable to a value.

const person = { name: 'Karolis', age: 99 };
const { name, age, species = 'Homo sapiens' } = person;

console.log(species); // Homo sapiens

Using ES6 destructuring is also extremely useful when setting function parameter's default values. In the example below we set Person function to have a and b have default values of 10 and 20 respectively. If either a or b is set when calling the function, default values will be overriden.

Note that if you do not assign the object to an empty object literal on the right-hand side as we do here, the function will look for at least one argument and will throw an error if none is found. Having right-hand side object literal assignment allows us to call Person with no parameters.

function Person({ a = 10, b = 20 } = {}) {
  this.a = a;
  this.b = b;
}

const p = new Person();
const p2 = new Person({ a: 30 });
console.log(p); // Person { a: 10, b: 20 }
console.log(p2); // Person { a: 30, b: 20 }

Array destructuring

Array desctructuring works by mapping variables based on array index. The simplest example can be seen below where we assign x and y to first and second values of the array respectively. Third and fourth values of the array are left untouched.

const arr = ['a', 'b', 'c', 'd'];
const [x, y] = arr;

console.log(x, y); // a b

We can also skip a value by not assigning a variable at the index we are not interested in.

const arr = ['a', 'b', 'c', 'd'];
const [x, , y] = arr;

console.log(x, y); // a c

With array destructuring swapping two values becomes extremely elegant as temporary third variable is no longer needed.

let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a, b); // 3 1

Spread/rest property

What happens when you have an array or an object where you pick off some values via destructuring and still want to keep the rest of the values in a variable? This is where spread/rest property comes really useful which allows to do just that.

const person = {
  name: 'Karolis',
  age: 99,
  gender: 'male'
};

const { name, ...rest } = person;
console.log(name, rest); // Karolis { age: 99, gender: 'male' }

Above example shows how spread/rest operator works for objects and the below example shows the same but for arrays.

const arr = ['a', 'b', 'c', 'd'];
const [x, ...rest] = arr;

console.log(rest); // [ 'b', 'c', 'd' ]

Keep in mind that the variable containing the rest of the array or object values does not have to be called rest. The key is to use three dots (...) before the variable name to indicate it as a spread/rest operator.

Using rest/spread operator is an extremely common pattern in React where we can pass down all properties in one rest/spread operator e.g. <Child {...props} />. This prevents us from having to write out each property individually such as <Child prop1={this.props.prop1} prop2={this.props.2} />. Hopefully, now you will fully understand how it works.