A few important things to consider before we begin: I am a beginner developer and writing articles is my way of learning, this means that there might be errors. If you find any, please let me know in the comments and І will correct them :) Some of the information like definitions or examples are taken from the internet, if you see something that belongs to you and would like credit or it to get removed - please contact me and І will be happy to do so. Learning is fun, so let’s go!🔥 Object/Array is one of the new ES6 features and is very helpful. If you want to be a competent React developer - this is the topic you should not miss, since used quite heavily in React.js destructuring destructuring The main superpower of is the ability to take apart an object or an array. So we can extract just the information we need. destructuring Here we have two arrays: const alphabet = ['A', 'B', 'C', 'D', 'E', 'F']
const numbers = ['1', '2', '3', '4', '5', '6'] Let’s say that we want to take the first two elements from our array. We could do something like this: alphabet const a = alphabet[0]
const b = alphabet [1]
console.log(a)//A 
console.log(b)//B First, we create const “a“ which will store the extracted information. Next, we take our array and search for the first item in it - which is at the position (in JS count starts from 0) .  Similarly, we then create const “b”  to store the value of the second item, which can be found on position . alphabet [0] [1] Now let’s see how it works with : destructuring const [a, b] = alphabet
console.log(a)//A
console.log(b)//B Here we put the first two variables in brackets and set them equal to our array . Note that we can give them any names i.e , etc. When we console.log the result, will give us and consequently will produce . alphabet const [z, q] = alphabet const [g, i] = alphabet z,g A q,і B Basically, we put something we want on the and what we want on the . to take apart right to take out left As well it works with more than just two elements: const [a, b, k] = alphabet
console.log(a)//A
console.log(b)//B
console.log(k)//C Let’s imagine that we would like to skip the second element. const [a,, c] = alphabet
console.log(a)//A
console.log(c)//C Easy! Just delete it and leave the coma . , Let’s say, we need to leave out the second element BUT include all the rest of our array. const [a,, c, ...rest] = alphabet
console.log(a)//A
console.log(c)//C
console.log(rest)//["D", "E", "F"] In this case, we can use the (don’t forget to give it a name). It can be any name, here we used , names like , works but using only numbers as a name і.e , will not work. spread operator … rest Rest Rest1 1 324 Congratulations, you got + 4 EXP Now, when we mastered the basics we can do more advanced magic by combining destructuring and spread operator to combine two arrays. const alphabet = ['A', 'B', 'C', 'D', 'E', 'F']
const numbers = ['1', '2', '3', '4', '5', '6'] To do it we first create a new array and use the to get all the elements in array and similarly , to get all the elements in the numbers array spread operator alphabet …numbers const alphabet = ['A', 'B', 'C', 'D', 'E', 'F']
const numbers = ['1', '2', '3', '4', '5', '6']

const newArray = [...alphabet, ...numbers]
console.log(newArray) //['A', 'B', 'C', 'D', 'E', 'F', '1', '2', '3', '4', '5', '6'] that we can do it with . Concatenate - concat, means to join. So this: Note concat const newArray = alpphabet.concat(numbers) will produce the same result as: const newArray = [...alphabet, ...numbers] Considering arrays, here’s another good use of - the function that returns more than 1 parameter. destructuring First, let’s see an example without destructuring. function sumAndMultiply(a, b) {
return [a+b, a*b]
}

const array = sumAndMultiply(2, 3)
console.log(array)// [5, 6] We create function , pass and into it. Inside we create an array that  would Sum and Multiply these numbers. Lastly, we create that will store the result and set it equal to our function inside of which, we pass 2 and 3. sumAndMultiply a b const array sumAndMultiply So how can be applied here? destructuring function sumAndMultiply(a, b) {
return [a+b, a*b]
}

const [sum, multiply] = sumAndMultiply(2, 3)
console.log(sum)// 5
console.log(multiply)// 6 Basically, we say that we want to get the two elements from our function. Note that the names can be anything, і.e , etc. const [Sum, mulTiply] const [bob, apple] As you can see, using gives more control over the information that we want to extract. destructuring Another feature that becomes available when using while working with functions is that we can set default values. destructuring function sumAndMultiply(a, b) {
return [a+b, a*b]
}

const [sum, multiply, division = 'No division'] = sumAndMultiply(2, 3)
console.log(sum)// 5
console.log(multiply)// 6
console.log(division)// No division Here, by default we get “No division” because our function return only two properties. If we pass another property sumAndMultiply a/b function sumAndMultiply(a, b) {
return [a+b, a*b, a/b]
}

const [sum, multiply, division = 'No division'] = sumAndMultiply(2, 3)
console.log(sum)// 5
console.log(multiply)// 6
console.log(division)// 0.6666666666 In this case we have third parameter that is send out and we get the result 5/6 =0.6666666666 Congratulations, you got + 5 EXP Interesting stuff, huh?! Now the time comes to unleash the true power of with objects. Below, we have two objects: destructuring - destructuring const personOne = {
name: 'Jony',
age: 30,
address: {
  city:'Somewhere',
  state: 'One of them'
 }
}

const personTwo = {
name: 'Sally',
age: 19,
address: {
  city:'Somewhere else',
  state: 'Another one of them'
 }
} Let’s use our new super skill to get and from our second person. It works similarly to an array: name age const { name, age } = personTwo
console.log(name)//Sally
console.log(age)//19 To an object we have to use curly brackets instead of square brackets. Next, we put the name of the property and make it equal to the object that we want to . destructure destructure The difference between destructuring an array and an object is that in the first case (array) it is based on position ( 1st, 2nd, 3th … nth), and in the second (object), is based on the name of the key (name, age). So when working with objects names should match. destructuring What if we would like to set another key name to one of our key names, for example, so that our would be actually - ? name firstName const personTwo = {
name: 'Sally',
age: 19,
address: {
  city:'Somewhere else',
  state: 'Another one of them'
 }
}

const { name: firstName, age } = personTwo
console.log(firstName)//Sally
console.log(age)//19 All what is needed is to take property and map our new variable to it - . name firstName And guess what? We can still use default values, YAY! const personTwo = {
name: 'Sally',
age: 19,
address: {
  city:'Somewhere else',
  state: 'Another one of them'
 }
}

const { name: firstName, age, favoriteFood = 'Rice' } = personTwo
console.log(firstName)//Sally
console.log(age)//19
console.log(favoriteFood)//Rice You can see that we added a property and set it to , even though our object doesn’t have it. favoriteFood ‘Rice‘ const personTwo = {
name: 'Sally',
age: 19,
favoriteFood: 'Watermelon',
address: {
  city:'Somewhere else',
  state: 'Another one of them'
 }
}

const { name: firstName, age, favoriteFood = 'Rice' } = personTwo
console.log(firstName)//Sally
console.log(age)//19
console.log(favoriteFood)//Watermelon In case, was specified (for example - Watermelon), then this value will be used insted of default value. favoriteFood And guess what! It is also possible to use the spread operator: const personTwo = {
name: 'Sally',
age: 19,
favoriteFood: 'Watermelon',
address: {
  city:'Somewhere else',
  state: 'Another one of them'
 }
}

const { name: firstName, ...rest } = personTwo
console.log(firstName)//Sally
console.log(rest) is the name that we choose to call all the rest of the items besides the , which is already included. rest name Now, let’s imagine that we need to pull out an item from an object inside of an object, in our case - or ? state city const personTwo = {
name: 'Sally',
age: 19,
favoriteFood: 'Watermelon',
address: {
  city:'Somewhere else',
  state: 'Another one of them'
 }
}

const { name: firstName, adress: { city } } = personTwo
console.log(firstName)//Sally
console.log(city)//Somewhere else Super easy, all is needed is to specify the key, open curly brackets, and put the value. Congratulations, you got + 5 EXP So far so good, isn’t it? ✨ But wait, there is more to it! Do you remember that we had two objects? What if we would like to combine them using ? destructuring const personOne = {
name: 'Jony',
age: 30,
address: {
  city:'Somewhere',
  state: 'One of them'
 }
}

const personTwo = {
age: 19,
favoriteFood: 'Watermelon',
}

const personThree = {...presonOne, ...personTwo)
console.log(personThree)//name: "Jony", age: 19, adress: { city:'Somewhere', state: 'One of them'}, favoriteFood: "Watermelon" You see, it is easy now 😃 We just have to use the . Create a new array and put the two arrays into it. that if has the some of the fields identical to , then it will overwrite it. In our case both objects have fields, so the value of person two fields will be taken: spread operator Note personTwo personOne age age console.log(personThree)//name: “Jony“, , adress: {}… age: 19 Finally, the place where really shines - inside of the function’s arguments. destructuring Let’s start with our object and the newly created function that is calling this object. As you can see when we call our new function it will return the whole object - , and . personOne printUser name age address const personOne = {
name: 'Jony',
age: 30,
address: {
  city:'Somewhere',
  state: 'One of them'
 }
}

function printUser(user){
cosole.log(user)
}

printUser(personOne)//{name: 'Jony', age: 30,address: { city:'Somewhere', state: 'One of them' }} But what if we only need and ? We could do something like this: name age const personOne = {
name: 'Jony',
age: 30,
address: {
  city:'Somewhere',
  state: 'One of them'
 }
}

function printUser(user){
cosole.log(`Name is: ${user.name}. Age is ${user.age}`)
}

printUser(personOne)//Name is Jony. Age is 30 Note that we are using ` and not ‘ or “. Also, ${} is used to add values to a string. Using , we can choose what elements to extract: destructuring const personOne = {
name: 'Jony',
age: 30,
address: {
  city:'Somewhere',
  state: 'One of them'
 }
}

function printUser({name, age, favoriteFood = 'Watermelon'}){
cosole.log(`Name is: ${name}. Age is ${age}. Food is ${favoriteFood}`)
}

printUser(personOne)//Name is Jony. Age is 30. Food is Watermelon. As you can see, now we can even use default values (favoriteFood = 'Watermelon'). Now the quesiton, what if we add inside our object and make it , what will be the last sentence? If you know the answer, write it in the comments! favoriteFood apple const personOne = {
name: 'Jony',
age: 30,
favoriteFood: 'Apple', 
address: {
  city:'Somewhere',
  state: 'One of them'
 }
}

function printUser({name, age, favoriteFood = 'Watermelon'}){
cosole.log(`Name is: ${name}. Age is ${age}. Food is ${favoriteFood}`)
}

printUser(personOne)//Name is Jony. Age is 30. Food is ??? Congratulations, you got + 5 EXP. Good job, you have earned 19 EXP for this topic!

Too Long; Didn't Read

Making security fun one episode at a time

JS Destructuring For Newbies

Too Long; Didn't Read

Jony Darko

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

JS Destructuring For Newbies

Too Long; Didn't Read

Jony Darko

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES