Destructuring Assignment hell

JavaScript
#1

Tell us what’s happening:
i THINK i did exactly what was requested.
i get the correct answer.
BUT, “destructuring with reassignment was used” won’t pass the test.

also, there seems to be a disconnect between the examples and the exercise.
it may use the same operation, but does not seem to work the same way.
not seeing the parallels between them.

Your code so far


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

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

since this is an ES6 challenge you are to use the new ES6 syntax for destructuring

#3

right.
i tried:

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

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

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

but it doesn’t pass either test.

#4

Also make sure to use the functions parameter for making your assignment. For me the test wouldn’t pass if I used the global variable.

#5

You are destructiring from the object something, there is not an object called like that. But you have an object passes in as function argument that you can reference with the function parameter…

#6

well, THIS seems to work.
but the syntax feels weird.
in this exercise, what is the point of assigning it to a new variable that only exists as a return element?

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
#7

The whole ES6 section is confusing and frustrating. Don’t feel bad if you feel that way. Just do your best to stick through it and it’s okay if you don’t understand everything.

hint : const {objVariable : newVariable} = obj;

This formula allows you to copy the contents of an object’s variable into a new variable.

But there’s also a second part that trips people up due to the instructions’s ambiguity:

hint2 : The purpose of this function is to pass AN object into it and return the tempOfTomorrow value. So the object could be avgTemp1, avgTemp2 … avgTempX.

2 Likes
#8

This is a teaching challenge, you are applying the explained syntax to a simple case.
Destructuring is useful when you have to access multiple properties from an object, and you need to make it easier for yourself and need shorter names, so in one line you can destructure all the values of the properties in shorter variable names

2 Likes
#9

The ES6 syntax takes some getting used do, when we’ve been working with and getting comfortable with “traditional javascript”. But there are a lot of advantages to the new syntax. And this particular lesson is a very simplistic use of destructuring. Consider a larger example. Suppose I had a JS Object something like this:

let student = {
  _id: "015fb23a44fcca9a0",
  name: {
    first: "Robert",
    middle: ["Robin", "Reuben"],
    last: "Roberts"
  },
  courses: [
    {
      id: "CSA002.2",
      name: "Computer Science 02.2",
      instructors: [
        {
          _id: "ab883ec0a526fac",
         name: {
            first: "Ray",
            last: "Stevens"
          }
        },{
          _id: "83ec0a526facab8",
         name: {
            first: "Samuel",
            last: "Davis"
          }
        }
      ]
    }
  ]  
}

Granted, this is a very truncated example of a JSON object for a student – there might be more courses, or grades, or whatever. But the point remains: If you wanted to use this in a function to create a student mailer (for example), you js function likely would pull information out of that and use it in a template. How might that happen?

function createMailerTemplate(studentObject){
  return `Dear ${studentObject.name.first} ${studentObject.name.last},
  It has come to our attention that one of your courses, ${studentObject.courses[0].name}, has been cancelled. So sorry for the inconvenience.
  `;
}

Now in that, I’m using the values from the studentObject directly, which is a pain in the butt and a WHOLE lot of unneccesary typing. Instead, using the javascript we already know, we could:

function createMailerTemplate(studentObject){
  let first = studentObject.name.first,
     last = studentObject.name.last,
     courseId = studentObject.courses[0].id,
     courseName = studentObject.courses[0].name;

  return `Dear ${first} ${last},
  It has come to our attention that one of your courses, (${courseId}) ${courseName}, has been cancelled. So sorry for the inconvenience.
  `;
}

Looks a little better, at least in the template portion, right? But we still have that really REALLY ugly bit at the top where we pull out the parts we need from our object. And that’s where using destructuring comes in. It is simply a shortcut way of doing the exact same thing we did in that last example. Instead of hard-coding the path into each variable assignment, we can destructure them from the object directly into the variables we want. In fact, we can even go one step further with destructuring, and do it right in the function signature, where we define the parameters:

// Look at the parameter signature -- it says we're still expecting an object, but it's pulling 
//   bits of the object DIRECTLY INTO VARIABLES!! MAGIC!!
function createMailerTemplate({first, last, courses}){
  // we can filter the array to get the one course we want...
  let course = courses.filter(course => course.id == "CSA002.2");

  return `Dear ${first} ${last},
  It has come to our attention that one of your courses, (${course.id}) ${course.name}, has been cancelled. So sorry for the inconvenience.
  `;
}

As I said, the given example is trivial, and really doesn’t seem to serve a purpose. It mostly introduces you to the idea that you can, with a handy shorthand, pull data from an object into multiple variables at a time. It is a handy trick, and it has made many of my code bits a LOT cleaner.

3 Likes
#10