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:

const person = {
  name: 'John',
  age: 25,
  interests: ['programming', 'music', 'fitness']
}

We can now ‘destructure’ it like this:

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:

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:

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:

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:

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:

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

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?

Flux, what and why?

If you are into front-end development, you’ve probably heard or read the term ‘Flux’. What does it mean and why should you care?

Handling async in Redux with Sagas

Using Redux is a nice way to code structured, testable Javascript applications. But there’s still one thing that can prove to be a challenge, asynchronous operations.