YogeshChauhan.com
Array destructuring and Object destructuring in JavaScript
November 16, 2020

With the destructuring assignment syntax you can extract values from arrays, or even properties from objects, into variables.

When you are working in React or Angular or any other JS framework, you’ll find this feature really helpful.

This is how we can access arrays elements without destructuring:


var array_element_1 = array[0];
var array_element_2 = array[1];
...
...

With destructuring assignment, we can make the same code more concise and readable.

Like this:


var [array_element_1, array_element_2] = array;

Syntax


[ var_1, var_2, var_3, ..., var_N ] = array;

As you might have figured it out, the above code will assign variables all the variables to items(elements) in array.

Also, we can declare variables using var, let, or const at the time of assignment.

For e.g.


var [ var_1, var_2, var_3, ..., var_N ] = array;
let [ var_1, var_2, var_3, ..., var_N ] = array;
const [ var_1, var_2, var_3, ..., var_N ] = array;

This syntax that looks similar to array or object literals. Isn’t it?

💡 This capability of JavaScript is similar to features present in languages such as Perl and Python.

Array destructuring

Assign values from an array to variables 


const priorities = [1, 2, 0];

const [gym, work, movie] = priorities;
console.log(gym); // 1
console.log(work); // 2
console.log(movie); // 0

Declare variables and then assign values

As we saw earlier, we can declare the variables and then assign the values.


let a, b;

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

Assign Default Values (Be Aware!)

If the variables have values assigned to them, then it will get replaced when you use the destructuring assignment.


let a, b;

[a="Yogesh", b="Jon"] = [1];
console.log(a); // 1
console.log(b); // Jon

Swap variable values

Destructuring assignment makes swapping way easier. You don’t even need the third variable to swap values of two variables.

Like this:


let y = "Yogesh";
let j = "Jon";

[y, j] = [j, y];
console.log(y); // Jon
console.log(j); // Yogesh

Also, we can swap the elements in arrays


const array = ["Yogesh", "Blog", "Chauhan's"];
[array[2], array[1]] = [array[1], array[2]];
console.log(array); 
// [ 'Yogesh', "Chauhan's", 'Blog' ]

Parsing an array returned from a function


function top3() {
  return [1, 2, 3];
}

let a, b, c; 
[a, b, c] = top3(); 
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

It’s never been easier to get the returned array and save it to variables. ES6 rocks!

What if we just want to ignore some values?


function top3() {
  return [1, 2, 3];
}

let a, c; 
[a, , c] = top3(); 
console.log(a); // 1
console.log(c); // 3

Just leave a black while assigning the values and it won’t save it.

What is you leave all elements black?


function top3() {
  return [1, 2, 3];
}

let a, c; 
[ , , ] = top3(); 
console.log(a); // undefined
console.log(c); // undefined

It doesn’t have variables to save the values and we are calling the variables which do not have any values so we get undefined.

The values might be out there in the space somewhere, like lost in the black hole! JK! Interesting thought though 😜

What if we just pass one variable and nothing else, no blanks?


function top3() {
  return [1, 2, 3];
}

let a, c; 

[a] = top3(); 
console.log(a); // 1

[c] = top3(); 
console.log(c); // 1

Every time we do that, it will just take the first value and assign it to that variable passed. So, we won’t be able to access the further values.

What is we have 10 values, or 50, or 500?

I don’t think it’s a good idea to write down all the elements to get the values. 

JavaScript does have the solution though, not a complete solution but it does offer one.


function top3() {
  return [1, 2, 3];
}

let a, c; 
[a, ...c] = top3(); 
console.log(a); // 1
console.log(c); // [2, 3]

Object destructuring

Assign values from an object to variables 


const priorities = {
    gym: 1,
    work: 2,
    movie: 0
};

const {gym, work, movie} = priorities;

console.log(gym); // 1
console.log(work); // 2

Assign values to variables that are not declared


let a, b;

({a, b} = {a: 1, b: 2});

Assign to new variable names

An object property can be unpacked from an object and assigned to a variable with a different name than the object property.


const book = {pages: 200, read: true};
const {pages: totalPages, read: isRead} = book;
 
console.log(totalPages); // 200 
console.log(isRead); // true

Default values

A variable can be assigned a default in object same as we saw earlier in array.

In the case that the value unpacked from the object is undefined.


const {bookToRead = 10, alreadyRead = 5} = {bookToRead: 3};

console.log(bookToRead); // 3
console.log(alreadyRead); // 5

Assigning to new variables names and providing default values

A property can be both

1. unpacked from an object and assigned to a variable with a different name and

2. assigned a default value in case the unpacked value is undefined.

This is the same case as we in the array earlier.


const {bookToRead: BR = 10, alreadyRead: AR = 5} = {bookToRead: 3};

console.log(BR); // 3
console.log(AR); // 5

There are so many possibilities when it comes to deconstructing an object or an array.

Credit: MDN Docs

dreamhost

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS Mar 2 WordPress: How to access first and random row values from a repeater field in ACF? Mar 1 The basics of CSS Box model Feb 27 WordPress: How to display slider repeater fields in ACF? Feb 26 Simple Page Hit Counter in PHP

You might also like these

CurrencyPipe in Angular 9 with ExamplesAngularThe fundamental difference between HAVING and WHERE clauses in PostgresPostgresHow to create ‘share on LinkedIn’ link using just HTML?HTMLJavaScript String Properties and MethodsJavaScriptSELF JOIN in PostgresPostgresHow to import a CSS file using PHP code and not HTML code?PHP