Destructuring is a new feature in ECMAScript 2015. Destructuring allows binding a set of variables to a corresponding set of values (objects and arrays) anywhere we can bind a value to a single variable. Today we are already doing destructuring (extracting values) almost in every JavaScript program, but we do it manually. To understand destructuring in ECMAScript 2015 completely, let’s look at an example how are we doing destructuring today (pre ES2015).
Destructuring manually
We can destructure (extract values) from person object manually using dot notation or array notation.
const person = { name: 'Shravan', age: 27 };
let name = person.name;
let age = person.age;
We can destructure (extract values) from numbers array manually using indexes.
const numbers = [1, 2, 3, 4, 5];
let one = numbers[0];
let two = numbers[1];
We construct objects using {} (object literal syntax) and arrays using [] (array literal syntax), on the right hand side of assignment operation. We can use same syntax on left hand side of assignment operation for destructuring objects and arrays.
Destructuring Objects
Basic assignment
const fullName = { firstName: 'Shravan', lastName: 'Kasagoni' };
let { firstName, lastName } = fullName;
console.log(firstName); //Shravan
console.log(lastName); //Kasagoni
In above code snippet line two is the basic example of object destructuring. We are using object literal syntax on the left hand side of assignment operation and in that we are declaring variables with same name as object properties from which we are extracting values.
Lets look at the some more examples of object destructuring.
Separate declaration and assignment
let firstName, lastName;
({ firstName, lastName } = { firstName: 'Shravan', lastName: 'Kasagoni' });
console.log(firstName, lastName); //Shravan Kasagoni
In above code snippet variables are already declared on the line one, we are using them in destructuring pattern on the left hand side of assignment operation. Important point to notice on the line we are performing destructuring, the statement is surrounded by () parenthesis, because in JavaScript a statement can’t start with { curly brace. When we use var, let, const in destructuring statement, we don’t need to surround the statement with parenthesis.
Alias Variable Names
const fullName = { firstName: 'Shravan', lastName: 'Kasagoni' };
let { firstName: fn, lastName: ln } = fullName;
console.log(fn, ln); //Shravan Kasagoni
console.log(firstName, lastName); //throws an error
In above code snippet we are creating alias names for actual object property names. For the firstName variable alias names is fn, lastName variable alias names is ln. We can use fn, ln variables to refer to the values read from fullName.firstName, fullName.lastName correspondingly.
Important point to remember when we alias the variables names in destructuring pattern, no more we use the variable names firstName, lastName to refer to the values read from fullName.firstName, fullName.lastName. If we try to use the variables names firstName, lastName JavaScript throws an error.
Pick only what you need
function getPersonDetails() {
return {
name: 'Shravan',
age: 27,
email: '[email protected]'
};
}
let { name, age } = getPersonDetails();
console.log(name, age); //Shravan 27
In above code snippet getPersonDetails() function returns a person object with 3 properties (name, age, email). In the next statement we are destructuring function return value, but are extracting only 2 properties from the returned object. Using destructuring pattern we can read only what we need, we can omit the remaining.
Using object destructuring in function parameters
const person = {
name: 'Shravan',
age: 27,
email: '[email protected]'
};
displayPersonDetails(person);
function displayPersonDetails({ name, age, email }) {
console.log(name, age, email);
}
In above code snippet to displayPersonDetails() function we are passing person object. Instead of manually creating variables and assigning them with object property values read using dot notation (e.g: var name = person.name;) inside the function definition, we are taking the advantage of object destructuring on the function parameter. JavaScript will create variables mentioned object destructuring pattern in the function parameter and assign them with values of matching person object properties.
What happens if we try to extract non existing properties in destructuring pattern?
let person = { name: 'Shravan', age: 27 };
let { name, age, email } = person;
console.log(name, age, email); //Shravan 27 undefined
In the above code snippet email property doesn’t exist on the person object, but we are trying extract in destructuring pattern. Any non existing property if we extract it in destructuring pattern it will be undefined.
Default Values
In the previous example we have email property which doesn’t exist on the person object so in destructuring pattern JavaScript making it undefined. But we want to get a value for non existing properties we can assign them with default values in destructuring pattern.
let person = { name: 'Shravan', age: 27, mobile: undefined };
let { name, email = 'no email provided', mobile = '0000000000' } = person;
console.log(name, email, mobile); //Shravan no email provided 0000000000
In the above code snippet email property doesn’t exist on the person object and we have default value so JavaScript reads the default value. we are also reading mobile property on the person object whose value is undefined, JavaScript is still displaying its default value. Even though property exists on the object,if its value is undefined JavaScript will assign default value if mentioned.
Default values are triggered on the destructuring pattern, when property doesn’t exist and if exists whose value is undefined.
Read more about Default Values in ECMAScript 2015.
Destructuring Nested Objects
let person = {
name: 'Shravan',
age: 27,
address: {
city: 'Hyderabad',
state: 'TS',
zip: 500001
}
};
let { name, age, address: { city, state, zip } } = person;
console.log(name, age, city, state, zip);
Here the basic rules for destructuring objects:
- Brace on the left hand side of assignment means it’s destructuring
- Object on the right hand side of assignment must have properties with names which we are using on left hand side of assignment
- If we extract properties on left hand side of assignment which doesn’t exists in object on right hand side of assignment, those variables on the left hand side will be undefined.
- Default values are triggered if object on the right hand side of assignment doesn’t have property read on left hand side or if it exists and value is undefined.
Destructuring Arrays
Array destructuring works for all iterable values.
Basic assignment
let numbers = [1, 2, 3, 4, 5];
let [a, b, c, d, e] = numbers;
console.log(a, b, c, d, e); //1 2 3 4 5
In above code snippet line two is the basic example of array destructuring. We are using array literal syntax on the left hand side of assignment operation and in that we are declaring variables to extract values from array on right hand side of assignment operation.
Separate declaration and assignment
let numbers = [1, 2, 3, 4, 5];
let a, b, c, d, e;
[a, b, c, d, e] = numbers;
console.log(a, b, c, d, e); //1 2 3 4 5
Pick only what you need
let numbers = [1, 2, 3, 4, 5];
let [a, b] = numbers;
console.log(a, b); //1 2
let [x, y, , , z] = numbers;
console.log(x, y, z); //1 2 5
let [i, , j, , k] = numbers;
console.log(i, j, k); //1 3 5
We can read all values or specific set of values using array destructuring. In the line three we are extracting first two values from array. In the line five we are extracting first two values and last value from array. In the line eleven we are reading first, third, last values from array.
We skip values from array in array destructuring pattern using empty commas.
Combining Array Destructuring with Spread Operator
let numbers = [1, 2, 3, 4, 5];
let [a, b, ...others] = numbers;
console.log(a, b); //1 2
console.log(others); //[3,4,5]
Read more about Spread Operator in ECMAScript 2015.
Destructuring Nested Arrays
let numbers = [1, 2, [3, 4, [5, 6]]];
let [a, , [b, , [, c]]] = numbers;
console.log(a, b, c); //1 3 6
Swapping Variables using Array Destructuring
let x = 10, y = 20;
[x, y] = [y, x];
console.log(x, y); //20 10
Computed Property Names
let key = 'age';
let { [key]: a } = { name: 'Shravan', age: 27 };
console.log(a); //27
Starting with ECMAScript 2015, the object initializer syntax also supports computed property names. Read more about computed property names.
Code on JSFiddle
Destructuring manually
Destructuring Objects
- Basic assignment
- Separate declaration and assignment
- Alias Variable Names
- Pick only what you need
- Using object destructuring in function parameters
- Extract non existing properties in destructuring pattern
- Default Values
- Destructuring Nested Objects
Destructuring Arrays
2 Comments
Ram
Good One shravan.