Array & Object Destructuring in Javascript

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

We will learn destructuring by examples.

 

Array Destructuring:

Choosing Only Few elements only:

const array =[100,500,390,60]

let [a,b,c] = array

console.log(`${a},${b},${c}`)

Output:

sangram@sangram-HP-Laptop-15-bs0xx:~/projects/destructering$ node index.js

100,500,390

Here we choose only 3 elements rest is not chosen.Order is important,array element get assigned to variable in an order.

Assigning Default value:

const array =[100,500,390,60]

let [a,b,c,d,e=78] = array

console.log(`${a},${b},${c},${d},${e}`)

Output:

sangram@sangram-HP-Laptop-15-bs0xx:~/projects/destructering$ node index.js

100,500,390,60,78

Here you observe that 5 th array element is not defined it has assigned default value of 78 which it gets.

Skipping In between:

const array =[100,500,390,67,78,34,56,60]

let [a,b,,,,f,,h] = array

console.log(`${a},${b} ${f},${h}`)

Output:

sangram@sangram-HP-Laptop-15-bs0xx:~/projects/destructering$ node index.js

100,500 34,60

 

To skip element just add comma without variable.

Rest Syntax:

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);

Output:

sangram@sangram-HP-Laptop-15-bs0xx:~/projects/destructering$ node index.js

[ 30, 40, 50 ]

Here variable a & b get consecutive values and rest variable get remaining one.

Variable declaration moved up:

const array =[100,500,390,60]

let a,b,c,d,e;

[a,b,c,d,e=78] = array

console.log(`${a},${b},${c},${d},${e}`)

Output:

sangram@sangram-HP-Laptop-15-bs0xx:~/projects/destructering$ node index.js

100,500,390,60,78

Here declaration is decoupled from destructing syntax.

Object Destructuring:

Choose Few keys only:

const favourites ={

"bird":"peacock",

"ant":"red ant",

"fruit":"mango",

"tree":"coconut"

};

let {bird,ant} =favourites;

console.log(`${bird},${ant}`)

Output:

sangram@sangram-HP-Laptop-15-bs0xx:~/projects/destructering$ node index.js

peacock,red ant

rest Syntax:

const favourites ={

"bird":"peacock",

"ant":"red ant",

"fruit":"mango",

"tree":"coconut"

};

let {bird,ant,...rest} =favourites;

console.log(`${bird},${ant}`)

console.log(rest);

Output:

sangram@sangram-HP-Laptop-15-bs0xx:~/projects/destructering$ node index.js

peacock,red ant

{ fruit: 'mango', tree: 'coconut' }

Rest Must be last element:

const favourites ={

"bird":"peacock",

"ant":"red ant",

"fruit":"mango",

"tree":"coconut"

};

let {bird,ant,...rest,tree} =favourites;

console.log(`${bird},${ant},${tree}`)

console.log(rest);

Output:

sangram@sangram-HP-Laptop-15-bs0xx:~/projects/destructering$ node index.js

/home/sangram/projects/destructering/index.js:8

let {bird,ant,...rest,tree} =favourites;

^^^^

SyntaxError: Rest element must be last element

at wrapSafe (node:internal/modules/cjs/loader:1024:16)

at Module._compile (node:internal/modules/cjs/loader:1072:27)

at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)

at Module.load (node:internal/modules/cjs/loader:973:32)

at Function.Module._load (node:internal/modules/cjs/loader:813:14)

at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)

at node:internal/main/run_main_module:17:47

In our case in destructing syntax rest is not last element so we are getting error.

Order is not Important:

const favourites ={

"bird":"peacock",

"ant":"red ant",

"fruit":"mango",

"tree":"coconut"

};

let {bird,ant,tree,fruit} =favourites;

console.log(`${bird},${ant},${fruit},${tree}`)

Output:

sangram@sangram-HP-Laptop-15-bs0xx:~/projects/destructering$ node index.js

peacock,red ant,mango,coconut

Here tree comes before fruit yet irrespective of order values fetched correctly.

Default Value:

const favourites ={

"bird":"peacock",

"ant":"red ant",

"fruit":"mango",

"tree":"coconut"

};

let {bird,ant,tree,fruit,machine="laptop"} =favourites;

console.log(`${bird},${ant},${fruit},${tree},${machine}`)

Output:

sangram@sangram-HP-Laptop-15-bs0xx:~/projects/destructering$ node index.js

peacock,red ant,mango,coconut,laptop

Here in favourite object there is no key called machine so it get default value.

Initialization is decoupled from destructering Syntax:

const favourites ={

"bird":"peacock",

"ant":"red ant",

"fruit":"mango",

"tree":"coconut"

};

let bird,ant,tree,fruit,machine;

({bird,ant,tree,fruit,machine="laptop"} =favourites);

console.log(`${bird},${ant},${fruit},${tree},${machine}`)

Output:

sangram@sangram-HP-Laptop-15-bs0xx:~/projects/destructering$ node index.js

peacock,red ant,mango,coconut,laptop

Rest syntax:

const favourites ={

"bird":"peacock",

"ant":"red ant",

"fruit":"mango",

"tree":"coconut"

};

let {bird,ant,...rest} =favourites;

console.log(`${bird},${ant}`)

console.log(rest);

Output:

sangram@sangram-HP-Laptop-15-bs0xx:~/projects/destructering$ node index.js

peacock,red ant

{ fruit: 'mango', tree: 'coconut' }

Skipping is not required as you can choose only required keys:

const favourites ={

"bird":"peacock",

"ant":"red ant",

"fruit":"mango",

"tree":"coconut"

};

let {bird,ant,tree} =favourites;

console.log(`${bird},${ant},${tree}`)

Output:

sangram@sangram-HP-Laptop-15-bs0xx:~/projects/destructering$ node index.js

peacock,red ant,coconut

Passing paramter to function:

const favourites ={

"bird":"peacock",

"ant":"red ant",

"fruit":"mango",

"tree":"coconut"

};

function PrintFavourite({ant,bird})

{

console.log(`${ant},${bird}`)

}

PrintFavourite(favourites)

Output:

sangram@sangram-HP-Laptop-15-bs0xx:~/projects/destructering$ node index.js

red ant,peacock

Here function get required paramter from object.

Passing default value to function:

const favourites ={

"bird":"peacock",

"ant":"red ant",

"fruit":"mango",

"tree":"coconut"

};

function PrintFavourite({ant,bird,machine="laptop"})

{

console.log(`${ant},${bird},${machine}`)

}

PrintFavourite(favourites)

Output:

sangram@sangram-HP-Laptop-15-bs0xx:~/projects/destructering$ node index.js

red ant,peacock,laptop

Combined Array and Object Destructuring

const drinks = [

{ id: 1, name: 'Fizz'},

{ id: 2, name: 'Mangola'},

{ id: 3, name: 'Fanta'}

];

const [,, { name }] = drinks;

console.log(name);

Output:

sangram@sangram-HP-Laptop-15-bs0xx:~/projects/destructering$ node index.js

Fanta

Here is array destructing syntax 2 elements are skipped and from third name is picked.