Nowadays destructuring has gained widespread popularity in JavaScript, serving as a common expression for extracting values from arrays or object properties into distinct variables.

While destructuring is a handy feature, there are times when it's best to avoid its usage. Examining real examples will offer a better grasp of when to opt for different strategies.

The primary goal of this blog is not to provide a tutorial on JavaScript destructuring techniques.

You can read the same on my Medium.

Destructuring in action

Let us see a use case of destructuring through a code example.

const groceries = [
  { id: 1, name: "Eggs" },
  { id: 2, name: "Fruits" },
  { id: 3, name: "Vegetables" },
  { id: 4, name: "Cereal" },
];

groceries.reduce(
  (lookup, item) => ({
    ...lookup, // destructuring
    [item.id]: item,
  }),
  {}
);

/* Result => {
    "1": {
        "id": 1,
        "name": "Eggs"
    },
    "2": {
        "id": 2,
        "name": "Fruits"
    },
    "3": {
        "id": 3,
        "name": "Vegetables"
    },
    "4": {
        "id": 4,
        "name": "Cereal"
    }
}
*/

The given code generates a new object for each item in the result. However, let's take a closer look at what JavaScript is doing behind the scenes.

Upon visiting this link, you'll discover that the above code is essentially identical to the following.

const groceries = [
  { id: 1, name: "Eggs" },
  { id: 2, name: "Fruits" },
  { id: 3, name: "Vegetables" },
  { id: 4, name: "Cereal" }
];

groceries.reduce(
  (lookup, item) =>
    Object.assign(Object.assign({}, lookup), { [item.id]: item }),
  {}
);

Upon closer inspection, it's evident that a new object is being created in each iteration. Now, let's explore an alternative approach to achieve the same outcome.

 const groceries = [
  { id: 1, name: "Eggs" },
  { id: 2, name: "Fruits" },
  { id: 3, name: "Vegetables" },
  { id: 4, name: "Cereal" },
];

groceries.reduce((lookup, item) => {
  lookup[item.id] = item;
  return lookup;
}, {});

/* Result => {
    "1": {
        "id": 1,
        "name": "Eggs"
    },
    "2": {
        "id": 2,
        "name": "Fruits"
    },
    "3": {
        "id": 3,
        "name": "Vegetables"
    },
    "4": {
        "id": 4,
        "name": "Cereal"
    }
}
*/

The output is consistent in the provided code, but the substantial difference lies in the approach taken to accomplish the task.

In the initial method, we repeatedly create and copy all values from the previous object to a new one. This happens five times, first during initialization and then in four iterations within the reduce function using the Object.assign method.

In the second method, we only create a new object once during the initialization, and thereafter, in each iteration within the reduce function, we modify that same object instead of generating a new one.

In a scenario with just four items, the difference might not be noticeable. However, when dealing with a more substantial dataset, let's say 10,000 to 12,000 items, the contrast becomes more apparent. In the first approach, for each iteration, a new object is created, and all previous items are copied into this new object before adding new key-value pairs. This process repeats, potentially causing performance issues due to the overhead of duplicating data.

A graph for this approach will look something like this,

Clearly, with the destructuring method, the process becomes slower as the list grows larger. However, this is not the case with the second approach.

Conclusion

By now, you should have a better understanding of how destructuring operates in JavaScript beneath the surface and how its improper usage can potentially impact your application's performance.

And with that, we wrap up this blog! To all the awesome developers and coders out there, take care and happy coding!