Thread by @swapnakpanda

🔥 Array and Object Destructuring in JavaScript 🚀

This 🧵 will have everything that you may need to learn this important feature of "Destructuring".

Let's explore 👇

We will discuss about

→ History (why this feature was necessary)
→ Introduction to Destructuring
→ How does destructuring work?
→ Limitations and future improvements

Let's deep dive 🚀

0️⃣ Some History

Back to 2015, JS codes were a little heavy.

If I had an array, say

arr = [10, 20]

To access elements of the array, I had to use index. Eg., arr[0], arr[1].

And if I had to store these values in some other variables, then

first = arr[0]
second = arr[1]

++

It was same with Object member access.

obj = {width: 10, height: 20}

If I had to store these in some other variable, then

w = obj.width
h = obj.height

For simple assignments, we had to write so much verbose and repetitive code.

1️⃣ Introduction

ES6 introduced a featured called destructuring. In some other languages it is also known as "unpacking".

Till ES5, during assignment (=) operation, the left hand side (LHS) had to be a single named variable.

E.g.,

a = 10 was Valid
[a] = [10] was Invalid

++

Because of destructuring, now the LHS can be an Array or, Object literal.

E.g.,

[a, b] = [10, 20]

is equivalent to,

a = 10, b = 20

Similarly,

obj = {width: 10, height: 20}
{width, height} = obj

is equivalent to,

width = obj.width, height = obj.height

2️⃣ How does it work?

The assignment operator (=) is one of the most used and, important operator.

It is a binary operator which means it can take two operands. First operand is placed at the left of "=" and the second is placed at the right of "=".

++

We will refer the left hand side operand as LHS and, right hand side operand as RHS from here onwards.

Earlier (before 2015/16), it was a restriction that LHS has to be a single variable. After assignment the value of RHS is assigned to the LHS variable.

++

The destructuring feature helped in lifting this restriction. LHS is now allowed to have "group" of variables.

When, the interpreter finds the LHS is a group of variables, it will try to destructure the RHS and do the assignment appropriately.

++

Now question is how we should write these group of variables. It's simple.

If the RHS is an Array, the LHS has to be an Array Literal.

If the RHS is an Object, the LHS has to be an Object Literal.

++

Example:

Let's say variables are "width" and "height".

If RHS is an Array, then we write

[width, height] = [10, 20]

If RHS is an Object, then we write

{width, height} = obj

++

Edge Case 1️⃣

If RHS has exactly same number of elements as the number of variables in LHS.

In this case, one-to-one mapping is done. All variables are assigned corresponding value from RHS.

E.g.,

[a, b, c] = [1, 2, 3]

Now, Value of a is 1, b is 2 and c is 3.

++

Edge Case 2️⃣

If RHS has less number of elements from the number of variables in LHS.

In this case, one-to-one mapping is done till all values found in RHS. Rest all variables are assigned to undefined.

E.g.,

[a, b, c] = [1, 2]

Value of a is 1, b is 2 and c is undefined.

++

Edge Case 3️⃣

If RHS has more number of elements from the number of variables in LHS.

In this case, one-to-one mapping is done for all variables in LHS. Rest all values are ignored.

E.g.,

[a, b] = [1, 2, 3, 4]

Now, Value of a is 1 and b is 2. Value 3 and 4 are ignored.

++

Edge Case 4️⃣

If we want to skip some values from RHS.

In this case, below syntax is used in LHS

[a, , b] = [1, 2, 3]

Value of a is 1 and, b is 3. Value 2 is skipped.

++

Edge Case 5️⃣

If we want to assign some default values to LHS

In case a value from RHS is not found for a variable in LHS, it is assigned undefined. We can assign a default value in this case.

[a, b, c = 3] = [1, 2]

Value of a is 1, b is 2. And c is assigned the default 3.

++

Edge Case 6️⃣

If we want to assign values of RHS to an array in LHS.

We saw values are assigned one-to-one to a variable. Can some values be grouped and assigned as an array?

Yes, using rest parameter.

[a, ...b] = [1, 2, 3]

Value of a is 1 and b is [2, 3] (an array)

++

Edge Case 7️⃣

If RHS contains a value which is an array, can that be destructured?

Yes. We refer it as nested destructuring.

[a, [b, c], d] = [1, [2, 3], 4]

[2, 3] is nested destructured here. Value of b is 2 and c is 3 after assignment.

3️⃣ Limitations

So far so good. But do we have any limitations?

Many may agree with what I am going to say now. And, many may not.

But, let's discuss. ↓

The major limitation is LHS has to contain group of variables in an array or, object literal.

Let's say

arr = [1, 2, 3, 4, 5]

What we have to do for below?

arr[1] = arr[3]
arr[3] = arr[2]

We will write,

[arr[1], arr[3]] = [arr[3], arr[2]]

You find it repetitive, right?

++

If we had some syntax like

arr[1, 3] = arr[3, 2]

Wouldn't have that been great? Even more readable.

Or, do you find some ambiguity in it? Let me know in the reply section.

I wish this feature to be included in JavaScript so that code can become even more clean.

With this, we come to the end of this 🧵

I hope, you enjoyed reading it. And, the concept of destructuring in JavaScript is clear to you by now.

Let me know if it's still unclear. Give me your feedbacks as well.

See you soon in a next 🧵 Till then 👋