Kevin Powell - Community•2y ago

Last JS newbie of the day ... object iteration

Final one today ... my brain is melting now. Within the for...in execution crewMember is placed within square brackets, []. What are they doing to crewMember. If I've understood it right, the statement refers to crewMember because it is a variable saving the spaceship.crew property for each iteration. But I still don't understand what the square brackets are making the crewMember into? The only guess I have is a property value, but I don't really understand ...

let sppaaceshipp = {
    crew: {
        captain: {
            name: 'Lily',
            degree: 'Computer Engineering',
            cheerTeam() { console.log('You got this!') }
        },
        'chief officer': {
            name: 'Dan',
            degree: 'Aerospace Engineering',
            agree() { console.log('I agree, captain!') }
        },
        medic: {
            name: 'Clementine',
            degree: 'Physics',
            announce() { console.log(`Jets on!`) }
        },
        translator: {
            name: 'Shauna',
            degree: 'Conservation Science',
            powerFuel() { console.log('The tank is full!') }
        }
    }
};

for (let crewMember in sppaaceshipp.crew) {
    console.log(`${sppaaceshipp.crew[crewMember].name}: ${sppaaceshipp.crew[crewMember].degree}`)
};
// Prints:
// Lily: Computer Engineering
// Dan: Aerospace Engineering
// Clementine: Physics
// Shauna: Conservation Science

let sppaaceshipp = {
    crew: {
        captain: {
            name: 'Lily',
            degree: 'Computer Engineering',
            cheerTeam() { console.log('You got this!') }
        },
        'chief officer': {
            name: 'Dan',
            degree: 'Aerospace Engineering',
            agree() { console.log('I agree, captain!') }
        },
        medic: {
            name: 'Clementine',
            degree: 'Physics',
            announce() { console.log(`Jets on!`) }
        },
        translator: {
            name: 'Shauna',
            degree: 'Conservation Science',
            powerFuel() { console.log('The tank is full!') }
        }
    }
};

for (let crewMember in sppaaceshipp.crew) {
    console.log(`${sppaaceshipp.crew[crewMember].name}: ${sppaaceshipp.crew[crewMember].degree}`)
};
// Prints:
// Lily: Computer Engineering
// Dan: Aerospace Engineering
// Clementine: Physics
// Shauna: Conservation Science

17 Replies

13eck•2y ago

It’s called the property accessor https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors

Jochem•2y ago

It lets you access a property by the value of a variable. crewMember is just a variable, but it's used using the square bracket (property accessor iirc) syntax because if you just wrote sppaaceshipp.crew.crewMember it would try to find the property called crewMember, not the property with the name matching the value of the crewMember variable

const crewMember = 'captain';
sppaaceshipp.crew[crewMember].name === sppaaceshipp.crew.captain.name; //true

const crewMember = 'captain';
sppaaceshipp.crew[crewMember].name === sppaaceshipp.crew.captain.name; //true

13eck•2y ago

It’s an alternative to dot notation. And you can use variables within the square brackets. And strings that contain characters that can’t be used with dot notation

Å Marlon G•2y ago

Hmm ... so I need to break this one down more I guess ... This was the starting example for using square brackets in this section of the course:

let newSpaceship = {
    'Fuel Type': 'Turbo Fuel',
    'Active Duty': true,
    homePlanet: 'Earth',
    numCrew: 5
};
newSpaceship['Active Duty'];

let newSpaceship = {
    'Fuel Type': 'Turbo Fuel',
    'Active Duty': true,
    homePlanet: 'Earth',
    numCrew: 5
};
newSpaceship['Active Duty'];

As I understood the lecture you have to use [] when there is a special symbol in the property key part. So what you are saying, Jochem, is that because crewMember is a variabel, and not just a key, it must be placed within the []?

Jochem•2y ago

the square brackets are an alternative to the .'s like Beck said, but where the dots only support names that are composed of valid characters for variable/function names, the [] square brackets take a string. That string can be a string literal like in your second example, or a string in a variable like in the first one (second and first in this thread I mean)

Å Marlon G•2y ago

Ok ... so the square bracket allows for the value of the crewMembervariabel to become a string for the console.log, instead of an object name, which it is inside of the sppaaceshipp variabel? Which is why the final print out is Lily: , e.g.

Jochem•2y ago

no, it doesn't really interact with the console.log at all. for that newSpaceship object, you could access Active Duty like this:

const key = 'Active Duty';
newSpaceship[key];

const key = 'Active Duty';
newSpaceship[key];

or access numCrew like this:

newSpaceship['numCrew'];

newSpaceship['numCrew'];

or this

const key = 'numCrew';
newSpaceship[key];

const key = 'numCrew';
newSpaceship[key];

or just like newSpaceship.numCrew. They're all going to access the same property. The string in crewMember is only parsed so that it can be used to look up a property in ssppaceshipp.crew well, the numCrew ones access the same ones, not the first one with 'Active Crew', sorry if that was unclear

Å Marlon G•2y ago

Oh ... maybe this is where I misunderstood ... Should I read this (and excuse the weird structure)

for (let crewMember in sppaaceshipp.crew) {
    console.log(`${sppaaceshipp.crew[crewMember].name}: ${sppaaceshipp.crew[crewMember].degree}`)
};

for (let crewMember in sppaaceshipp.crew) {
    console.log(`${sppaaceshipp.crew[crewMember].name}: ${sppaaceshipp.crew[crewMember].degree}`)
};

as sppaaceshipp-->crew[crewMember]-->name and not sppaaceshipp.crew-->[crewMember].name

Jochem•2y ago

not sure what you mean by the arrows. sppaaceshipp.crew[crewMember] is accessing the crew property of the spaceship object, and then the property of crew that is identified by whatever is in the variable crewMember if crewMember === 'captain' then spaceship.crew[crewMember] is the same as spaceship.crew.captain

Å Marlon G•2y ago

... ok, one step back then ... One thing that is confusing me is that the for...in obviously is using both dot notation and bracket notation as property accessors, right? So the arrows was trying to clean up the steps ... The first step is check the variabel sppaaceshipp The second step is check crew ... and then I get confused... is [crewMember] part of the crew step, or one on its own? The last step is obviously checking the name

Jochem•2y ago

it's accessing properties on crew, so that would be a separate step yeah

Å Marlon G•2y ago

Aha! So that's why you wrote this example: if crewMember === captain then spaceship.crew[crewMember] is the same as spaceship.crew.captain And because this is an iteration, crewMember is really the reason why we don´t have to write: spaceship.crew.captain spaceship.crew['chief officer'] spaceship.crew.medic etc ... Right?

Jochem•2y ago

yes!

Å Marlon G•2y ago

So, when using a for...in, the variabel will be the objects that is being run through each time. So if I wanted to iterate through all objects within captain, the code would be:

for (let crewMember in sppaaceshipp.crew.captain) {
    console.log(`${sppaaceshipp.crew.captain[crewMember]}: etc.)
};

for (let crewMember in sppaaceshipp.crew.captain) {
    console.log(`${sppaaceshipp.crew.captain[crewMember]}: etc.)
};

Jochem•2y ago

yeah, though you'd rename crewMember to something more relevant

Å Marlon G•2y ago

Yes! That's really a big take away – naming stuff ...! 😅 But this means you also get todays peacock. My goodness, thank you so much! 🦚

Jochem•2y ago

haha, you're welcome as always 😄

Gaming

Programming

Last JS newbie of the day ... object iteration