Destructuring in JavaScript (Array, Object, and Spread Operator)

Spread the love

Destructuring is an (ES6/ECMAScript 2015) ECMAScript 6 feature. One of the strengths of JavaScript is Destructuring and along with Destructuring how can we use the spread operator? We will learn in today’s blog how to use it.

Let’s get Started:

What is Destructuring?

It applies to arrays and objects. It breaks down the complex structure of the array and object to extract the values we are interested in. It makes the code simpler and easier to read.

//Syntax
let array = [1, 2, 3];
let [a, b, c] = array;

//Syntax

let array = [1, 2, 3];

let [a, b, c] = array;

Destructuring Array

1. How to Extract Elements through an array?

Example

Before: Without Destructuring

let language = ["JavaScript", "Python", "Java"];
let lang1 = language[0];
let lang2 = language[1];
let lang3 = language[2];
console.log(lang1, lang2, lang3);

let language = ["JavaScript", "Python", "Java"];

let lang1 = language[0];

let lang2 = language[1];

let lang3 = language[2];

console.log(lang1, lang2, lang3);

Now, let’s take a look at how we’d do the same thing using Destructuring.

let language = ["JavaScript", "Python", "Java"];
let [lang1, lang2, lang3] = language;
console.log(lang1, lang2, lang3);

let language = ["JavaScript", "Python", "Java"];

let [lang1, lang2, lang3] = language;

console.log(lang1, lang2, lang3);

2. How to Extract Selected Elements through an array?

Example:

let language = ["JavaScript", "Python", "Java"];
let [lang1,  ,lang3] = language;
console.log(lang1, lang3);

let language = ["JavaScript", "Python", "Java"];

let [lang1, ,lang3] = language;

console.log(lang1, lang3);

We can simply use commas if we want to leave out any element from an array. Let’s take look at the above example.

3. Assignment without declaration

Example:

let [lang1, lang2] = ["JavaScript", "Python"];
console.log(lang1, lang2);

1 2	let [lang1, lang2] = ["JavaScript", "Python"]; console.log(lang1, lang2);

4. Swapping Variables

Example

Before:

let lang1 = "C++";
let lang2 = "Java";
let temp = lang1;
lang1 = lang2;
lang2 = temp;
console.log(lang1, lang2);

let lang1 = "C++";

let lang2 = "Java";

let temp = lang1;

lang1 = lang2;

lang2 = temp;

console.log(lang1, lang2);

Now, with the help of destructuring we can do this in a single line.

let lang1 = "C++";
let lang2 = "Java";
[lang1, lang2] = [lang2, lang1];
console.log(lang1, lang2);

let lang1 = "C++";

let lang2 = "Java";

[lang1, lang2] = [lang2, lang1];

console.log(lang1, lang2);

5. Multiple Value Returns

function calculate(a, b, c) {
    let add = a + b + c;
    let subtract = a-b-c;
    return [add, subtract];
};
let [add, subtract] = calculate(1,2,3);
console.log(add, subtract);

function calculate(a, b, c) {

let add = a + b + c;

let subtract = a-b-c;

return [add, subtract];

};

let [add, subtract] = calculate(1,2,3);

console.log(add, subtract);

Destructuring Objects

1.How to Extract Elements through an Object?

Example

Before: Without Destructuring.

const object = {
    name: "Sameeksha",
    Id: 21
};
console.log(object.name);
console.log(object.Id);

const object = {

name: "Sameeksha",

Id: 21

};

console.log(object.name);

console.log(object.Id);

Now, let’s take a look at how we’d do the same thing using destructuring.

const object = {
    names: "Sameeksha", 
    Id: 21, 
    Branch: "B.Tech"
};
let {names, Id, Branch} = object;
console.log(names, Id, Branch);

const object = {

names: "Sameeksha",

Id: 21,

Branch: "B.Tech"

};

let {names, Id, Branch} = object;

console.log(names, Id, Branch);

2. Using another name for a key.

Example:

const object = {
    names: "Sameeksha",
    Id: 21, 
    Branch: "B.Tech"
};
let {names: fName, Id: Rollno, Branch: Course} = object;
console.log(fName, Rollno, Course);

const object = {

names: "Sameeksha",

Id: 21,

Branch: "B.Tech"

};

let {names: fName, Id: Rollno, Branch: Course} = object;

console.log(fName, Rollno, Course);

3. Assignment without declaration

Example:

let {names, Id, Course} = {
    names: "sameekaha",
    Id: 21,
    Course: "B.Tech"
};
console.log(names, Id, Course)

let {names, Id, Course} = {

names: "sameekaha",

Id: 21,

Course: "B.Tech"

};

console.log(names, Id, Course)

4. Nested Object Destructuring

Example:

Before:Without destructuring.

const object= {
    names: "Sameeksha",
    Id: 21,
    Course: "B.Tech",
    Subjects: {
        Sub1: "Python",
        Sub2: "Physics"
}
};
let names = object.names;
console.log(names);
console.log(object.Subjects.Sub1);

const object= {

names: "Sameeksha",

Id: 21,

Course: "B.Tech",

Subjects: {

Sub1: "Python",

Sub2: "Physics"

}

};

let names = object.names;

console.log(names);

console.log(object.Subjects.Sub1);

We can also destructured Nested objects by using destructuring syntax.

Now, let’s take a look at how we’d do the same thing using destructuring.

const object = {
names: "Sameeksha",
Id: 21,
Course: "B.Tech",
Subjects: {
    Sub1: "Python",
    Sub2: "Physics"
}
};
let {names, Course, Subjects: {Sub2}} = object;
console.log(names, Course, Sub2);

const object = {

names: "Sameeksha",

Id: 21,

Course: "B.Tech",

Subjects: {

Sub1: "Python",

Sub2: "Physics"

}

};

let {names, Course, Subjects: {Sub2}} = object;

console.log(names, Course, Sub2);

Spread Operator

The spread operator … is used to expand or spread a repeat or an array.

Syntax:
var array= […value] ;

1 2	Syntax: var array= […value] ;

1.Spread Operator with Array

You can see the difference between in both examples. After using … in an array we can easily combine two arrays.

Example 1:

let array1 = ["Hello", "World"];
let array2 = ["Thank", "you", "for reading"];
let combineArray = [...array1, ...array2];
console.log(combineArray);

let array1 = ["Hello", "World"];

let array2 = ["Thank", "you", "for reading"];

let combineArray = [...array1, ...array2];

console.log(combineArray);

Example 2:

let array1 = ["Hello", "World"];
let array2 = ["Thank", "you", "for reading"];
let combineArray = [...array1, ...array2];
console.log(…combineArray);

let array1 = ["Hello", "World"];

let array2 = ["Thank", "you", "for reading"];

let combineArray = [...array1, ...array2];

console.log(…combineArray);

2.Spread Operator with Object

With the help of the spread operator … we can create copies of existing objects with new or updated values or to make a copy of an object with more properties.

Example:

const nameObject = {
    name1: "Shyam Ji",
    name2: "Sachin",
    name3: "Sameeksha"
};

const updatedName = {
    name4: "Sumit",
    name5: "Anit",
    name6: "Tripthraj"
};

const frontEndDev = {...nameObject, ...updatedName};
console.log(frontEndDev);

const nameObject = {

name1: "Shyam Ji",

name2: "Sachin",

name3: "Sameeksha"

};

const updatedName = {

name4: "Sumit",

name5: "Anit",

name6: "Tripthraj"

};

const frontEndDev = {...nameObject, ...updatedName};

console.log(frontEndDev);

3.Rest Parameter

When we use the spread operator as a parameter then it became a rest parameter.

Syntax:

function function_name(…rest_parameter)
{
Statement;
};

Syntax:

function function_name(…rest_parameter)

{

Statement;

};

Example 1:

function example(...array) {
    console.log(array);
}
example("Hi");
example("You", "are", "doing", "Great.")

function example(...array) {

console.log(array);

}

example("Hi");

example("You", "are", "doing", "Great.")

Example 2:

function example(...array) {
    console.log(…array);
}
example("Hi");
example("You", "are", "doing", "Great.")

function example(...array) {

console.log(…array);

}

example("Hi");

example("You", "are", "doing", "Great.")

Another example of a rest parameter

function sum(...numbers) {
    let sum = 0;
    for (let i = 0; i < numbers.length; i++) {
        sum += numbers[i];
    }
    return sum;
};
console.log(sum(1,2,3));
console.log(sum(1,2,3,4,5));

function sum(...numbers) {

let sum = 0;

for (let i = 0; i < numbers.length; i++) {

sum += numbers[i];

}

return sum;

};

console.log(sum(1,2,3));

console.log(sum(1,2,3,4,5));

Conclusion

I hope this blog found to be useful for you. If you have any queries feel free to ask.

Destructuring is a powerful ES6 new feature to make your code simpler, clearer, and beautiful.

Keep learning.

Thank you!

3 Replies to “Destructuring in JavaScript (Array, Object, and Spread Operator)”

Tripthraj Gupta
Well Expalined !!
Crystal Clear.

2023-03-14 at 2:21 pm Reply
Siddhartha Purwar
Well explained

2023-03-14 at 10:56 am Reply
Sumit prajapati
It helps me a lot.

2023-03-14 at 1:48 pm Reply