I have a delete operator code snippet which is as following:

(function() {
  var objA = Object.create({
    foo: 'foo'
  });
  var objB = objA;
  objB.foo = 'bar';

  delete objA.foo;
  console.log(objA.foo);
  console.log(objB.foo);
}());

I have a delete operator code snippet which is as following:

(function() {
  var objA = Object.create({
    foo: 'foo'
  });
  var objB = objA;
  objB.foo = 'bar';

  delete objA.foo;
  console.log(objA.foo);
  console.log(objB.foo);
}());

//it logs-> foo

As the delete operator is used to delete foo property it shouldn't exist and thus undefined should be logged in console. However it is logging foo which is value of the property at the time of initialization. Why is it not deleting the property?

• javascript

• 1 Use Object.create(null, {foo:{value:'foo', configurable:true}}); to add properties to the new object rather than to its [[Prototype]]. – RobG Commented Mar 9, 2018 at 4:41

5 Answers 5

var objA = Object.create({
    foo: 'foo'
});

creates an object objA with objA.__proto__ (its prototype) set to {foo: 'foo'}. There is no actual objA.foo property, it is actually objA.__proto__.foo, so nothing is deleted.

If you do instead

var objA = {foo: 'foo'}

then your code would work.

A demo:

var refObj = {a: 'a'};
var proto = {
  foo: refObj
};
var objA = Object.create(proto);

console.log(objA.foo === objA.__proto__.foo) // should be true
delete objA.foo
console.log(objA.foo) // should print something
delete objA.__proto__.foo
console.log(objA.foo) // should be undefined

If you check documentation of delete operator

If a property with the same name exists on the object's prototype chain, then, after deletion, the object will use the property from the prototype chain (in other words, delete only has an effect on own properties).

The method Object.create() create object with prototype properties

The Object.create() method creates a new object with the specified prototype object and properties.

So delete objA.foo; does not delete proto property of object

The reason behind this is that Object.create creates an object, and the prototype of that object is specified by the parameter.

Here, you're setting the prototype of the objA as a regular JavaScript object with the property foo, and the same is referenced by objB.

delete only deletes the property owned by the object. Hence it isn't deleting the property foo as it is part of the prototype, not the object.

Finally, console.log logs the value of foo to the console due to the prototype chaining. JavaScript looks for a property in the chain until it is found or the root object is reached.

I think what the problem was is that the Object.create() method creates another object based off of a prototype, and it takes a second parameter that makes up the objects properties. So there is only a prototype created without any reference to the object being created by .create() method.

(function() {
    var objA = Object.create({}, 
       { "objA": { foo: 'foo' }
       } // Object with its property foo.
    );

    var objB = objA;
    objB.foo = 'bar';

    delete objA.foo;

    console.log(objA.foo);
    console.log(objB.foo);
 }());

I hope this helps you out! If you need me to elucidate, I can do so tomorrow.

Here is the Mozilla link, for further reading: Object.create()

(function() {
  var objA = Object.create({
    foo: 'foo'
  }); //1
  var objB = objA //2
  //console.log(objA.hasOwnProperty("foo")) //returns false
  objB.foo = 'bar' //3
  //console.log(objA.hasOwnProperty("foo")) //returns true
  delete objA.foo //4
  console.log(objA.foo) //5
}());

1. In first step, we create an object using Object.create() method. Object.create() method creates a new object with the specified prototype object and the mentioned properties are inside prototype object, not in the object itself.
2. The property foo is not in objA, it is present inside the prototype of objA.
3. We assign the objA to objB, now both variables points to same object. And we create a new foo property in the object. This foo property is different from the foo property inside the prototype object.
4. When we delete the foo property in the objA we are just deleting the property we later added. The foo property inside prototype object is still available and takes over when the foo property is deleted from the object itself.