Learn Javascript - Looping Through Objects

let spaceship = {
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 spaceship.crew) {
console.log(`${spaceship.crew[crewMember].name}: ${spaceship.crew[crewMember].degree}`);
}
for (let crewMember in spaceship.crew) {
console.log(`${crewMember}: ${spaceship.crew[crewMember].name}`);
};



output:

Lily: Computer Engineering

Dan: Aerospace Engineering

Clementine: Physics

Shauna: Conservation Science

captain: Lily

chief officer: Dan

medic: Clementine

translator: Shauna

MY QUESTION: how does crewMember know to take the value of of each crew member’s role? In my JS code I never set crewMember equal to anything and in the ‘for…in’ loop i declare the variable crewMember but I still don’t get how it get’s linked to each crew members role?

ALSO,

when i log it to my console, i’m confused by two things:

Why is the crewMember variable in square brackets?

Again, how is that crewMember associated with each crew member’s role?

I hope this makes sense

@kyndra_laurie spaceship.crew is an object with 3 keys: captain, medic, translator. The for-in statement loops through an objects keys, and each time through the loop it assigns the value it finds to the variable name you declare inside the for loop.

So the code is saying: loop through the crew, and each time put the key name in a variable named crewMember.

The first time through, crewMember is “captain”. Then you want to actually get the captain object, so to access that key you’d usually use a dot, like spaceship.crew.captain, but you have to type out the names and dots exactly like they are in the object… Even though you have a variable crewMember that equals “captain” you can NOT type spaceship.crew.crewMember, so you have to use an alternative syntax which is the square brackets.

But how does the code know that crewMember = captain, crewMember = medic, etc. ?
What connect crewMember to each of those objects?

I am not surprised if anyone is confused by this. There are several problems with this code that are just setting you up for failure.

I never teach for-in and as a full-time professional programmer, I never use it. Using arrays and for-of is much easier to understand. Objects weren’t meant for iteration. If you need the data in the object, at least do for key of Object.keys(spaceship.crew).

I can post tomorrow how I would write this code to make it more beginner-friendly.

1 Like

A for-in statement loops through the keys of an object. So spaceship.crew is an object, and captain, etc. are the keys. It is similar to using for-of Object.keys().

Then using the key you can look up the actual captain object, etc.

I can post sample code tomorrow to illustrate.

1 Like

hi @kyndra_laurie ,

Based on the syntax, you’re making crewMember variable to draw out object key from “spaceship.crew” objects list. You can refer to MDN’s link for more reference in helping you to better understand the syntax.

for (let crewMember in spaceship.crew) {
    
   // do something
}

Hope it helps.

2 Likes

@kyndra_laurie I just made a video about this I think it will make a few things much easier to understand, please let me know if it helps!