hasOwnProperty vs propertyIsEnumerable

Question

Can anyone enlighten me, what is the difference between hasOwnProperty and propertyIsEnumerable:

function f(){
  this.a = 1;
  this.b = 2;
  this.c = function(){}
}
f.prototype = {
  d : 3,
  e : 4,
  g : function(){}
}

//creating the instance of an object:
var o = new f();

//And here I can't see difference.
//In my opinion they are doing the same thing
console.log("o.hasOwnProperty('a'):", o.hasOwnProperty('a')); //true
console.log("o.hasOwnProperty('b'):", o.hasOwnProperty('b')); //true
console.log("o.hasOwnProperty('c'):", o.hasOwnProperty('c')); //true
console.log("o.hasOwnProperty('d'):", o.hasOwnProperty('d')); //false
console.log("o.hasOwnProperty('e'):", o.hasOwnProperty('e')); //false
console.log("o.hasOwnProperty('g'):", o.hasOwnProperty('g')); //false

console.log("o.propertyIsEnumerable('a')", o.propertyIsEnumerable('a')); //true
console.log("o.propertyIsEnumerable('b')", o.propertyIsEnumerable('b')); //true
console.log("o.propertyIsEnumerable('c')", o.propertyIsEnumerable('c')); //true
console.log("o.propertyIsEnumerable('d')", o.propertyIsEnumerable('d')); //false
console.log("o.propertyIsEnumerable('e')", o.propertyIsEnumerable('e')); //false
console.log("o.propertyIsEnumerable('g')", o.propertyIsEnumerable('g')); //false

Correct me if I'm wrong

Answer 1

The "propertyIsEnumerable" function always excludes properties that would not return true for "hasOwnProperty". You've done nothing to make any properties not be enumerable, so in your test the results are the same.

You can use "defineProperty" to define properties that are not enumerable; see this reference at MDN.

Object.defineProperty(obj, "hideMe", { value: null, enumerable: false });

That's like:

obj.hideMe = null;

except the property won't show up in for ... in loops, and tests with propertyIsEnumerable will return false.

This whole topic is about features not available in old browsers, if that's not obvious.

Answer 2

hasOwnProperty will return true even for non-enumerable "own" properties (like length in an Array). propertyIsEnumerable will return true only for enumerable "own" properties. (An "enumerable" property is a property that shows up in for..in loops and such.)

Example:

var a = [];
console.log(a.hasOwnProperty('length'));       // "true"
console.log(a.propertyIsEnumerable('length')); // "false"

Or with a non-array object:

var o = {};
Object.defineProperty(o, "foo", { enumerable: false });
console.log(o.hasOwnProperty('foo'));       // "true"
console.log(o.propertyIsEnumerable('foo')); // "false"

(When you use Object.defineProperty, enumerable defaults to false, but I've been explicit above for clarity.)