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' }
Hit the Subscribe button for the latest news on my tools. No spam. Ever!
© 2020 Nguyen Huu Phuoc. All rights reserved