Why can't I the properties of properties when looping an object?

Question

Let's say I have this object:

const people = {
     frodo: { name: 'Frodo', age: 33 },
     aragorn: { name: 'Aragorn', age: 87 },
     legolas: { name: 'Legolas', age: 2931 }
}

And let's say I want to loop over the properties of that object, like this:

for (var person in people) {
    console.log(person.name);
}

I get undefined for any property of the person I tried to access. Why does this happen, and what's the correct way to loop the properties of that object and still be able to access their own properties?

see this post, you can find all ways to loop over object properties in JS: https://stackoverflow.com/a/5737136/6171845 — Sofiane Daoud, Oct 04 '18 at 20:46

score 2 · Answer 1 · answered Oct 04 '18 at 20:44

The for ... in loop iterates over the keys (properties) of an object. So

for (var person in people) {
  console.log(people[person].name);
}

will get you the desired result.

The variable person will receive the values "frodo", "aragorn" and "legolas" during the execution of the loop which are the keys (properties) of your person object.

Nina Scholz · Answer 2 · 2018-10-04T20:47:40.620

2

You take the keys of the object with for ... in statement. Then you need it as property accessor fopr the object.

const people = {
     frodo: { name: 'Frodo', age: 33 },
     aragorn: { name: 'Aragorn', age: 87 },
     legolas: { name: 'Legolas', age: 2931 }
}

for (var person in people) {
    console.log(people[person].name);
}

edited Oct 04 '18 at 20:47

answered Oct 04 '18 at 20:44

Nina Scholz

376,160
25
347
392

Or `for..of`, surely. – lonesomeday Oct 04 '18 at 20:45
1

`for of` works only for objects with implemented [`Symbol.iterator`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator). – Nina Scholz Oct 04 '18 at 20:46
Indeed. I didn't look closely enough. – lonesomeday Oct 04 '18 at 20:47

score 1 · Answer 3 · answered Oct 04 '18 at 20:45

You need to look at what person is within your code:

const people = {
     frodo: { name: 'Frodo', age: 33 },
     aragorn: { name: 'Aragorn', age: 87 },
     legolas: { name: 'Legolas', age: 2931 }
}

for(person in people) console.log(person);

It's the name of the object, not the object itself. To access it you need to specify where the object is located:

  const people = {
         frodo: { name: 'Frodo', age: 33 },
         aragorn: { name: 'Aragorn', age: 87 },
         legolas: { name: 'Legolas', age: 2931 }
    }

    for(person in people) {
      console.log( people[person].age, people[person].name, people[person] );
    }

frithjof · Answer 4 · 2018-10-04T21:26:20.060

1

for .. in returns every key in the object. You can get the person by using the key.

const people = {
     frodo: { name: 'Frodo', age: 33 },
     aragorn: { name: 'Aragorn', age: 87 },
     legolas: { name: 'Legolas', age: 2931 }
}

for(var key in people) {
    var person = people[key]
    console.log(person.name)
}

edited Oct 04 '18 at 21:26

answered Oct 04 '18 at 20:45

frithjof

345
3
8

Why can't I the properties of properties when looping an object?

4 Answers4