ES6: Use Destructuring Assignment to Assign Variables from Objects Question

ES6: Use Destructuring Assignment to Assign Variables from Objects Question
0

#1

Hi Fellow FreeCodeCampers!

I’m new to JavaScript and working through the list of assignments on free code camp. I’m on the lesson -
ES6: Use Destructuring Assignment to Assign Variables from Objects.

Now there are 3 examples they give, all which makes sense to me:
Example #1:
var voxel = {x: 3.6, y: 7.4, z: 6.54 };
var x = voxel.x; // x = 3.6
var y = voxel.y; // y = 7.4
var z = voxel.z; // z = 6.54

Example #2:
const { x, y, z } = voxel; // x = 3.6, y = 7.4, z = 6.54

Example #3:
const { x : a, y : b, z : c } = voxel // a = 3.6, b = 7.4, c = 6.54

Now the problem given is:
Use destructuring to obtain the length of the input string str, and assign the length to len in line.

This is the original code to start with:

function getLength(str) {
“use strict”;

// change code below this line
const length = 0; // change this
// change code above this line

return len; // you must assign length to len in line

}

console.log(getLength(‘FreeCodeCamp’));

Ok - so now I’m confused. If I simply use .length, I get the error that I haven’t used destructuring to obtain the length. I have two questions,
#1 why would we use destructing to do this when there is a simple answer like .length
#2 how do we use destructing for this?

// make this change
const len = str.length;

In the example the only thing I see are ways to assign properties of an array to a const variable, but I’m having difficulty even starting. I don’t understand how this would be used to get the length of a variable.

Anyone have any suggestions on how to break this problem down or explain what I am missing?


Stuck on Deconstructing assignment. How do I use it with a string
#2

Hi
length is a property of str
the same way as
x is a property of voxel

In the third example
assign local variable a the value of voxel.x
and as in the challenge
assign local variable len the value of str.length

They aren’t saying this is the smart way to do this. They are testing if you can to see if you understand destructuring assignment. So yeah, it seems like a strange way to do this.


#3

len needs to be defined

len needs to = str

You’ll need to take length and copy it into len (as demonstrated in example three)


#4

Hi and thanks alhazen and mjbenefiel. Both of your suggestions were helpful - I’m starting to get into the parts of Javascript that are more difficult for me to read. A lot of the earlier lessons, when I read them they made sense logically.

But for some reason, these seem to be less logical when I read through the code. I understand the concept of length needs to be copied to len via { length : len }.

But I originally thought that would be accomplished by this:
const { length : len };

I’m a little confused about why I need to add the = str. Since we already got the length via the length variable, I’m not sure what, if anything is being assigned from str at this point, or why that part of the line needs to be added.

Anyone able to explain in a common sense way?

I tried this and it worked:

function getLength(str) {
“use strict”;

// change code below this line
const length = str.length; // change this

const { length : len } = str;

// change code above this line

return len; // you must assign length to len in line

}

console.log(getLength(‘FreeCodeCamp’));


#5

This line is not needed. This is not using destructuring.

This line above is using destructuring. The str on the right-hand side of the = operator is the object being destructured.


#6

Ok, so as mjbenefiel pointed out, the length is a property like x in the examples. Since the property already exists, we don’t have to assign the property through declaration.

Ok, so taking str and copying the length onto len via:
const { length : len } = str;

Thanks randelldawson.


#7

Think of the above as:

const {objectPropertyName : newDelcaredVariableName } = object;

#8

thanks! very helpful.


#9

thnx for the help both :smiley: now i get the challenge


#10

I think this is the best example of an asked question I’ve seen so far, bravo!


#11

const {length: len} = str;

did the job


#12

I don’t really get why

this part doesn’t need to look like

const { length : len } = str.length;

I understand that destructuring is assigning values taken directly from an object but why it knows which value it has to take? In this case - length?


#13

I will use something Ii posted above to explain what is happening again.

const {objectPropertyName : newDelcaredVariableName } = object;

Even though we refer to strings as Strings, JavaScript still treats them as objects, so they still have properties and methods. As you already are aware, Strings have a property named length, so in this challenge we can extract that property’s value out of the string (the object) and assign it to variable. Using the template above, on the left side of the colon ( : ), you list the actual property name you want to extract. Then, on the right side of the colon ( : ), you list the variable name you want to assign the property’s value to. Finally, on the right side of the assignment operator ( = ), you list the object.

So, when you list length on the left side of the : and len on the right side of the : , JavaScript knows you want to access the length property of str and assign it to a variable named len. How does it know this? Because you used the destructuring syntax for objects.


#14

Thanks! That really helps as I’m not always sure which words/functions are standard and which are made up by me… I guess I need to be more careful while doing and reading exercises.


#15

thank u sir its very helpful.