Destructuring In JavaScript

A Frontend Engineer is undoubtedly familiar with the array and Object. In JavaScript 2015 or many people call it ES6 (EcmaScript 6 / 2015) there is an interesting feature, namely Destructuring, in this article I will discuss Destructuring on Arrays and Objects.

Destructuring on Array

Getting the value from an array that has more than one element may take several lines of code. but with the Destructuring feature from ES 6 (EchmaScript 6 / 2015) then we will get the same result with less lines of code.

Before ES6 (EcmaScript 6 / 2015) to extract values from an array you had to do something like this:

const fruits = ['apple', 'banana', 'orange'];

const apple = fruits[0];
const banana = fruits[1];
const orange = fruits[2];

console.log('i have a', apple, 'and a', banana, 'and an', orange);

Output: i have a apple and a banana and an orange

The above code certainly works fine, but we use 3 lines of code to get 3 values, this is only 3 elements. Imagine if we wanted to get 5 or more values, of course there would be a lot of lines of code used too.

Now let's try using the Destructuring feature.

const fruits = ['apple', 'banana', 'orange'];

// index 0, 1, 2
const [apple, banana, orange] = fruits;

console.log('i have a', apple, 'and a', banana, 'and an', orange);

Output: i have a apple and a banana and an orange

We get the same result as the 1 line of code above, we don't need to write 3 more lines of code. Then we can also ignore unwanted values. For example, we only want to get apple and orange values.

we can ignore the defined variable to retrieve the array value like this:

const fruits = ['apple', 'banana', 'orange'];

// index 0, 1, 2
const [apple, , orange] = fruits;

console.log('i have a', apple,  'and an', orange);

Output: i have a apple and an orange

or just want to get orange value only, then do like this:

const fruits = ['apple', 'banana', 'orange'];

// index 0, 1, 2
const [, , orange] = fruits;

console.log('i have a', orange);

Output: i have a orange

then what if you only want to get apple and banana values only? because the apple and banana values are at index 0 and 1 or sequentially then we can ignore the others like this:

const fruits = ['apple', 'banana', 'orange'];

// index 0, 1
const [apple, banana] = fruits;

console.log('i have a', apple,  'and an', banana);

Output: i have a apple and an banana

Destructuring on Object

We all know that when creating an object we use curly braces {...} and it must contain properties. A property must have a key and a value where the key must be a string or symbol and the value can be of any type. To get the value of an object is different from an array. Before ES 6 (EchmaScript 6 / 2015) you had to do something like this:

const user = {
  firstName: 'Jhon',
  lastName: 'Doe',
  age: 24,
};

const firstName = user.firstName;
const lastName = user.lastName;
const age = user.age;

console.log(`Hello my name is ${firstName} ${lastName} and i'm ${age} years old.`);

Now let's try using the Destructuring feature.

const user = {
  firstName: 'Jhon',
  lastName: 'Doe',
  age: 24,
};

const { firstName, lastName, age } = user;

console.log(`Hello my name is ${firstName} ${lastName} and i'm ${age} years old.`);

Output: Hello my name is Jhon Doe and i'm 24 years old.

if in the array we enter the value in a square braces and also the value obtained in the order of the index. while the object we call every key that is inside the object to a curly braces on the left side.

different from an array if you want to take the value that is at the 2nd index for example, we have to empty the variable to get the previous value like so:

const fruits = ['apple', 'banana', 'orange'];

// index 0, 1, 2
const [, , item_index_2] = fruits;

console.log(`i have a ${item_index_2}`);

Output: i have a orange

in the object that we enter is the key of the Object itself, for example we want to take only the key age.

const user = {
  firstName: 'Jhon',
  lastName: 'Doe',
  age: 24,
};

const { age } = user;

console.log(`Hello i'm ${age} years old.`);
Output: Hello i'm 24 years old.

make sure what is inserted into the curly braces on the left side matches the key on the object you want to destruct

Conclusion

Now you know how to use Destructuring on Arrays & Objects..

Reference

• MDN Docs
• How to Use Array and Object Destructuring in JavaScript