delete obj.property vs obj.property = undefined

Assume that obj is an object, and property is the name of its property.

Differences

  1. Calling obj.property = undefined sets the value of property to undefined. The property is still there and appears if we iterate the properties of the object.

    let person = { name: 'John' };
    person.name = undefined;

    person.hasOwnProperty('name'); // true
    name in person; // true
    Object.keys(person); // ['name']
    for (let p in person) { console.log(p); } // 'name'

    delete obj.property will remove the property from the object. Let's revisit the sample code above, now with delete person.name:

    let person = { name: 'John' };
    delete person.name;

    person.hasOwnProperty('name'); // false
    name in person; // false
    Object.keys(person); // An empty array

    // Nothing is shown up in the Console
    for (let p in person) { console.log(p); }
  2. delete can't delete an inherited property.

    const car = { branch: "Audi" };

    const a4 = Object.create(car);
    console.log(a4.branch); // 'Audi'

    delete a4.branch;
    console.log(a4.branch); // 'Audi'

    In this case, we have to set the property to undefined:

    a4.branch = undefined;
    console.log(a4.branch); // undefined

Good to know

  1. delete doesn't work with array:

    const array = [1, 2, 3, 4, 5];

    delete array[1];
    console.log(array); // [1, empty, 3, 4, 5]

    If you want to remove an item from an array, use the splice method.

    const array = [1, 2, 3, 4, 5];
    array.splice(2, 1);
    console.log(array); // [1, 2, 4, 5]

    There's an alternative method to remove the last element from array:

    const array = [1, 2, 3, 4, 5];
    array.pop();
    console.log(array); // [1, 2, 3, 4]
  2. We can use the ES6 spread operator to remove a property from an object:

    const { name, ...rest } = { name: 'Foo', age: 20 };

    console.log(name); // 'Foo'
    console.log(rest); // { age: '20' }

    It's also possible to remove a dynamic property:

    const property = 'name';
    const { [property]: value, ...rest } = { name: 'Foo', age: 20 };

    console.log(value); // 'Foo'
    console.log(rest); // { age: '20' }