1

I read that : " The problem with a for...in loop is that it iterates through properties in the Prototype chain. When you loop through an object with the for...in loop, you need to check if the property belongs to the object. You can do this with hasOwnProperty." so what are the properties in the prototype chain and how for/in iterates through them?

I tried to run the code with and without hasOwnProperty but it gives the same result

var myCar = {
    color : "red" ,
    type  : "sedan" ,
    price : "100,000" ,
    model : "2020"
};
var prop ;
for (prop in myCar) {
    if (myCar.hasOwnProperty(prop)){
        console.log(prop + " : " + myCar[prop])
    }
};

for (prop in myCar) {
        console.log(prop + " : " + myCar[prop])
};

the result for both codes are : color : red type : sedan price : 100,000 model : 2020

Improve this question
1
  • 1
    All JavaScript objects have a prototype. for (prop in obj) enumerates through all object properties (own and inherited from prototype). In your case, the prototype doesn't have any property, so they're equivalent. The .hasOwnProperty is a method returning true only if the property is defined on current object, not inherited. You can read more here. Commented Apr 28, 2019 at 22:53

2 Answers 2

Reset to default
1

You can add properties to an object's prototype, and these will be considered properties of an object for the purposes of for..in. The hasOwnProperty() method determines whether or not this property is a direct property of the object.

You can read more about inheritance and the prototype chain here.

function Car() {
  this.color = 'red';
  this.type = 'sedan';
  this.price = '100,000';
  this.model = '2020';
}

Car.prototype.foo = 'bar';

const car = new Car();

console.log('Props');
for (let prop in car) {
  console.log(`${prop}: ${car[prop]}`);
};

console.log('Own props');
for (let prop in car) {
  if (car.hasOwnProperty(prop)){
    console.log(`${prop}: ${car[prop]}`);
  }
};

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

The modified code below shows what the issue is:

function Car(){
  this.color = "red";
  this.type  = "sedan";
  this.price = "100,000";
  this.model = "2020";
}

Car.prototype.test = function() {};

let myCar = new Car();

var prop ;
for (prop in myCar) {
    if (myCar.hasOwnProperty(prop)){
        console.log(prop + " : " + myCar[prop])
    }
};

for (prop in myCar) {
        console.log(prop + " : " + myCar[prop])
};

Output:

color : red
type : sedan
price : 100,000
model : 2020
color : red
type : sedan
price : 100,000
model : 2020
test : function() {}

In the last iteration of the second loop, a prototype function (or a method of Car class) is displayed, even though it's not a property but it belongs to Car.

I believe that the best way to loop through an object's properties is to use Object.keys:

Object.keys(myCar).forEach(prop => {
  console.log(prop + " : " + myCar[prop]);
});
Improve this answer

1 Comment

A nicer way in ES6, is for (const [prop, value] of Object.entries(myCar)) {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.