JavaScript Destructuring

Destructuring Basics

1. The process of extracting the values from the array or object into the variables is known as destructuring.

2. The two most used data structures in JavaScript are Object and Array, both allow us to unpack individual values into variables.

Object Destructuring

1. The process of extracting the values from the object into the variables is known as object destructuring.

2. All the key names provided on LHS are considered as variables and these variables should be declared and written inside curly braces.

3. The variable name should be same as object key name.

4. JS engine will search for the key inside the object.

5. If the key is present, the value is extracted and copied into variable.

6. If the key is not present, undefined is stored in the variable.

7. After destructuring, we can directly access variable names, without using object reference.

8. Example:

let obj = {
  name: "chombi",
  age: 16,
}

let {name, age, country} = obj;
console.log(name);    // chombi
console.log(age);     // 16
console.log(country); // undefined

Here, we are trying to extract name, age and country from obj. name and age are present in obj but country is not, so inside country js engine stored undefined and for name and age we have respective values.

Array Destructuring

1. The process of extracting the values from the array into the variables is known as array destructuring.

2. All the variable names provided on LHS should be written inside square brackets.

3. JS engine will extract the array values and store them in variables in the same order as they are present inside array.

4. If we try to access value which is not present inside array, js engine will store undefined inside that variable.

5. Example:

let arr = [10, 20, 30, 40, 50]

let [a, b, c, d, e, f] = arr;
console.log(a); // 10
console.log(b); // 20
console.log(c); // 30
console.log(d); // 40
console.log(e); // 50
console.log(f); // undefined

Here, we are trying to extract values from array into variables a,b,c,d,e,f. As we've learned, values will be extracted and stored into variables in the same sequence they are available inside array, so we have values in a,b,c,d,e but not in f because at sixth position no value is present and js engine stored undefined in it.

Destructuring in Functions

1. We can destructure array or object in function parameter so that we can access values directly.

Destructuring object in function parameter

At the time of object destructuring, we have to make sure variable name is same as object key name and write within curly braces.

function details({name, age}) {
  console.log(name); // chombi
  console.log(age);  // 16
}

let obj = {
  name: "chombi",
  age: 16,
}

details(obj) // function call

Here, we have passed object as an argument to details function, and we have destructured values in parameter only.

Destructuring array in function parameter

At the time of array destructuring, we have to keep variables between square brackets. Values will be destructured in the same order they are available in array.

function details([a, b, c, d, e]) {
  console.log(a); // 10
  console.log(b); // 20
  console.log(c); // 30
  console.log(d); // 40
  console.log(e); // 50
}

let arr = [10, 20, 30, 40, 50];
details(arr) // function call

Here, we have passed array as an argument to details function, and we have destructured values in parameter only.

Advanced Destructuring Techniques

Default Values

We can provide default values that will be used if the property doesn't exist:

let obj = { name: "chombi" };

let { name, age = 18 } = obj;

console.log(name); // chombi
console.log(age);  // 18 (default value)

Renaming Variables

We can assign properties to variables with different names:

let obj = { name: "chombi", age: 16 };

let { name: firstName, age: years } = obj;

console.log(firstName); // chombi
console.log(years);     // 16

Skipping Array Elements

We can skip elements in array destructuring by using commas:

let arr = [10, 20, 30, 40, 50];

let [first, , third] = arr;

console.log(first);  // 10
console.log(third);  // 30