Destructuring in JavaScript(beginner to advance)

If you know JavaScript then you must have used an object and array.

In object you use dot(.) notation to access values from an object.

And it array we use bracket [] to access the values.

But when you use object dot(.) notation and [] many times in code . It makes our code unreadable.

Code Example :

Without destructuring

const user = {
  name: "John",
  age: 20,
  city: "Mumbai"
};

const name = user.name;
const age = user.age;
const city = user.city;

console.log(name, age, city);

What destructuring means :

Destructuring is a JavaScript syntax that introduce in ES6 that allow us to extract values from object into variable without using dot(.) notation and brackets. It makes our code more readable and clean.

With destructuring

const user = {
  name: "John",
  age: 20,
  city: "Mumbai"
};

const { name, age, city } = user;

console.log(name, age, city);

Object Destructuring :

Object destructuring use braces {} to match property key from an object.

Basic Assignment : Extract the object properly into the same variable name.

const user = { name: 'Alice', age: 25 };

const {name , age} = user; //name = Alice , age = 25

Renaming : You can assign a property in a variable with a different name using colon (:) syntax.

const user = { name: 'Alice';

const {name : userName} = user; //userName = Alice 

Default Values : You can assign default values to a variable if property is undefined.

const { city = 'Unknown' } = user; // city = 'Unknown'

Nested destructuring : You can destructure nested objects.

const profile = { id: 1, info: { email: '[e-mail]' } };
const { info: { email } } = profile; // email = '[e-mail]'

Array Destructuring :

Array destructuring use brackets to assign values from array position(index) into variables.

Basic Assignment : you can extract values from array index into variables.

const colors = ['red', 'blue', 'green']; 
const [first, second] = colors; // first = 'red', second = 'blue'

Skip Values : Use commas to skip the values.

const [first, , third] = colors; // first = 'red', third = 'green'

Swapping Variables : Swapping two variables with a third temporary variable .

let a = 4; 
let b = 5;

[a , b] = [b , a]; // a = 2, b = 1

How this works :

javaScript first execute right side array.

[ b , a ] evaluate first -> becomes [5 , 4]

then destructuring on left side [ a , b ] = [5 , 4]

Now values are assigned like this

a = 5 and b = 4

Why This Works

Because of array destructuring + assignment:

Right side creates a temporary array [5, 4]

Left side picks values in order:

first → goes to a

second → goes to b

Rest Operator (...) :

Rest operators extract all remaining properties and elements into a new object or array. Always the use the rest operator in the end of the destructing syntax.

const numbers = [1, 2, 3, 4];
const [one, ...others] = numbers; // one = 1, others = [2, 3, 4]

Important Points of Destructuring :

It does not modify original object or array only extract values from it.

It makes the shallow copy means nested objects or array are passed by reference.

Code Example :

const user = {
  name: "Abhi",
  address: {
    city: "Jalandhar"
  }
};

const { address } = user;

address.city = "Delhi";

console.log(user.address.city); 
// Delhi  (original also changed)

value of city is changed because in shallow copy nested objects and arrays are still passed reference.

If you try to destructure null or undefined, it throws error.

Code Example :

const { name } = null; 
//  TypeError

Conclusion :

In this blog, we explored the concept of destructuring in JavaScript along with its key advantages and important points. We also covered the rest operator and demonstrated how to swap two variables without using a temporary variable through practical code examples.