What is Destructuring in JavaScript?

By Md Shoriful Islam

What is Destructuring in JavaScript?

Destructuring is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. That is, we can extract data from arrays and objects and assign them to variables.

Object Destructuring
in JavaScript



For example, suppose we have an array of numbers:

const numbers = [1, 2, 3, 4, 5];

If we want to access the first and second elements of the array, we can use the index notation:

const first = numbers[0];
const second = numbers[1];

However, using destructuring, we can achieve the same result with a more concise syntax:

const [first, second] = numbers;

The above code assigns the first and second elements of the array to the variables first and second, respectively. The square brackets on the left-hand side of the assignment indicate that we are destructuring an array.

Similarly, we can destructure an object by using curly braces on the left-hand side of the assignment. For example, suppose we have an object that represents a person:

const person = {
  name: "Alice",
  age: 25,
  occupation: "Software Engineer"
};

If we want to access the name and age properties of the object, we can use the dot notation:

const name = person.name;
const age = person.age;

Or, we can use destructuring to simplify the code:

const { name, age } = person;

The above code assigns the name and age properties of the object to the variables name and age, respectively. The curly braces on the left-hand side of the assignment indicate that we are destructuring an object.

Why Use Destructuring in JavaScript?

Destructuring can make our code more readable and concise by reducing the amount of code we need to write to access the data we want. It can also help us avoid creating unnecessary variables or repeating ourselves.

Some of the benefits of using destructuring are:

  • It can make our code more expressive and declarative by showing what data we are interested in and how we want to assign it to variables.
  • It can help us avoid typos and errors by using the same names as the properties or elements we are extracting.
  • It can make our code more maintainable and easier to refactor by reducing the dependencies on the structure of the data source.
  • It can improve the performance of our code by avoiding unnecessary copying or looping over the data.

How to Use Destructuring in JavaScript?

Destructuring can be used in various situations and scenarios where we need to access or manipulate data from arrays or objects. Some of the common use cases are:

  • Swapping values of variables
  • Assigning default values to variables
  • Extracting a subset of data from an array or object
  • Passing parameters to functions
  • Returning multiple values from functions
  • Iterating over arrays or objects

Let’s see some examples of how to use destructuring in each of these cases.

Swapping Values of Variable

One of the simplest and most useful applications of destructuring is to swap the values of two variables without using a temporary variable. For example, suppose we have two variables a and b with some values:

let a = 10;
let b = 20;

If we want to swap the values of a and b, we can use destructuring as follows:

[a, b] = [b, a];

The above code assigns the value of b to a and the value of a to b by using an array destructuring pattern. This is equivalent to:

let temp = a;
a = b;
b = temp;

But much shorter and cleaner.

Assigning Default Values to Variables


Another useful feature of destructuring is that we can assign default values to the variables in case the data source does not have the corresponding property or element. For example, suppose we have an object that represents a user:

const user = {
  name: "Bob",
  email: "bob@example.com"
};

If we want to destructure the name, email, and role properties of the object, we can use the following syntax:

const { name, email, role } = user;

However, the object does not have a role property, so the variable role will be undefined. To avoid this, we can assign a default value to the variable by using the = operator:

const { name, email, role = "Guest" } = user;

The above code assigns the value of the role property to the variable role if it exists, otherwise it assigns the value “Guest”. This is equivalent to:

const name = user.name;
const email = user.email;
const role = user.role || "Guest";

But much shorter and cleaner.

We can also use default values with array destructuring. For example, suppose we have an array of numbers:

const numbers = [1, 2];

If we want to destructure the first, second, and third elements of the array, we can use the following syntax:

const [first, second, third] = numbers;

However, the array does not have a third element, so the variable third will be undefined. To avoid this, we can assign a default value to the variable by using the = operator:

const [first, second, third = 0] = numbers;

The above code assigns the value of the third element to the variable third if it exists, otherwise it assigns the value 0. This is equivalent to:

const first = numbers[0];
const second = numbers[1];
const third = numbers[2] || 0;

But much shorter and cleaner.

Extracting a Subset of Data from an Array or Object

Another common use case of destructuring is to extract a subset of data from an array or object and assign it to a new variable. For example, suppose we have an array of colors:

const colors = ["red", "green", "blue", "yellow", "orange", "purple"];

If we want to extract the first three colors and assign them to a new variable, we can use the rest operator (...) with array destructuring:

const [first, second, third, ...rest] = colors;

The above code assigns the first, second, and third elements of the array to the variables first, second, and third, respectively, and the remaining elements to the variable rest. The variable rest will be an array that contains the rest of the elements. This is equivalent to:

const first = colors[0];
const second = colors[1];
const third = colors[2];
const rest = colors.slice(3);

But much shorter and cleaner.

We can also use the rest operator with object destructuring. For example, suppose we have an object that represents a product:

const product = {
  id: 1,
  name: "Laptop",
  price: 1000,
  category: "Electronics",
  rating: 4.5
};

If we want to extract the id, name, and price properties and assign them to a new variable, we can use the rest operator with object destructuring:

const { id, name, price, ...details } = product;

The above code assigns the id, name, and price properties of the object to the variables id, name, and price, respectively, and the remaining properties to the variable details. The variable details will be an object that contains the rest of the properties. This is equivalent to:

const id = product.id;
const name = product.name;
const price = product.price;
const details = { ...product };
delete details.id;
delete details.name;
delete details.price;

But much shorter and cleaner.

Passing Parameters to Functions

Another situation where destructuring can be useful is when passing parameters to functions. For example, suppose we have a function that calculates the area of a rectangle:

function area(width, height) {
  return width * height;
}

If we want to call this function with an object that represents a rectangle, we can use destructuring to extract the width and height properties from the object and pass them to the function:

const rectangle = {
  width: 10,
  height: 20
};
const area = area(rectangle.width, rectangle.height);

However, this can be tedious and error-prone if the object has many properties or the function has many parameters. A better way is to use destructuring in the function definition to specify what properties we expect from the object:

function area({ width, height }) {
  return width * height;
}

The above code defines a function that takes an object as a parameter and destructures the width and height properties from it. This way, we can call the function with any object that has these properties, without worrying about the order or the number of the parameters:

const rectangle = {
  width: 10,
  height: 20
};
const area = area(rectangle);

We can also use default values with destructuring in function parameters. For example, suppose we want to make the width and height parameters optional and assign them default values of 1:

function area({ width = 1, height = 1 } = {}) { return width * height; }

The above code defines a function that takes an object as a parameter and destructures the width and height properties from it, with default values of 1. This way, we can call the function with any object that has these properties, or with an empty object, or with no argument at all:

const rectangle = {
  width: 10,
  height: 20
};
const area1 = area(rectangle); // 200
const area2 = area({}); // 1
const area3 = area(); // 1

Returning Multiple Values from Functions

Another scenario where destructuring can be handy is when returning multiple values from functions. For example, suppose we have a function that calculates the sum and product of two numbers:

function sumAndProduct(a, b) {
  return [a + b, a * b];
}

The above code returns an array that contains the sum and product of the two numbers. If we want to assign these values to separate variables, we can use destructuring to unpack the array:

const [sum, product] = sumAndProduct(2, 3);

The above code assigns the first and second elements of the array to the variables sum and product, respectively. This is equivalent to:

const result = sumAndProduct(2, 3);
const sum = result[0];
const product = result[1];

But much shorter and cleaner.

We can also return an object from a function and use destructuring to unpack its properties. For example, suppose we have a function that calculates the area and perimeter of a rectangle:

function areaAndPerimeter(width, height) {
  return {
    area: width * height,
    perimeter: 2 * (width + height)
  };
}

The above code returns an object that contains the area and perimeter of the rectangle. If we want to assign these values to separate variables, we can use destructuring to unpack the object:

const { area, perimeter } = areaAndPerimeter(10, 20);

The above code assigns the area and perimeter properties of the object to the variables area and perimeter, respectively. This is equivalent to:

const result = areaAndPerimeter(10, 20);
const area = result.area;
const perimeter = result.perimeter;

But much shorter and cleaner.

Iterating over Arrays or Objects

Another situation where destructuring can be useful is when iterating over arrays or objects. For example, suppose we have an array of objects that represent users:

const users = [
  {
    name: "Alice",
    age: 25,
    occupation: "Software Engineer"
  },
  {
    name: "Bob",
    age: 30,
    occupation: "Accountant"
  },
  {
    name: "Charlie",
    age: 35,
    occupation: "Teacher"
  }
];

If we want to loop over the array and print the name and occupation of each user, we can use destructuring to extract these properties from each object:

for (const { name, occupation } of users) {
  console.log(`${name} is a ${occupation}`);
}

The above code uses a for-of loop to iterate over the array and destructures the name and occupation properties from each object. This is equivalent to:

for (const user of users) {
  const name = user.name;
  const occupation = user.occupation;
  console.log(`${name} is a ${occupation}`);
}

But much shorter and cleaner.

We can also use destructuring to iterate over the properties of an object. For example, suppose we have an object that represents a product:

const product = {
  id: 1,
  name: "Laptop",
  price: 1000,
  category: "Electronics",
  rating: 4.5
};

If we want to loop over the object and print the key and value of each property, we can use destructuring to extract these values from each entry:

for (const [key, value] of Object.entries(product)) {
  console.log(`${key}: ${value}`);
}

The above code uses a for-of loop to iterate over the entries of the object and destructures the key and value from each entry. The Object.entries() method returns an array of key-value pairs for the object. This is equivalent to:

for (const key in product) {
  const value = product[key];
  console.log(`${key}: ${value}`);
}

But much shorter and cleaner.

Conclusion

Destructuring is a powerful and convenient feature of JavaScript that allows us to unpack values from arrays or objects and assign them to variables. It can make our code more readable, concise, and expressive by reducing the amount of code we need to write to access or manipulate data. It can also help us avoid errors and improve performance by avoiding unnecessary copying or looping over data.

Some of the common use cases of destructuring are:

  • Swapping values of variables
  • Assigning default values to variables
  • Extracting a subset of data from an array or object
  • Passing parameters to functions
  • Returning multiple values from functions
  • Iterating over arrays or objects

We can use destructuring with different patterns and operators, such as:

  • Square brackets ([]) for array destructuring
  • Curly braces ({}) for object destructuring
  • Rest operator (...) for collecting the remaining elements or properties
  • Equal sign (=) for assigning default values

Destructuring is a useful skill to master for any JavaScript developer, as it can help us write cleaner and more efficient code. We hope this blog post has helped you understand what destructuring is and how to use it in JavaScript. Happy coding! 😊

Comments

Anonymous said…
JavaScript
April 14, 2024 at 12:37 PM

Post a Comment

Popular posts from this blog

Whiteboarding Interviews

By Md Shoriful Islam
Image
 ⭕ Whiteboarding interviews are a common way of assessing the technical and non-technical skills of candidates for software development positions. They involve solving a coding problem or designing a system on a whiteboard, either in person or virtually, while explaining your approach and reasoning to the interviewer.  ⭕ Some of the benefits of whiteboarding interviews are that they can test your problem-solving ability, communication skills, and coding proficiency in a realistic scenario. They can also help you demonstrate your creativity, collaboration, and passion for the role. However, some of the drawbacks of whiteboarding interviews are that they can be stressful, artificial, and biased. They can also favor memorization over understanding and overlook other aspects of your skills and experience.  ⭕ If you want to ace a whiteboarding interview, you should practice beforehand, prepare for the interview setting, set objectives and expectations, create a good candidate ...
Read more

Version Control with Git: A Beginner’s Guide

By Md Shoriful Islam
Version Control with Git: A Beginner’s Guide If you are a developer, you probably know how important it is to keep track of your code changes and collaborate with other developers on a project. But how do you do that effectively and efficiently? The answer is version control. Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later. It allows you to revert files back to a previous state, compare changes over time, see who last modified something, and more. Version control also enables you to work with other developers on the same code base without stepping on each other’s toes. One of the most popular version control systems in the world is Git. Git is a free and open source distributed version control system that is designed to handle everything from small to very large projects with speed and efficiency. Git has many features that make it superior to other version control systems, such as: Cheap local branchin...
Read more

Callback function in JavaScript

By Md Shoriful Islam
Image
Callback function in JavaScript What is a callback function in JavaScript? A callback function is a function that is passed as an argument to another function and is executed after the first function has completed its task. Callback functions are useful for handling asynchronous events, such as network requests, file operations, or timers. For example, you can use a callback function to display the result of a calculation after the calculation is done. Callback function in JavaScript Here is a simple example of a callback function in JavaScript: // Define a function that takes a callback as an argument function sayHello (callback) { // Do some task console .log ("Hello, world!"); // Invoke the callback function callback (); } // Define another function function sayGoodbye () { // Do some task console .log ("Goodbye, world!"); } // Call the first function and pass the second function as a callback sayHello (sayGoodbye); // The output will be: // Hello, wo...
Read more