Use Destructuring Assignment to Assign Variables from Objects. Is that useful?

[affonso.oliver]

I thought that when I gave a console.log(HIGH_TEMPERATURES) the names of the properties would change and be like:
Const HIGH_TEMPERATURES = {
yesterday: 75,
highToday: 77,
tomorrow: 80,
}

Anyone can explain me why it’s useful to Use Destructuring Assignment to Assign Variables from Objects ?

  const HIGH_TEMPERATURES = {

yesterday: 75,
today: 77,
tomorrow: 80
};

// Only change code below this line

const {today: highToday, tomorrow: highTomorrow} = HIGH_TEMPERATURES;

console.log(HIGH_TEMPERATURES);

const HIGH_TEMPERATURES = {
yesterday: 75,
today: 77,
tomorrow: 80
};

// Only change code below this line

const {today: highToday, tomorrow: highTomorrow} = HIGH_TEMPERATURES;

console.log(HIGH_TEMPERATURES);



// Only change code above this line

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36.

Challenge: Use Destructuring Assignment to Assign Variables from Objects

Link to the challenge:

freeCodeCamp.org

[kevinSmith]

const {today: highToday, tomorrow: highTomorrow} = HIGH_TEMPERATURES;

Yes, sometimes you will want them still wrapped in an object. But sometimes you want to pull the values out and assign them to variables.

So, rather than:

const highToday = HIGH_TEMPERATURES.today;
const highTomorrow = HIGH_TEMPERATURES.tomorrow;

we do what you did above. It accomplishes the same thing but using destructuring, it is only one line and cleaner. There is nothing you can do with destructuring that you can’t do without it. But it saves you lines and makes for cleaner code. Even if you don’t like it for some reason, you still need to know it because you will see a lot of it.

[caryaharper]

A great use of destructuring is switching element around in an array. Before destructuring you would have to do something like this

const a = [1,2,3];
let tempValue = a[0];
a[0] = a[1];
a[1] = tempValue;
console.log(a) // a[2,1,3]

now you can do

a = [1,2,3];
[a[0], a[1]] = [a[1], a[0]];
console.log(a) // a[2,1,3]

you can also destructure multiple layers down, e.g., lets say I have destructured foo from an object, but foo is also an object that has a value I want so I then proceed to destructure that which looks like

const obj = { foo: {bar: 1}, };
const {foo: { bar } } = obj;
console.log(bar) // 1

//if you wanted to have the value bar with a different name its also pretty similar has to how you would normally do that

const obj = { foo: {bar: 1}, };
const {foo: { bar: baz } } = obj;
console.log(baz) // 1

[tlc35us]

I think it’s so the Javascript overlords don’t have to apologize for making us loop through nested objects

[dannyjamesfletcher]

One of the most common reasons to do this is when you want to only import one or two functions or objects from a library.

In React for example it’s common to see stuff like this:

import { useEffect, useState } from 'react'

Another common use case is when you’re mapping over an array of objects when you only care about one or two properties on the object.

const ids = items.map(({id}) => id)