JavaScript Object Destructuring
In this blog, you will learn to assign properties of an Object to individual Variables.
Suppose you have a person object that has two properties called firstName
and lastName
.
let person = {
firstName : "Kenil",
lastName : "Kanani"
}
Before Es6 was introduced, if you have to perform object destructuring then you do like this,
let firstName = person.firstName;
let lastName = person.lastName;
Es6 introduces object destructuring syntax, an alternative way to assign properties of an object to a variable.
// Syntax
let { property1: variable1, property2: variable2 } = object;
Consider the person object mentioned above,
let { firstName: f_Name, lastName: l_Name } = person
In the above-mentioned example, the firstName property present in the person was assigned to the variable called f_Name
and lastName property present in the person was assigned to the variable l_Name
.
The identifier before the colon (:
) is the property of the object and the identifier after the colon is variable.
If the variable has the same name as the property of the object then you can use even more short syntax,
let { firstName, lastName } = person;
You can do declaration and initialisation separately,
let firstName, lastName;
({ firstName, lastName } = person);
If you don’t use the parentheses, the JavaScript engine will interpret the left-hand side as a block and throw a syntax error.
When you assign a property that does not exist to a variable using the object destructuring, the variable is set to undefined
. For example:
let { firstName, lastName, middleName } = person;
console.log(middleName); // undefined
Setting default values
You can assign a default value to the variable when the property of an object doesn’t exist. For example:
let person = {
firstName: 'Kenil',
lastName: 'Kanani',
currentAge: 19
};
let { firstName, lastName, middleName = '', currentAge: age = 18 } = person;
console.log(middleName); // ''
console.log(age); // 19
In this example, we assign an empty string to the middleName
variable when the person object doesn’t have the middleName
property.
Also, we assign the currentAge
property to the age
variable with the default value of 18.
However, when the person object does have the middleName
property, the assignment works as usual:
let person = {
firstName: 'Kenil',
lastName: 'Kanani',
middleName: 'Hello',
currentAge: 19
};
let { firstName, lastName, middleName = '', currentAge: age = 18 } = person;
console.log(middleName); // 'Hello'
console.log(age); // 19
Destructuring a null object
A function may return an object or null in some situations. For example:
function getPerson() {
return null;
}
And you use the object destructuring assignment:
let { firstName, lastName } = getPerson();
console.log(firstName, lastName);
The code will throw a TypeError
:
TypeError: Cannot destructure property 'firstName' of 'getPerson(...)' as it is null.
To avoid this, you can use the OR
operator (||
) to fallback the null
object to an empty object:
let { firstName, lastName } = getPerson() || {};
Now, no error will occur. And the firstName
and lastName
will be undefined
.
Nested object destructuring
Assume you have person object
is shown below,
const person = {
name : 'Ken!l',
age : 19,
address : {
street : "Katargam , Surat",
city : "Surat",
state : "Gujarat"
}
}
The following statement destructures the properties of the nested address
object into individual variables:
let {
address:{
street,
city,
state
}
} = person;
Destructuring function arguments
It’s possible to destructure the object argument passed into the function like this:
let display = ({firstName, lastName}) => console.log(`${firstName} ${lastName}`);
let person = {
firstName: 'Kenil',
lastName: 'Kanani'
};
display(person);