Destructuring is a way to unpack arrays, and objects and assigning to a distinct variable.
const numbers = [1, 2, 3]
let [numOne, numTwo, numThree] = numbers
console.log(numOne, numTwo, numThree) 1 2 3 const names = ['Trishan', 'Nischay', 'Abiral', 'Nishant']
let [firstPerson, secondPerson, thirdPerson, fourthPerson] = names
console.log(firstPerson, secondPerson,thirdPerson, fourthPerson)Trishan Nischay Abiral Nishant const scientificConstants = [2.72, 3.14, 9.81, 37, 100]
let [e, pi, gravity, bodyTemp, boilingTemp] = scientificConstants
console.log(e,pi,gravity, bodyTemp, boilingTemp)2.72 3.14 9.81 37 100const fullStack = [
['HTML', 'CSS', 'JS', 'React'],
['Node', 'Express', 'MongoDB']
]
const [frontEnd, backEnd] = fullStack
console.log(frontEnd)
console.log(backEnd)["HTML", "CSS", "JS", "React"]
["Node", "Express", "MongoDB"]If we like to skip on of the values in the array we use additional comma. The comma helps to omit the value at that specific index
const numbers = [1, 2, 3]
let [numOne, , numThree] = numbers //2 is omitted
console.log(numOne, numThree)1 3 const names = ['Trishan', 'Nischay', 'Abiral', 'Nishant']
let [, secondPerson, , fourthPerson] = names // first and third person is omitted
console.log(secondPerson, fourthPerson)Nischay NishantWe can use default value in case the value of array for that index is undefined:
const names = [undefined, 'Brook', 'David']
let [
firstPerson = 'Trishan',
secondPerson,
thirdPerson,
fourthPerson = 'John'
] = names
console.log(firstPerson, secondPerson, thirdPerson, fourthPerson) Trishan Brook David JohnWe can not assign variable to all the elements in the array. We can destructure few of the first and we can get the remaining as array using spread operator(…).
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)1 2 3
[4, 5, 6, 7, 8, 9, 10]const countries = [['Nepal', 'Helsinki'], ['Sweden', 'Stockholm'], ['Norway', 'Oslo']]
for (const [country, city] of countries) {
console.log(country, city)
}Nepal Helsinki
Sweden Stockholm
Norway Osloconst fullStack = [
['HTML', 'CSS', 'JS', 'React'],
['Node', 'Express', 'MongoDB']
]
for(const [first, second, third] of fullStack) {
console.log(first, second, third)
}HTML CSS JS
Node Express MongoDBWhen we destructure the name of the variable we use to destructure should be exactly the same as the key or property of the object. See the example below.
const rectangle = {
width: 20,
height: 10,
area: 200
}
let { width, height, area, perimeter } = rectangle
console.log(width, height, area, perimeter)20 10 200 undefinedconst rectangle = {
width: 20,
height: 10,
area: 200
}
let { width: w, height: h, area: a, perimeter: p } = rectangle
console.log(w, h, a, p)20 10 200 undefinedIf the key is not found in the object the variable will be assigned to undefined. Sometimes the key might not be in the object, in that case we can give a default value during declaration. See the example.
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
//Let us modify the object:width to 30 and perimeter to 80const rectangle = {
width: 30,
height: 10,
area: 200,
perimeter: 80
}
let { width, height, area, perimeter = 60 } = rectangle
console.log(width, height, area, perimeter) //30 10 200 80Destructuring keys as a function parameters. Let us create a function which takes a rectangle object and it returns a perimeter of a rectangle.
// Without destructuring
const rect = {
width: 20,
height: 10
}
const calculatePerimeter = rectangle => {
return 2 * (rectangle.width + rectangle.height)
}
console.log(calculatePerimeter(rect)) // 60
//with destructuring//Another Example
const person = {
firstName: 'Trishan',
lastName: 'Wagle',
age: 250,
country: 'Nepal',
job: 'Instructor and Developer',
skills: [
'HTML',
'CSS',
'JavaScript',
'React',
'Redux',
'Node',
'MongoDB',
'Python',
'D3.js'
],
languages: ['Amharic', 'English', 'Suomi(Finnish)']
}
// Let us create a function which give information about the person object without destructuring
const getPersonInfo = obj => {
const skills = obj.skills
const formattedSkills = skills.slice(0, -1).join(', ')
const languages = obj.languages
const formattedLanguages = languages.slice(0, -1).join(', ')
personInfo = `${obj.firstName} ${obj.lastName} lives in ${obj.country}. He is ${
obj.age
} years old. He is an ${obj.job}. He teaches ${formattedSkills} and ${
skills[skills.length - 1]
}. He speaks ${formattedLanguages} and a little bit of ${languages[2]}.`
return personInfo
}
console.log(getPersonInfo(person))
const calculatePerimeter = ({ width, height }) => {
return 2 * (width + height)
}
console.log(calculatePerimeter(rect)) // 60// Let us create a function which give information about the person object with destructuring
const getPersonInfo = ({
firstName,
lastName,
age,
country,
job,
skills,
languages
}) => {
const formattedSkills = skills.slice(0, -1).join(', ')
const formattedLanguages = languages.slice(0, -1).join(', ')
personInfo = `${firstName} ${lastName} lives in ${country}. He is ${age} years old. He is an ${job}. He teaches ${formattedSkills} and ${
skills[skills.length - 1]
}. He speaks ${formattedLanguages} and a little bit of ${languages[2]}.`
return personInfo
}
console.log(getPersonInfo(person))
/*
Trishan Wagle lives in Nepal. He is 250 years old. He is an Instructor and Developer. He teaches HTML, CSS, JavaScript, React, Redux, Node, MongoDB, Python and D3.js. He speaks Amharic, English and a little bit of Suomi(Finnish)
*/const todoList = [
{
task:'Prepare JS Test',
time:'4/1/2020 8:30',
completed:true
},
{
task:'Give JS Test',
time:'4/1/2020 10:00',
completed:false
},
{
task:'Assess Test Result',
time:'4/1/2020 1:00',
completed:false
}
]
for (const {task, time, completed} of todoList){
console.log(task, time, completed)
}Prepare JS Test 4/1/2020 8:30 true
Give JS Test 4/1/2020 10:00 false
Assess Test Result 4/1/2020 1:00 falseWhen we destructure an array we use the spread operator(…) to get the rest elements as array. In addition to that we use spread operator to spread array elements to another array.
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)1 2 3
[4, 5, 6, 7, 8, 9, 10]const countries = [
'Germany',
'France',
'Belgium',
'Finland',
'Sweden',
'Norway',
'Denmark',
'Iceland'
]
let [gem, fra, , ...nordicCountries] = countries
console.log(gem)
console.log(fra)
console.log(nordicCountries)Germany
France
["Finland", "Sweden", "Norway", "Denmark", "Iceland"]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)
[0, 2, 4, 6, 8, 10]
[1, 3, 5, 7, 9]
[0, 2, 4, 6, 8, 10, 1, 3, 5, 7, 9]const frontEnd = ['HTML', 'CSS', 'JS', 'React']
const backEnd = ['Node', 'Express', 'MongoDB']
const fullStack = [...frontEnd, ...backEnd]
console.log(fullStack)["HTML", "CSS", "JS", "React", "Node", "Express", "MongoDB"]We can copy an object using a spread operator
const user = {
name:'Trishan',
title:'Programmer',
country:'Nepal',
city:'Kathmandu'
}
const copiedUser = {...user}
console.log(copiedUser){name: "Trishan", title: "Programmer", country: "Nepal", city: "Kathmandu"}Modifying or changing the object while copying
const user = {
name:'Trishan',
title:'Programmer',
country:'Nepal',
city:'Kathmandu'
}
const copiedUser = {...user, title:'instructor'}
console.log(copiedUser){name: "Trishan", title: "instructor", country: "Nepal", city: "Kathmandu"}Whenever we like to write an arrow function which takes 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.
const sumAllNums = (...args) => {
console.log(args)
}
sumAllNums(1, 2, 3, 4, 5)
[1, 2, 3, 4, 5]
const sumAllNums = (...args) => {
let sum = 0
for (const num of args){
sum += num
}
return sum
}
console.log(sumAllNums(1, 2, 3, 4, 5))15
🌕 You achieved quite a lot so far. Now, your level of JavaScript is upper intermediate. Keep going! You have just completed day 10 challenges and you are 10 steps a head in to your way to greatness.