Introduction

Hey folks, I hope that you must have read my Day 10 Article on #30DaysOfJs. In case, if you haven't then make sure you give it a read by clicking here.

Destructuring and Spread

Destructuring refers to the way of unpacking arrays, and objects and assigning them to a distinct variable.

• Destructing Arrays-

For Example 1:

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

console.log(numOne, numTwo, numThree);

// Output --> 1 2 3

For Example 2:

 const names = ['Shivank', 'Kapur', 'David', 'Kanya']
 let [firstPerson, secondPerson, thirdPerson, fourthPerson] = names

 console.log(firstPerson, secondPerson,thirdPerson, fourthPerson);

 // Output --> Shivank Kapur David Kanya

For Example 3:

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

console.log(frontEnd);
console.log(backEnd);

/* Output --> 
["HTML", "CSS", "JS", "React"]
["Node", "Express", "MongoDB"] */

Note: If you want to skip the values in the array then you can use a comma. The comma helps to omit the value at a specific index.

For Example :

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

console.log(numOne, numThree);

// Output --> 1 3

Note: We cannot assign variable to all the elements in the array. We can destructure a few of the first and we can get the remaining in the form of an array using the spread operator(...).

For Example:

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

console.log(num1, num2, num3);
console.log(rest);

/* Output -->
1 2 3
[4, 5, 6, 7, 8, 9, 10] */

• Destructing During Iteration-

For Example:

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

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

/* Output --> 
Finland Helsinki
Sweden Stockholm
Norway Oslo */

• Destructing Object- When we destructure, the name of the variable we use to destructure should be the same as the key or property of the object.

For Example:

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

console.log(width, height, area, perimeter);

/* Output -->
20 10 200 undefined */

• Renaming During Structing-

For Example:

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

console.log(w, h, a, p);

/* Output -->
20 10 200 undefined */

• Object Parameter Without Destructing-

For Example:

const rect = {
  width: 20,
  height: 10
}
const calculatePerimeter = rectangle => {
  return 2 * (rectangle.width + rectangle.height)
}

console.log(calculatePerimeter(rect));

// Output --> 60

• Object Parameter With Destructing-

For Example:

const calculatePerimeter = ({ width, height }) => {
  return 2 * (width + height)
}

console.log(calculatePerimeter(rect));

// Output --> 60

• Destructing Object During Iteration-

For Example:

const todoList = [
{
  task:'Do DSA',
  time:'4/1/2020 8:30',
  completed: true
},
{
  task:'DO Development',
  time:'4/1/2020 10:00',
  completed: false
},
{
  task:'Give CodeForces Contest',
  time:'4/1/2020 1:00',
  completed: false
}
]

for (const {task, time, completed} of todoList){
  console.log(task, time, completed)
}

/* Output -->
Do DSA 4/1/2020 8:30 true
DO Development 4/1/2020 10:00 false
Give CodeForces Contest 4/1/2020 1:00 false */

Spread Or Rest Operator

When we destructure an array we use the spread operator(...) to get the rest of the elements in the form of an array. In addition to that, we use the spread operator to spread array elements to another array.

• To Get Rest Of The Array Elements-

For Example:

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
let [num1, num2, num3, ...rest] = nums
​
console.log(num1, num2, num3);
console.log(rest);

/* Output -->
1 2 3
[4, 5, 6, 7, 8, 9, 10] */

• Spread Operator To Copy Array-

For Example 1:

const evens = [0, 2, 4, 6, 8, 10]
const evenNumbers = [...evens]

const odds = [1, 3, 5, 7, 9]
const oddNumbers = [...odds]

const wholeNumbers = [...evens, ...odds]

console.log(evenNumbers);
console.log(oddNumbers);
console.log(wholeNumbers);

/* Output -->
[0, 2, 4, 6, 8, 10]
[1, 3, 5, 7, 9]
[0, 2, 4, 6, 8, 10, 1, 3, 5, 7, 9] */

For Example 2:

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

console.log(fullStack);

/* Output -->
["HTML", "CSS", "JS", "React", "Node", "Express", "MongoDB"] */

• Spread Operator To Copy Object-

For Example:

const user = {
  name:'Shivank',
  title:'Coder',
  country:'India',
  city:'New Delhi'
}

const copiedUser = {...user}
console.log(copiedUser);

/* Output -->
{name: "Shivank", title: "Coder", country: "India", city: "New Delhi"} */

• Spread Operator With Arrow Function- Whenever we like to write an arrow function that takes an unlimited number of arguments we use a spread operator. If we use a spread operator as a parameter, the argument passed when we invoke a function will change to an array.

For Example:

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

sumAllNums(1, 2, 3, 4, 5)

/* Output -->
[1, 2, 3, 4, 5] */

I hope that you must have found this article quite helpful. If yes, then do give a read to some of my other articles!

Who knows you might become a great programmer 🤔!