Use Destructuring Assignment to Assign Variables from Objects: example not clear

JavaScript
1

Tell us what’s happening:
The example given in the explanation is not clear to me. Can someone describe it or give me another example?

Your code so far


const AVG_TEMPERATURES = {
  today: 77.5,
  tomorrow: 79
};

function getTempOfTmrw(avgTemperatures) {
  "use strict";
  // change code below this line
  const tempOfTomorrow = {tomorrow:tempOfTomorrow}; // change this line
  // change code above this line
  return tempOfTomorrow;
}

console.log(getTempOfTmrw(AVG_TEMPERATURES)); // should be 79

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-objects

2

Destructuring is designed to help you pull useful values out of an object quickly without manually reassigning them all.

const me = {
  firstName: "Jackson",
  lastName: "Bates",
  age: 35,
  occupation: "developer"
}

With this simple object, without destructuring, if I wanted to have access to all these values with simple variables I could assign them like this:

const firstName = me.firstName;
const lastName = me.lastName;
const age = me.age;
const occupation = me.occupation;

There’s nothing wrong with that, it’s just more repetitive typing than most devs would like.

Destructuring lets us do the same thing like this:

const { firstName, lastName, age, occupation } = me;

It’s a bit strange when you first encounter it, especially if you are used to doing it the old way, but once you get the hang of it, you never want to go back :slight_smile:

3

You’re not the only one confused. From my experience using similar code (including modules), this should work. But I can’t redeclare the variable? I’m confused.

Edit: I ran this in the console in a new tab on Chrome and received this result:

1073×940

4

  1. You have reload the tab if you want to run the code more then once, otherwise you are re-declaring a const.

  2. You are using the global variable AVG_TEMPERATURES directly inside the function, you should be using the parameter avgTemperatures

2 Likes
5

I responded tho this on another thread. Start reading with the second sentence.

6

I was also confused here… should use avgTemperatures not AVG_TEMPERATURES

7

Exactly. I keep seeing this on many user’s questions. If you are being passed a parameter, use the parameter. If you think about it, your function can’t rely on that global variable. If the function caller wishes to have the avg_temperature be something OTHER than that global, your code breaks.

When writing a function, whether in FCC or on your own, write it as though there were no global variables. Everything your function or program needs should be made local to it. There are exceptions, like the jQuery library loading into the global namespace as $, or creating a static preferences variable that many components might share. But for dynamic data, don’t trust globals!

Cluttering the global variable namespace is a bad practice, as your program or function cannot control what will happen there. Instead, pass the data your functions will need TO them, as those functions can usually have pretty good control over what happens within their context.

All that said, stop referencing AVG_TEMPERATURES - So far as your getTempOfTmrw() knows, that variable shouldn’t exist. You are being passed a parameter, avgTemperatures. What that gets set to doesn’t matter – it could be that global, or it could be a dynamically created something-or-other. So long as it follows the same format, it should not matter. USE LOCAL BEFORE GLOBAL!!

Now, all that said, when you read the deconstruction line, read it like this:

// The code itself
const { propertyName : variableName } = objectName;

// How it reads in your head:
"STORE propertyName AS variableName FROM OBJECT objectName"
1 Like