delete operator not deleting object property

Question

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?

Answer 1

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 

Answer 2

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

Answer 3

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.

Answer 4

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()