ES6 Array Destructuring

In our previous blog post, we learned about “Object Destructuring”. Next, in this post let’s take a tour of “Array Destructuring”.

Array destructuring works the same as object destructuring but instead of using name to identify the property as in object destructuring, we identify it by position in array starting with position zero.

ES5 Code:

const months = ["January", "February"];
console.log(months[0]); // January
console.log(months[1]); // February

ES6 Code:

const months = ["January", "February"];
const [firstMonth, secondMonth] = months;
console.log(firstMonth); // January
console.log(secondMonth); // February

As you can see, the value from the array months with index 0 get assigned to firstMonth variable and index 1 value will be assigned to secondMonth variable.

If we want only the first value we can also do that as

const months = ["January", "February"];
const [firstMonth] = months;
console.log(firstMonth); // January

But what if we want only second month and don’t want to create variable firstMonth if we are not using it. we can skip it as shown below.

const months = ["January", "February"];
const [,secondMonth] = months;
console.log(secondMonth); // February

Note, there is comma before the secondMonth variable which will allows us to skip the creation of variable. So if we want to get the 3rd element of the array we can add one more extra comma.

const months = ["January", "February", "March"];
const [,,thirdMonth] = months;
console.log(thirdMonth); // March

We can also assign the default value if the value does not exists.

const months = [];
const [ firstMonth = "January" ] = months;
console.log(firstMonth); // January

Suppose you want to swap 2 numbers.

ES5 Code:

let x = 10, y = 20;
let temp;
// Swap the x and y
temp = x;
x = y;
y = temp;
console.log(x, y); // 20 10

ES6 Code:

const [y, x] = [10, 20];
console.log(x, y); // 20 10

We can also use the rest operator which is three dots combined with array destructuring.

const months = ["January", "February", "March"];
const [firstMonth, ...restMonths] = months;
console.log(firstMonth); // January
console.log(restMonths); // ["February", "March"]

We can extend this further also.

const months = ["January", "February", "March", "April"];
const [firstMonth, secondMonth, ...restMonths] = months;
console.log(firstMonth); // January
console.log(secondMonth); // February
console.log(restMonths); // ["March", "April"]

Now we will look into some complex examples of destructuring.

Example 1:

const users = [ 
 {
  name: 'David',
  age: 20
 },
 {
  name: 'Billy',
  age: 40
 },
];

Now, suppose we want to get the first user object.

const [firstUser] = users;
console.log(firstUser); // {name: "David", age: 20}

What if we want to get the name from the first user object?

const [{ name }] = users;
console.log(name); // David

First to get the 1st object of the array, we used the following.

const [firstUser] = users;

Now from that object we want name property, so we use object destructuring syntax where the variable name has to match the property name of the object so we destructured it as

const [{ name }] = users;

Example 2:

Now consider we have visitedCountries object.

const visitedCountries = {
 countries: ["USA", "JAPAN"]
};

How can we get the first country from the list of countries?

const { countries: [ firstCountry ] } = visitedCountries;
console.log(firstCountry); // USA

and how to get the second country?

const { countries: [ , secondCountry ] } = visitedCountries;
console.log(secondCountry); // JAPAN

Example 3:
Consider, we have a user’s array. Each array represents the name, country, age.

const users = [
 ["David", "USA", 30],
 ["Billy", "Japan", 35],
 ["Mike", "Singapore", 50]
];

How can we convert it to an array of objects as shown below?

const convertedUsers = [
  {
    "name": "David",
    "country": "USA",
    "age": 30
  },
  {
    "name": "Billy",
    "country": "Japan",
    "age": 35
  },
  {
    "name": "Mike",
    "country": "Singapore",
    "age": 50
  }
]

We can use the map method and array destructuring here.

const convertedUsers = users.map(function([name, country, age]) {
 return { name: name, country: country, age: age };
});
console.log(convertedUsers);
/* output
[
  {
    "name": "David",
    "country": "USA",
    "age": 30
  },
  {
    "name": "Billy",
    "country": "Japan",
    "age": 35
  },
  {
    "name": "Mike",
    "country": "Singapore",
    "age": 50
  }
]
*/

As you can see from the above code.

return { name: name, country: country, age: age };

the key and value are same, so we can further simply it using ES6 Object Shorthand syntax as

const convertedUsers = users.map(function([name, country, age]) {
 return { name, country, age };
});

This is still taking three lines of code so we can further simplify it using arrow function as

users.map(([name, country, age]) => ({ name, country, age }));

Here we are implicitly returning the object { name, country, age } by adding it inside the round brackets ().
The output is same as above but its easy to understand and will save from typing some extra characters.

For more Information and to build a website using React JS, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“. To develop your custom website using React JS, please visit our technology page.

Content Source:

1. medium.com