Destructuring arrays

Destructuring arrays refers to the process of extracting elements from arrays and assigning them to separate variables. This can be done using a destructuring pattern that corresponds to the structure of the array. The pattern is written on the left side of an assignment expression and the array to be destructured is written on the right side.

[ ] syntax is used for array destructuring

// declaring an array
const array = [10,20,30];

// destructuring array 
const [a,b,c] = array;

console.log(a); // return 10 
console.log(b); // return 20
console.log(c); // return 30

In this example, the variables a, b, and c are assigned the values of the first, second, and third elements of the array array, respectively.

Destructuring objects

Destructuring objects refers to the process of extracting properties from objects and assigning them to separate variables. It is important to use object key values for destructuring otherwise values will not be extracted.

{ } syntax is used for object destructuring

// declaring object
const object = {
    x : 10,
    y : 20,
}
// destructuring with the help of key values
const {x,y} = object;

console.log(x) // return 10
console.log(y) // return 20

In this example, the destructuring pattern uses the correct property names x, y from the object object, so the values of these properties are correctly extracted and assigned to the variables x, y.

Spread operator

The spread operator (...) is used to spread the elements of the iterable element (array or object) into a new array and new object.

const arr1 = [1,2,3];
// spread operator opens up element of arr1 
const arr2 = [...arr1,4,5,6];
console.log(arr2); // return [1,2,3,4,5,6]

const obj1 = {a:1,b:2,c:3};
const obj2 = {...obj1,x:4,y:5,z:6};
console.log(obj2); // return {a:1,b:2,c:3,x:4,y:5,z:6}

Rest operator

We can treat this operator (...) as a buddy of the spread operator which just works reverse as its brother. The rest operator is used at the end of destructuring. This operator just stores the value of the rest of the values into a new variable. It is used on the left side of the equal to sign.

const r1 = [1,2,3,4,5];
// q stores the value of rest of the elements of the array
const [p,...q] = r1;
console.log(p); // return 1
console.log(q); // return [2,3,4,5] 

const o1 = {one : "1",two : "2", three : "3"};
const {one,...o2} = o1;
console.log(one); // return 1
console.log(o2); // {two:"2",three:"3"}

Code block

You can use the code below to manipulate and check out the output :)

https://replit.com/@AashmanVerma/js-01#index.js

Complexity

We can use destructuring, rest and spread operators to ease out a lot of complex tasks which require a lengthy code to do otherwise. Using combinations of these operators can create much cleaner and less code.

Follow up -

In case you find my work good and interesting follow me on hashnode as well as on my Twitter handle Aashman Verma

😄

Destructuring, rest and spread operators