In this section, we will give an overall view of what destructuring is and how can be used in the JavaScript programs. In the next couple of sections, we’ll get into the nitty-gritty details of destructuring.
What is Destructuring in JavaScript?
Destructuring is a new and powerful syntax which is about extracting values from objects and arrays and assign them to variables.
We’ve been doing this extraction manually for a long time (probably since the day one of programming). But via destructuring, extractions become a lot easier.
Example: using object destructuring in JavaScript
First, let’s see the old way in which we extract values from objects and arrays:
const arr = ["Omid","John","Doe"];
const val = arr[0];
const val2 = arr[1];
const obj = {
fullName: "John Doe"
}
const val3 = obj.fullName;
console.log(val,val2,val3);
Output:
Omid John John Doe
This is a typical way of extracting data from objects and arrays. Basically, we define the target property (for object) or index number (for arrays) on the right side of an assignment operator and a variable on the left side of the `=` operator and the extraction will be done at runtime.
Alright, before we get into the details of destructuring, first let’s refactor the example above and apply the destructuring syntax:
const arr = ["Omid","John","Doe"];
const [val] = arr
const [val2] = arr;
const obj = {
fullName: "John Doe"
}
const {fullName:val3} = obj;
console.log(val,val2,val3);
Output:
Omid John John Doe
How does object destructuring work in JavaScript?
Take a look at this statement:
const {fullName:val3} = obj;
We know that the `obj` identifier is a reference to an object. On the left side of the assignment operator `=` we have a declaration that is similar to object literal. This is the object destructuring syntax.
This statement basically is saying:
- Create a const identifier with the name `val3`.
- Get the value of the property named `fullName` that belongs to `obj` object and assign it to the `val3` identifier.
Note: in the object destructuring section, we will dive deep into this topic. For now, just remember that when the source of extraction is an object, on the left side of the assignment operator we put a pair of braces `{}` and inside the braces, we first define the property of the target object and on the right side of the colon `:` we set the variable that is going to get the value.
The reason that we use the keywords like `let`, `const`, `var` behind the syntax of object destructuring is because the target variables are not declared yet. So we’re declaring as well as initializing them at the same time.
But If the variable is already declared somewhere in the program:
- First, we don’t need to use either of the `let`, `const`, `var` keywords in front of the destructuring syntax anymore.
- Second, the operation should be put in a pair of parentheses otherwise we will get syntax error.
Example:
const obj = {
fullName: "John Doe"
}
let val3;
({fullName:val3} = obj);
console.log(val3); //Output: John Doe
Example: using array destructuring in JavaScript
Now let’s take a look at this statement in the last example:
const [val2] = arr;
Here, the source of data is an array named `arr` that is on the right side of the assignment `=` operator.
The destructuring syntax for the arrays is different from objects. Here we use a pair of brackets `[]`.
The operand on the left side of the assignment operator `const[val2]` basically means:
Create a const identifier named `val2` and store the first element of the target array into that identifier. So because the first element in this array is `”Omid”`, then the assigned value of the `val2` will be `”Omid”` too.
More to Read
JavaScript object destructuring
JavaScript array destructuring
JavaScript destructuring and default value
JavaScript Rest Syntax in destructuring
JavaScript nested destructuring
