Destructuring Arrays
In the case of an array, the key for each element is fixed: that is the index; so we can write any variable name in destructuring the array to hold its value. The first value in the destructured array will correspond to the first index value in the original array.
In the array const numbers = [1,2,3,4];
We can destructure the array as, const [numberOne,numberTwo] = numbers;
Here the values at index 0,1,2,3 in numbers can be stored in any variable, why? because both are arrays and arrays have indices.
When you add the first element into an array, it is said to be at index 0, then next will go at index 1 and so on. The indexes are fixed as defined in the programming language. So whatever order you put the elements in, the elements will hold the corresponding indices.
const [numberOne,numberTwo, ,numberThree] = numbers;
Here in the destructured array, the second index is not holding any value. But the third index is. Therefore numberThree will hold value 4 is the corresponding value of third index in numbers array. numbers[3] is equal to 4 here so the destructured array which has a variable name numberThree and at index 3 will hold the value as 4.
Destructuring Objects
In the case of an object, the keys are user-defined - not fixed, so when we destructure the object, we need to specify the variables which will hold the values.
Variables holding the destructured values from an object need to have the same name as the corresponding keys in the object to be destructured. We need to tell what key is having that value.
So for the object,
const books = { title: "How to learn A", author: "Mr.XZ"}
It needs to be destructured as:
const { title, author } = books
title and author in books object are the keys that hold the values which we need. If I want to access, "How to learn A" in the books object. I need to contact title in the books object. That's one of the ways you can remember this concept.
I cannot contact "How to learn A" with any other name. It has to be the same name as the key which is holding that value. You can also remember it as: "Contact the key and it will share the value".
So in destructured objects, const { title, author } = books here title and author are like any normal variables. They do not have any authority to change the original object. They merely hold the value that was passed during destructuring assignment to them when they were declared with the same key names as the object. We can now use them as normal variables. If you use any other variable name which does not correspond to any key in the original object like rating it will return as undefined. This is because there is no such key that exists in the object and therefore we cannot access their value. The value rating should hold is currently not there, not defined.
const books = { title: "How to learn A", author: "Mr.XZ"};
const { title, author, rating } = books;
console.log(rating); // undefined
Why destructuring?
Destructuring is useful since otherwise accessing a nested object in some scenarios may be difficult. ES6+ helps solve this problem with destructuring.
To access otherwise, we would have to type in objectName.keyName to get that specific value.
Destructuring also allows values in arrays to be used without indices. We can assign a couple of the values in an existing array into any variable and use that variable to do our assigned operation.
const numbers = [1,2,3,5,6]
// to get the values at indices 1 and 4 we usually had to
// numbers[1]
// numbers[4]
// But with the destructuring assignment we can do it like
const [,numberOne,,numberTwo] = numbers;
console.log(numbers,numberOne,numberTwo)
To explore more about destructuring, read from the following resources:
Destructuring Assignment | MDN
Javascript.info | Destructuring Assignment
In case you want to provide feedback on this article, you can contact me by sending a DM at twitter.com/swapnildecodes