Use Destructuring Assignment to Assign Variabless from Objects

Tell us what’s happening:
I don’t understand what I’m doing here. I have the right answer. I know that destructuring means I’m taking a value from the AVG_TEMPERATURES and assigning it to something else. That’s as far as my understanding goes and the ES6 section on here really doesn’t do a good job at explaining these things. So can someone put this into simpler terms for me?

Your code so far


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

function getTempOfTmrw(avgTemperatures) {
  "use strict";
  // change code below this line
  const {tomorrow : tempOfTomorrow} = avgTemperatures; // 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/75.0.3770.100 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

I can give it a stab, sure.

So destructuring is a shorthand way of assigning an objects properties to local variables, letting us easily access multiple properties quickly. This is a very simplified case, but sometimes we might fetch a JSON object through an API with hundreds of properties, or nested properties, or all sorts of stuff that can get confusing in our function.

We could have done the lesson without using destructuring, simply writing something like:

function getTempOfTmrw(avgTemperatures){
  const tempOfTomorrow = avgTemperatures.tomorrow;
}

(which wouldn’t have passed the test, but would have had the same end result) Imagine doing that for dozens of properties, though - that would get OLD fast:

function getStudentData(student){
  const firstName = student.firstName;
  const lastName = student.lastName;
  const gpa = student.gpa;
  const courseLoad = student.courses;
  ...
} 

… as opposed to something like:

function getStudentData(student){
  // in the one following line, we not only get properties as variables, but we assign a different name to one!
  const {firstName, lastName, gpa, courses: courseLoad} = student;
}

In fact, we can be even more succinct, if we want, by using the same deconstruction right in the parameter of the function! The following does exactly the same thing:

function getStudentData({firstName, lastName, gpa, courses: courseLoad} /* DESTRUCTURE IN PLACE! */) {
  // in here, we don't have the student parameter, as the above did the deconstruction within the
  // function's parameter signature.
  console.log(`Hello, ${firstName} ${lastName}!`);
}

I tend to think of the destructuring in an almost SQL-like syntax. When I see that line,

const {tomorrow:tempOfTomorrow} = avgTemperatures;

… in my head, I’m reading it as an SQL query: “SELECT tomorrow AS tempOfTomorrow FROM avgTemperatures”. Just as with SQL, we can select multiple fields, and assign them different names. It is a useful thing, but it is mostly “syntactic sugar” - we can already do this, just not with the useful shorthand.