Destructuring Variable Assignments in Javascript

Destructuring assignment feature provides an easy, readable way to handle object and array assignments.

ES6 introduced assignment destructuring, which provides a clean and more readable way to assign variables.

The old way -

1
2
3
4


const fruits = { apple: { color: "red" }, orange: { color: "orange" } };

const appleTheFruit = fruits["apple"];
console.log("color of apple: ", appleTheFruit.color); // red

The new way..

1
2
3
4
5


const fruits = { apple: { color: "red" }, orange: { color: "orange" } };

const { apple } = fruits;
// or also include orange: const { apple, orange } = fruits;
console.log("color of apple: ", apple.color); // red

The new syntax gives us a quick and easy way to get named props within an object.

Same can be applied to an array as well.

1
2
3
4
5
6
7
8
9


const planets = [
  { name: "mercury", position: 1 },
  { name: "venus", position: 2 },
  { name: "earth", position: 3 }
];

let [quickestPlanet, , thirdPlanetFromSun] = planets;
console.log("quickestPlanet: ", quickestPlanet); // { name: 'mercury', position: 1 }
console.log("thirdPlanetFromSun: ", thirdPlanetFromSun); // { name: 'earth', position: 3 }

A Practical Example

Let us see an example of where destructuring can really help/

What do you do when are want to pass arguments to functions? Previously -

1
2
3
4
5
6


function getSum(a, b) {
  return a.value + b.value;
}

const sum = getSum({ name: "num1", value: 3 }, { name: "num2", value: 2 });
console.log("sum: ", sum); // 5

Passing multiple arguments may lead to confusion and future maintenance issues. We tend to pass one parameter when feasible.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


function getSum(nums) {
  let x = nums["a"].value;
  let y = nums["b"].value;
  return x + y; // 5
}

const sum = getSum({
  a: { name: "num1", value: 3 },
  b: { name: "num2", value: 2 }
});
console.log("sum: ", sum); // 5

With ES6 assignment destructuring, we can now make this simpler to read.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


function getSum(nums) {
  let { a, b } = nums;
  return a.value + b.value; // 5
}

const sum = getSum({
  a: { name: "num1", value: 3 },
  b: { name: "num2", value: 2 }
});
console.log("sum: ", sum); // 5

Arrays

Concepts described above are applicable for array destructuring.

1
2
3


const [x, y] = [1, 2];
console.log(x); // 1
console.log(y); // 2

We can do partial assignments as well..

1
2
3


const [x, y] = [1, 2, 3, 4, 5];
console.log(x); // 1
console.log(y); // 2

Another way of looking at the same solution..

1
2
3
4
5


const nums = [1, 2, 3, 4, 5];

[x, y] = [...nums];
console.log(x); // 1
console.log(y); // 2