FAQ: Advanced Objects - Destructured Assignment

Frequently Asked Questions JavaScript FAQ
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Destructured Assignment” exercise from the lesson “Advanced Objects”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Introduction To JavaScript

FAQs on the exercise Destructured Assignment

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2

Why in this exercise do we have to call the method with () following? Just a few lessons back we were taught that using () following a method call is unnecessary.

3

I believe the only time we were told that a method didn’t need to be called with parenthesis was during the “Getters” and “Setters” lessons. Therefore, that wouldn’t apply to “Destructured Assignments”.

4 Likes
4

In the code below, the console prints “stay inside” is that because we referenced the variable or the key? Do they need to be called the same thing? When I play around with changing the name of either it appears to only work if the key, variable and console log are all called the same thing…

const { functionality } = robot;
console.log(functionality.beep());
const vampire = {
name: ‘Dracula’,
residence: ‘Transylvania’,
preferences: {
day: ‘stay inside’,
night: ‘satisfy appetite’
}
};
const { day } = vampire.preferences;
console.log(day);

5

Hi;
in lesson explanation, to call inside a method it used:
const { day } = vampire.preferences;
console.log(day); // Prints ‘stay inside’

While the script was:
const vampire = {
name: ‘Dracula’,
residence: ‘Transylvania’,
preferences: {
day: ‘stay inside’,
night: ‘satisfy appetite’
}
};

But in exercise, why it gave me error when I write:
const {beep} = robot.functionality;

to relate:
const robot = {
model: ‘1E78V2’,
energyLevel: 100,
functionality: {
beep() {
console.log(‘Beep Boop’);
},
grateful
martinmiciciday

6

I notice in the examples for destructured assignment that the object’s key is not only wrapped in curly braces, but surrounded by spaces as well. When testing, I discovered that this is not essential.

Is it convention to surround the key with spaces when using destructured assignment?

2 Likes
7

Im with emg… why do we need to call it in the “Destructured Assignment” exercise but not in the “Factory Function” tinCan exercise?

8

I believe getters & setters are methods but slightly special methods, essentially properties (I think) so the rule of invoking with () doesn’t apply to them

9

Because on the previous lesson we learn getter and setter that they don’t use parenthesis to call a function. Here we don’t use them, so calling functions need to use parenthesis.

10

Because beep is a function. You should surround your properties in curly braces instead of a function.

11

In order to call the .beep() method on functionality , we need to write two lines.

const {functionality} = robot;
functionality.beep();
// output: Beep Boop

However, the {functionality} in the curly brackets just shorthand for robot.functionality- and thus, robot.functionality.beep(); will log Beep Boop as well.

So my question is, why would writing const {functionality.beep()} = robot result in an error? Shouldn’t it log Beep Boop to the console as well?

12

Const creates the variable with what is inside of {}. Functionality.beep() isn’t a variable. Pretty sure that’s right…Sometimes confidence wavers on these probs.

13

Interesting… thank you for your input!

14

I’m currently redoing this lesson to make sure I really understand.

const robot = {
model: ‘1E78V2’,
energyLevel: 100,
functionality: {
beep() {
console.log(‘Beep Boop’);
},
fireLaser() {
console.log(‘Pew Pew’);
},
}
};

//const { functionality } = robot
//functionality.beep()

(I’m trying to access fireLaser() )

const { model } = robot
model.functionality(fireLaser()) //doesn’t work
model.fireLaser() //doesn’t work

Thanks :blush:

15

model is only a property value, and has no additional properties or behaviors. It is not an object we can poll for other values or invoke any methods on since there are none. It is just, ‘1E78V2’.

The reason we could destructure on functionality is because its value IS an object, with a contained method, as demonstrated.

16

hi,
Thank you so much for your help :smiley:. This all makes more sense now.
I would only be able to destructure the functionally object to access beep() and fireLaser() :face_with_raised_eyebrow:

cont { functionality } = robot
functionality. fireLaser()
:thinking:

1 Like
17

To give another example which is a spin off of the Lodash project…

const _ = {
  invert (obj) {
    const keys = Object.values(obj)
    const values = Object.keys(obj)
    const map = keys.map((key, i) => [key, values[i]])
    return Object.fromEntries(map)
}

const {invert} = _
const obj = {1: 'one', 2: 'two', 3: 'three'}
console.log(invert(obj))

{ one: '1', two: '2', three: '3' }

Notice how we are able translate the functionality of invert() to present execution context (outside of the object)? This is a powerful feature. It means we can put all the functions of our program into method form in an object which is a big step toward modularization. Everything in one object means it is portable and easy to plug in. It all sits in the global namespace so don’t confuse this with actual modules that have their own namespaces. Don’t need to go there, though, so belay.

Our program can have the parent object defined, and only bring necessary methods to the forefront for as long as we need them. Make this happen in function scope and there is no memory footprint. Lodash is a very smart approach.

Did I say, ‘belay’? Bookmark this, and keep moving forward. In time you will see this is a rather trivial example, as important as it is.

1 Like
18

thank you for taking the time to explain this. Really appreciate it.

1 Like
19

Ok, so I hated this lecture really badly!!! :(((((

I followed the second example for the second exercise! So, the example said to write a nested object as such:
“const { day } = vampire.preferences;
console.log(day); // Prints ‘stay inside’”

BUT, when I wrote it similarly to extract the nested method from the ‘robot’ object, I got an error of undefined and null! As such:
“const { beep } = robot.functionality.beep();
console.log(beep);”

And then, when I wrote it as such, it worked!??! Can anybody please explain me why?
“const { beep } = robot;
functionality.beep();”

And why did it print the ‘Beep Boop’ without the console.log???

20

Might it be due to the fact that you have invoked the beep() method in that assignment? It might be better invoked at the call when logging.

1 Like