We code the web

ES6 Destructuring

Destructuring must be my favorite feature of ECMAScript 6. I don’t exactly know why, I guess I just like the simplicity. It makes your code more clean and declarative.

What destructuring does is it can extract seperate variables from an object or array. I guess you would like to see some code by now, let’s say we have the following object:

1
2
3
4
5
const person = {
name: 'John',
age: 25,
interests: ['programming', 'music', 'fitness']
}

We can now ‘destructure’ it like this:

1
2
3
4
5
const {name, age, interests} = person;
console.log(name); // => 'John';
console.log(age); // => 25;
console.log(interests); // => ['programming', 'music', 'fitness'];

You can also specify new variable names:

1
2
3
4
const {name: personName, age: yearsOld} = person;
console.log(personName); // => 'John';
console.log(yearsOld); // => 25;

Arrays work the same, except the output is controlled by the order of the array, instead of the key names:

1
2
3
4
const [interest1, interest2] = person.interests;
console.log(interest1); // => 'programming'
console.log(interest2); // => 'music'

The array version is only useful if you know the order of the array, it can for instance be useful if you have a function that returns something like an array of coordinates:

1
2
3
4
5
6
7
8
9
10
function getPosition() {
const posX = 5;
const posY = 3;
return [posX, posY];
}
const [x, y] = getPosition();
console.log(x); // => 5
console.log(y); // => 3

There are two big advantages of using destructuring. The first one is that your code more readable. If you destructure an object at the top of a function or code block, it is clear to the reader what variables you are going to use.

The second plus is performance. Destructuring encourages programmers to put object properties in local variables before using them, which can improve application performance. Especially if you are accessing those variables multiple times, maybe in a loop, it is more efficiënt if the variables are locally defined.

You see me using const instead of var a lot in this article. This is a new ECMAScript 6 feature which I will cover in a later article.

Personally I use destructuring a lot when accessing the props or state object in React. A render function without destructuring:

1
2
3
4
5
6
7
8
9
render() {
return (
<div>
<h1>{this.props.title}</h1>
<img src={this.props.image.url} alt={this.props.image.title}/>
<p>{this.props.content}</p>
</div>
);
}

with destructuring:

1
2
3
4
5
6
7
8
9
10
render() {
const {title, content, image} = this.props;
return (
<div>
<h1>{title}</h1>
<img src={image.url} alt={image.title}/>
<p>{content}</p>
</div>
);
}

At first sight the second method does not seem more efficient. But it declares what props are going to be used, the code is more readable and in larger render functions the advantages will become more evident. If you are coding ES6 in your project, try destructuring out!

References

Related posts

Meta programming with ES6 Proxies

Proxies are one of the lesser known functionalities in EcmaScript 6. This is for a reason, they will probably not become your staple exercise in coding Javascript applications. But they are quite cool!

Async ... await in Javascript

We’ve all been through callback hell, maybe we use Promises and Observables to get some relief. Will async await liberate us once and for all?

Var, let or const, what to use?

The Javascript world has grown, a lot. Instead of a simple scripting language, it is now used as a full blown programming language for the web. Not to forget it’s server side capabilities with NodeJS. ECMAScript 6 brings some features to make Javascript a more ‘mature’ language. A good example is the new let and const variable types.