Unlocking the Power of Destructuring and Spreading Operators in JavaScript

Destructuring

Destructuring is a way to unpack arrays, and objects and assigning to a distinct variable. It is a shorthand method of accessing the variables inside an array or object.

Let’s see how it’s done:

1. Destructuring the arrays

  const numbers = [1, 2, 3]
  let [numOne, numTwo, numThree] = numbers

  console.log(numOne, numTwo, numThree) // 1 2 3

This above code destructures the three items of the arrays and assign them to three variables called numOne, numTwo and numThree respectively. It is important to remember the no of variables are equal to the number of the items in the array, which is not always necessary. We can do similar with 2D arrays to destructure:

const fullStack = [
  ['HTML', 'CSS', 'JS', 'React'],
  ['Node', 'Express', 'MongoDB']
]
const [frontEnd, backEnd] = fullStack

console.log(frontEnd) // ['HTML', 'CSS', 'JS', 'React']
console.log(backEnd) // ['Node', 'Express', 'MongoDB']

To skip the item inside the array, we use an extra comma like this:

  const numbers = [1, 2, 3]
  let [numOne, , numThree] = numbers //2 is omitted

  console.log(numOne, numThree) // 1 3

In the second line, we use an extra comma to skip the second item of the array. To destructure only few items of the array, we can do it like this:

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let [num1, num2, num3, ...rest] = nums

console.log(num1, num2, num3) // 1 2 3
console.log(rest) // [4, 5, 6, 7, 8, 9, 10]

2. Destructuring The Array during the Iteration

For 2D arrays, we can loop and access the items using the destructuring like this:

const countries = [['Finland', 'Helsinki'], ['Sweden', 'Stockholm'], ['Norway', 'Oslo']]

for (const [country, city] of countries) {
console.log(country, city)
}

// Finland Helsinki
// Sweden Stockholm
// Norway Oslo

3. Destructuring The Object

const rectangle = {
  width: 20,
  height: 10,
  area: 200
}
let { width, height, area, perimeter } = rectangle

console.log(width, height, area, perimeter) // 20 10 200 undefined

It is similar to that of array destructuring except for the fact that curly brackets are used instead of the square brackets. Here, the perimeter isn’t defined inside the object. So the value of the perimeter is undefined. To solve this, you can do:

const rectangle = {
  width: 20,
  height: 10,
  area: 200
}
let { width, height, area, perimeter = 60 } = rectangle

console.log(width, height, area, perimeter) // 20 10 200 60

If you want to modify the original value of the object, we can use this to do so:

const rectangle = {
  width: 20,
  height: 10,
  area: 200,
  perimeter: 80
}
let { width, height, area, perimeter = 60 } = rectangle

console.log(width, height, area, perimeter) // 20 10 200 60

4. Renaming During Destructuring

If you want to name the variable different from the “key” name, you can do so like this:

const rectangle = {
  width: 20,
  height: 10,
  area: 200
}
let { width: w, height: h, area: a} = rectangle

console.log(w, h, a) // 20 10 200

5. Object Parameter with and without Destructuring

const rectangle = {
  width: 20,
  height: 10,
  area: 200
}

const findPerimeter = rectangle => {
// object as parameter without destructuring
  return 2 * (rectangle.width + rectangle.height)
}

const calculatePerimeter = ({ width, height }) => {
   // object as parameter with destructuring
  return 2 * (width + height)
}

console.log(findPerimeter(rectangle)) // 60
console.log(calculatePerimeter(rectangle)) // 60

Spread or Rest Operator

You have may notice in the above example that we used spread operator (…) to get the rest of the elements as an array while destructuring. Its applications are discussed below:

1. Spread operator to get the rest of the array

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let [num1, num2, num3, ...rest] = nums

console.log(num1, num2, num3) // 1 2 3
console.log(rest) // [4, 5, 6, 7, 8, 9, 10]

2. Spread operator to copy the array

const evens = [0, 2, 4, 6, 8, 10]
const evenNumbers = [...evens] // copying the array

console.log(evenNumbers) // [0, 2, 4, 6, 8, 10]

3. Spread operator to copy the object

const rectangle = {
  width: 20,
  height: 10,
  area: 200,
  color:"red"
}

// copying the object
const rect1 = {...rectangle}  // { width: 20, height: 10, area: 200, color: 'red' }

// copying object and modifying the value
const rect2 = {...rectangle, color: "blue"}  // { width: 20, height: 10, area: 200, color: 'blue' }

As explained earlier in the destructuring of the object, we can even modify the predefined values. We can do similar while using this operator.

4. Spread operator with Functions

const printValues = (...args) => {
  console.log(args)
}

printValues(1, 2, 3, 4, 5) // [1, 2, 3, 4, 5]

This operator can be used as parameter for the function that takes multiple but unknown no. of inputs.

This concludes the blog for understanding the basics of destructuring and spread operator in JavaScript.