Iterate Over All Properties, can someone explain the loop here?

I understand the lesson difference between own property and prototype, but I don’t why we are using loop or how this loop works exactly. Please “dumb” it down and simplify it as much as possible. I have copied what I have seen from the example, and I got the right answer by modifying it a little bit already.

  **Your code so far**

function Dog(name) {
this.name = name;
}

Dog.prototype.numLegs = 4;

let beagle = new Dog("Snoopy");

let ownProps = [];
let prototypeProps = [];

// Only change code below this line
for (let property in beagle) {
if (beagle.hasOwnProperty(property)) {
  ownProps.push(property);
} else {
  prototypeProps.push(property);
}
}

console.log(ownProps);
console.log(prototypeProps);
  **Your browser information:**

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:93.0) Gecko/20100101 Firefox/93.0

Challenge: Iterate Over All Properties

Link to the challenge:

How do you loop over the properties of an object?

There are various ways to do this. One simple way to do this would be to use Object.keys to get an array of the object keys.

const obj = {
  prop1: 111,
  prop2: 222,
  prop3: 333,
  [Symbol(123)]: 'xxx',
};

const objectKeys = Object.keys(obj);
console.log(objectKeys);
// ['prop1', 'prop2', 'prop3']

With that, you could loop over that array in the standard way:

const objectKeys = Object.keys(obj);
console.log(objectKeys);
// ['prop1', 'prop2', 'prop3']

for (let i = 0; i < objectKeys.length; i++) { // because objectKeys is an array
  console.log(objectKeys[i]);
}
// prop1
// prop2
// prop3

You could also use a for...of loop:

const objectKeys = Object.keys(obj);
console.log(objectKeys);
// ['prop1', 'prop2', 'prop3']

for (let key of objectKeys) { // because objectKeys is an array
  console.log(key);
}
// prop1
// prop2
// prop3

You could also do it with a forEach method:

const objectKeys = Object.keys(obj);
console.log(objectKeys);
// ['prop1', 'prop2', 'prop3']

objectKeys.forEach(key => console.log(key)) // because objectKeys is an array
// prop1
// prop2
// prop3

Those all work just fine. But it requires the extra step of creating the array of keys. If you don’t need that array, and you just need to loop over the property names, you can use the for…in loop:

for (let prop in obj) { // because obj is an object
  console.log(prop);
}
// prop1
// prop2
// prop3

Note that we didn’t have to create a separate array.

Does that makes sense? Read the documentation in each of those links. If it’s still confusing, please let us know specifically what is confusing you.

1 Like

Why are we using “let… in” " .hasOwnProperty" and “else” stuff? Why aren’t we just using “ownProps.push(property)” and "prototypeProps.push(property) without “let… in”, “.hasOwnProperty”, “else” … I think I am missing apart of the lesson.

I’ll come back to this tomorrow, but I thought you were saying you didn’t understand the loops. I thought you said that you understood the prop checking. Those are two separate things, the looping and the prop checking.

I think you would understand it better if you console.log() the property value on every loop

for (let property in beagle) {
  console.log(property)
  if(beagle.hasOwnProperty(property)) {
    ownProps.push(property);
  } else {
    prototypeProps.push(property);
  }
}

the loop is looping through all the properties (both prototype props and its own props) the Beagle object has. hasOwnProperty() will check whether the object has the specified property as its own property (will return true), as opposed to inheriting it (will return false). If its true it will push it to ownProps array, else push it to prototypeProps array. I hope this helps.

I think that explains it. Thank you. I am getting stuck on half of these lessons, so I appreciate you taking the time to answer the question.