JavaScript Destructuring - Explained with Example Code

In javascript, Destructuring is powerful feature that enable you to extract data from arrays and objects and spread them into other arrays, Object or variables.

DESTRUCTURING

Destructuring allows you to unpack values from arrays or properties from an object into distinct variables meaning whichever element you want you can directly extract it without writting any index value for an array or properties name of objects. Let's begin with Array destructuring.

First We will look into old way of assigning array items to a variable.

const fruits = ['Apple', 'Avacado','Orange'];
//old way to extract elements with index values
const apple = fruits[0];
const avacado = fruits[1];
const orange = fruits[2];

Now, we will look into new way of assigning array items to a variable.

//New way, we extracted the elements without any index values
const [apple, avacado, orange] = fruits;
//Note: when destructuring arrays, the order that variables are declared is important

If we only want apple and orange we can simply leave out avacado but keep the comma.

const [apple, , orange] = fruits;

So that's all about Array destructuring, It's simple 😊.

What is Object Destructuring in JavaScript?

Let's got with the old way first, how do we access the object properties.

// old way to access the properties
const vehicle = {
    brand: 'TATA',
    model: 'Nano',
    type: 'car',
    color: 'red'
}
const type = vehicle.type;
const color = vehicle.color;

//New way 
const {type,model,color,brand} = vehicle;
//Note: the object properties do not have to be declared in a specific order

We can even destructure deeply nested objects by referencing the nested object then using a colon and curly braces to again destructure the items needed from the nested object.

const vehicleOne = {
  brand: 'TATA',
  model: 'Nano',
  type: 'car',
  year: 2024, 
  color: 'red',
  registration: {
    city: 'Delhi',
    state: 'Delhi',
    country: 'India'
  }
} 
const {brand, registration:{state} } = vehicleOne;
console.log(brand, state);
//accessing the properties is so easy.

How to Use Object Destructuring with Functions.

Let's say we have a function that calls all the data in objects to console.

// function to print data in console
let object = {
    name: "subham",
    age: 24, 
    weight: '70 KG'
}

function printObj(){   
}

printObj(object)

// We are passing the object as a parameter in the function when it gets called:
let object = {
    name: "subham",
    age: 24, 
    weight: '70 KG'
}

function printObj(obj){ 
    console.log(obj)  
}

printObj(object)
//Normally, we would do something like this – passing the object 
//and logging it in the console.

But we can do same using destructure.

function printObj({name,age}){ 
    console.log(name,age)  
}

printObj(object)

So, overall it makes the accesability more easy and developer friendly.

Summary:

Destructuring is all about the accessing elements of an array or properties of objects into a variable so that we can use them for our programming logic, it's that simple.