JavaScript Destructuring Objects

Destructuring Objects in JavaScript provides a better, easier and a more cleaner way to extract object properties and assign them to variables. This technique is called Destructuring Assignment.

We use curly braces { } to extract properties from an object. Inside those braces, will be the key names of the object holding values contained by those respective keys.

Object Destructing in JavaScript was introduced at ES6.

Note: Also check out our JavaScript 👉 JavaScript Objects lesson if you are new to it.

Syntax

const { key } = obj;

Without Destructuring Assignment 😢

Before ES6, it would be extremely time consuming to write code that extracts object properties and stores them in a variable.

Example

const student = {
  studentName: "Alex",
  age: 21,
  studies: ["Math", "Physics", "Computer Programming"],
  studiesAt: "Stanford University",
};

// First Defining variables.
// Then, extracting properties from the object, either by using the dot "." operator or brackets "[]" and assigning to the variable.
// This method of doing so, is extremely time consuming.
let studName = student.studentName;
let age = student.age;
let studies = student["studies"];

console.log(studName);
console.log(age);
console.log(studies);

Output

Alex
21
[ 'Math', 'Physics', 'Computer Programming' ]

Note: As you can see, the above code is time consuming. We can provide a better way to extract object values using the Destructuring Assignment.


With Destructuring Assignment 😉

Using the destructuring assignment, you can see here that we can easily save a couple of lines of code when we are extracting values of an object and storing them in variables.

Example

const student = {
  studentName: "Alex",
  age: 21,
  studies: ["Math", "Physics", "Computer Programming"],
  studiesAt: "Stanford University",
};

// Using the destructuring assignment.
// Extracting values from the keys: "studentName", "age" and "studies" from the "student" object.
const { studentName, age, studies } = student;

console.log(studentName);
console.log(age);
console.log(studies);

Output

Alex
21
[ 'Math', 'Physics', 'Computer Programming' ]

Aliasing or Renaming variables using Destructuring Assignment 🤯

We can also rename the variables where we are storing the specified object’s properties.

But first, we have to extract the object’s values using the same key names as variables, then afterwards, we can rename them using full-colon :.

Example

const car = {
  name: "Toyota",
  milesRun: 500,
  color: "gray",
};

// Extracting values from the keys: "name", "milesRun" and "color".
// Then, renaming the variables where we are going to store the values.
// "name" variable renamed to "rideName", "milesRun" to "rideMiles" and "color" to "rideColor".
const { name: rideName, milesRun: rideMiles, color: rideColor } = car;

console.log(rideName);
console.log(rideMiles);
console.log(rideColor);

Output

Toyota
500
gray

Storing Rest of the values using Destructuring Assignment 😲

We can also assign rest of the remaining values of an object using three dots along with the Destructuring Assignment.

Example

const car = {
  carName: "Toyota",
  milesRun: 500,
  color: "gray",
  model: "Prius",
  productionDate: "2022, August",
};

// Here, the rest of the object properties except "carName" are returned as an object in the "rest" variable.
const { carName, ...rest } = car;

console.log(carName);
console.log(rest);

Output

Toyota
{
  milesRun: 500,
  color: 'gray',
  model: 'Prius',
  productionDate: '2022, August'
}

In this way, Destructuring Objects in JavaScript helps us to extract object values in a cleaner, easier and more efficient way.