How to destructure arrays and objects in JavaScript

How to destructure arrays and objects in JavaScript - part 1

The new ES6 syntax for JavaScript, released in 2015 has made it easier for us to work with properties in arrays and objects. Normally when we needed to extract a value from an object or array and assign that to a new variable, we would have to use the dot notation or bracket notation. Examples of how to extract values from objects and arrays:

// for objects
var myObj = {
  firstValue: 'a',
  secondValue: 'b'
};

var objFirstValue = myObj.firstValue;
console.log(objFirstValue); // a;

// for arrays
var myArr = ['a', 'b', 'c', 'd'];
var firstElement = myArr[0];
console.log(firstElement); //a

The code snippet above is to extract a single value from the array and object, but what if we needed to get multiples values?

// for objects
var myObj = {
  firstValue: 'a',
  secondValue: 'b',
  thirdValue: 'c',
  fourthValue: 'd'
};

var objFirstValue = myObj.firstValue;
var objSecondValue = myObj.secondValue;
var objFourthValue = myObj.fourthValue;
console.log(objFirstValue, objSecondValue, objFourthValue); // a b d;

// ==================================================================

// for arrays
var myArr = ['a', 'b', 'c', 'd'];
var firstElement = myArr[0];
var secondElement = myArr[1];
var thirdElement = myArr[2];
console.log(firstElement, secondElement, thirdElement); //a b c

You see how this can become a drag if we had like ten variables to extract from the array or object, thankfully destructuring was introduced in ES6 which makes it a lot easier to extract values from arrays and objects.

Destructuring in ES6

Destructuring arrays and objects in JavaScript are bit similar in syntax but they still have their differences since they are not the same data type.

How to destructure arrays

The code snippet below shows how to destructure arrays:

const myArr = ['a', 'b', 'c', 'd'];
const [firstElement, secondElement, thirdElement, fourthElement] = myArr;
console.log(firstElement, secondElement, fourthElement); //a b d

Isn't that cool?

So what exactly is happening?

On line 2, what we're doing is assigning a variable to the corresponding index of an element in the array.

Normally variable assignments usually happen on the right hand side but destructuring happens on the left, you can think of destructuring as picking eggs from a crate and putting them in individual bowls for proper identification.

It's also possible to skip elements

Yep, you read right, you don't need to keep stuffing variable names until you get to the element you actually want to destructure from the array, here's how that works:

const names = ['Kev', 'James', 'Rose', 'Costa'];

const [person1, , person3, person4] = names;

console.log(person2); // undefined

To skip an element when destructuring you just have to leave a whitespace between two commas where the element's index is located in the original array.

And assign default values too

Welcome back from wonderland, as you just read, it's possible to set default values for elements just in case they do not exist in the original array. for example:

const clothColors = ['red', 'blue', 'green'];

const [sweatShirt, tShirt, hoodie, short, trackPants = 'black'] = clothColors;

console.log(trackPants); // black

Finally, you can store the remaining elements in another array

Using the rest operator ..., it's possible to store the remaining elements in another array like this:

const languages = ['french', 'spanish', 'italian', 'swahili'];

const countries = ([france, ...remainingLanguages] = languages);

console.log(remainingLanguages); // ["spanish", "italian", "swahili"]

In the next article here, we'll be looking at how to destructure objects.

How to destructure arrays and objects in JavaScript - part 1

Comments

More from this blog

How to optimize Vue.js applications

The difference between transition and transition-group components in Vue

Sorting arrays with JavaScript: a deep look into the sort() method

How to build a Markdown blog using Gridsome

How to trigger a Netlify build using Storyblok webhooks

Destructuring in ES6

How to destructure arrays

Command Palette

Comments

More from this blog

Destructuring in ES6

How to destructure arrays