JavaScript: About Accessing Nested Objects through a Loop

JavaScript
#1

Hey everyone,

I would like to clarify something. When it comes to accessing properties through a loop, how is come it isn’t corrent to use a counter variable in a chain of nested objects?
E.i.: contacts.i.firstname or contacts(i).firstname?

I’m referring to https://www.freecodecamp.com/challenges/profile-lookup challenge with the nested objects.

From the previous lessons it was stated that there was a choice of using . or [] like:
ourStorage.cabinet["top drawer"].folder2; or
ourStorage.desk.drawer;
in the https://www.freecodecamp.com/challenges/accessing-nested-objects example.

So I was wondering why contacts.i.firstname wasn’t an acceptable answer in the challenge.

Are there any other defined uses of these characters, notations and variables that I may be missing out?
I hope you understand what I’m talking about. I’d appreciate anything that will help me out of this confusion.

Thank you very much!

1 Like
#2
1 Like
#3

When you are accessing properties on objects, you can chain the property keys together to dive deeper into the object. In the example of contacts.i.firstname then the program would end up looking for something literally called i instead of the variable i.

You, as the programmer, know that i refers to a variable, but the engine does not know you are trying to use i as a variable unless you use the bracket notation. I hope that helps.

1 Like
#4

Hi @chachacharisse

The difference between . and [] is a subtle one but it’s important to understand.

When accessing a property with dot, it literally looks for the property specified; so in your first example.

contacts.i.firstname

It would look for the i property of the contacts object, which doesn’t exist in this case.

When using [], it ‘computes’ the value inside the brackets then uses that value to lookup a property on the object.

So if you were to write your example like:

contacts[i].firstname

It would compute the value of i, say 0 for the first iteration of the loop and then use that value to look for a property on the contacts object, so it would end up doing something like:

contacts.0.firstname

Note: The above won’t work if you wrote it because numbers aren’t allowed at the beginning of property keys, that’s why we use arr[0] when access array elements.

1 Like
#5

Thank you everyone! Reading your answers has made me gain more understanding regarding these. I truly appreciate the help you all extended. :grin:

#6

Here is a video I made for my High School students using Key Value pairs in the intermediate algorithm scripting challenges.

#7

Can anyone please tell me how to solve it?

javascript.jpg1366×768 165 KB

1 Like
#8

If a property of an object has a space in the name, you must use bracket notation [ ]. FYI - “inside” does not require bracket notation.

#9

Thanks a lot.:slight_smile:
I was stuck for a long time.

#10 
var myObj = {someKey: 'pink', 42: 'yellow', 
             'string containing spaces': 'blue'}

var someKey = 42;

myObj.someKey; // pink
// Explanation: treats `someKey` as a literal key name

myObj[someKey]; // yellow
// Explanation: treats `someKey` as a variable, which 
// we set to 42 earlier

myObj['someKey']; // pink
// Explanation: treats `someKey` as a literal key name, 
// due to being enclosed in quotes

myObj.string containing spaces; // syntax error

myObj.'string containing spaces'; // syntax error

myObj['string containing spaces']; // blue
// Explanation: This is the only way to reference a key 
// that contains characters that aren't allowed in 
// JavaScript identifiers
#11

Result:

objects
objects1700×1078 82.9 KB