Javascript destructuring, or why your code gets big.

As a newcomer to the Javascript world, I didn’t know that you can do such cool things as destructuring. If you still don’t know how to use it and your code gets big, now time to learn this cool feature.

What exactly destructuring? To fully understand this concept, first, we should understand what issues it solves. When you starting working on real-life projects or any project which relies mostly on Javascript you find yourself using a lot of arrays and objects. Well, this is not a problem, but the bigger, deeper, and more complex these objects and arrays get, the harder it gets to access their data. And you find your self unpacking your arrays and objects in order to reduce repentance like this:

const arr = ["A", "B", "C"];
const obj = {name: "John", age: 40};
//...
const letterA = arr[0];
const letterB = arr[1];
const letterC = arr[2];
//...
const name = obj.name;
const age = obj.age;

Good for you, we have a better way of doing this.

Array

You can get the same result by doing this:

const arr = ["A", "B", "C"];
const [letterA, letterB, letterC] = arr;
console.log(letterB); //B

As you can see we are just creating constants but declaring them inside an array, and they get values from array items of the same index. You can name them however you want. Only the order(index) decides which values go to what. Also, you don’t have to declare them as a constant, you can declare them as variables too. But keep in mind that we are just taking the values of the array and assigning them to new variables, which means if you change values in the array those variables won’t be updated to new values. One more thing, you don’t have to unpack all values from the array you can do it like this.

const arr = ["A", "B", "C"];
const [letterA, letterB] = arr;

Object

With objects, it works almost the same:

const obj = {name: "John", age: 40};
const {name, age} = obj;
console.log(name); //John

The same concept here as well. In objects, newly declared constants should be the same name as the object field in order to get the value of them, which means order doesn’t matter here. You don’t have to unpack all fields, here as well.

Nesting

As you have already got by the mini title, we can also use destructuring inside destructured objects and arrays, making it possible to go as deep as we need.

const arr = ["a", ["b1", "b2"], ["c1", ["c21", "c22"]]];
const [a, [b1,b2], [c1, c2]] = arr;
console.log(c2); //["c21", "c22"]

In objects, it is a bit different:

In order to go deeper, we have to write the field name that we are going to unpack. But, as you can see, we are not declaring a new constant on the way of going deeper which is nice. See the ‘address’ field which is undefined.

Common usage

Object destructuring is commonly used when passing object arguments to functions. Without destructuring:

const someFunc = (props) => {
doSomething(props.name);
const dummy = Math.floor(props.age);
}

With destructuring:

const someFunc = ({name, age}) => {
doSomething(name);
const dummy = Math.floor(age);
}

Or you can do the same thing with arrays.

Tips

Forgot to mention some cool tips about object destructuring.

Skipping values in arrays. You can just skip unpacking unnecessary values by just leaving them blank and putting a comma.

const arr = ["A", "B", "C"];
const [ , , letterC] = arr;

Preventing name collision. While working on similar objects you might find it hard to unpack them. For example:

const John = {name: "John", age: 44, address: "Bakery st"};
const Anna = {name: "Anna", age: 28, address: "Westview st"};
const {name, age, address} = John;
const {name, age, address} = Anna; 
//This is wrong and compiler throws error, due to name collision

But what you can do is that you can rename them while unpacking using as keyword. Like this:

const John = {name: "John", age: 44, address: "Bakery st"};
const Anna = {name: "Anna", age: 28, address: "Westview st"};
const {name as johnName, age as johnAge} = John;
const {name as annaName, age as annaAge} = Anna;

Overall knowing how to use object destructuring is very useful to reduce code size and make it more readable. Also based on my knowledge, it comes very handful when you have to work with other’s codebase which most developers use object destructuring and you won’t spend time wondering what the heck did they do.

Well, thank you for reading my article, if it gave you some value I will be so happy. If there is any mistake, would love to hear it from you and correct it asap.