YogeshChauhan . com

Array destructuring and Object destructuring in JavaScript

in JavaScript on 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

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 7 How to disable right click and drag and drop of images using jQuery? May 7 How to render Lists in React? May 7 What’s the difference between variables in CSS and SCSS (Sass)? May 7 How to define variables in SCSS (Sass)? May 7 How to show and hide an element on click in React? May 5 Use inline if to make a shorter conditional syntax in React

You might also like these

How to vertically and horizontally align text and image block (without flex or grid) in CSS?CSSHow to Recognize an Array in JavaScript?JavaScriptPostgreSQL BETWEENPostgresSolution for Xcode 11 Command PhaseScriptExecution failed with a nonzero exit code errorMiscHow to Skip or Exclude a Specific URL or File From .htaccess Rewrite Rule?PHPRecursion in JavaScriptJavaScript