Categories
javascript object oop properties

How do I remove a property from a JavaScript object?

7077

Given an object:

let myObject = {
  "ircEvent": "PRIVMSG",
  "method": "newURI",
  "regex": "^http://.*"
};

How do I remove the property regex to end up with the following myObject?

let myObject = {
  "ircEvent": "PRIVMSG",
  "method": "newURI"
};

0

    9409

    To remove a property from an object (mutating the object), you can do it like this:

    delete myObject.regex;
    // or,
    delete myObject['regex'];
    // or,
    var prop = "regex";
    delete myObject[prop];
    

    Demo

    var myObject = {
        "ircEvent": "PRIVMSG",
        "method": "newURI",
        "regex": "^http://.*"
    };
    delete myObject.regex;
    
    console.log(myObject);

    For anyone interested in reading more about it, Stack Overflow user kangax has written an incredibly in-depth blog post about the delete statement on their blog, Understanding delete. It is highly recommended.

    If you’d like a new object with all the keys of the original except some, you could use destructuring.

    Demo

    let myObject = {
      "ircEvent": "PRIVMSG",
      "method": "newURI",
      "regex": "^http://.*"
    };
    
    const {regex, ...newObj} = myObject;
    
    console.log(newObj);   // has no 'regex' key
    console.log(myObject); // remains unchanged

    6

    • 11

      This is a nice way to do it, but only good if you’re actually going to use regex, otherwise eslint will complain about an unused variable.

      – Loolooii

      Jun 11, 2021 at 14:45

    • 1

      @Loolooii you can rename the variable in your destructuring assignment to meet your argsIgnorePattern in the no-unused-vars rule. Easy problem to solve.

      – PartyLich

      Jul 27, 2021 at 16:29

    • 2

      The problem I’ve had with this approach is that if the destructing is inside a conditional, it makes ESlint go bonkers.

      – ankush981

      Aug 24, 2021 at 21:56

    • 2

      Article is gone – so sad when good content goes away, glad we have the wayback machine: web.archive.org/web/20210224201033/http://perfectionkills.com/… 🙂

      Dec 4, 2021 at 8:03

    • 1

      Understanding delete article: I found the URL perfectionkills.com/understanding-delete works (without the last slash)

      – kca

      Dec 6, 2021 at 13:55

    1070

    Objects in JavaScript can be thought of as maps between keys and values. The delete operator is used to remove these keys, more commonly known as object properties, one at a time.

    var obj = {
      myProperty: 1    
    }
    console.log(obj.hasOwnProperty('myProperty')) // true
    delete obj.myProperty
    console.log(obj.hasOwnProperty('myProperty')) // false

    The delete operator does not directly free memory, and it differs from simply assigning the value of null or undefined to a property, in that the property itself is removed from the object. Note that if the value of a deleted property was a reference type (an object), and another part of your program still holds a reference to that object, then that object will, of course, not be garbage collected until all references to it have disappeared.

    delete will only work on properties whose descriptor marks them as configurable.

    0

      327

      Old question, modern answer. Using object destructuring, an ECMAScript 6 feature, it’s as simple as:

      const { a, ...rest } = { a: 1, b: 2, c: 3 };
      

      Or with the questions sample:

      const myObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"};
      const { regex, ...newObject } = myObject;
      console.log(newObject);
      

      You can see it in action in the Babel try-out editor.


      Edit:

      To reassign to the same variable, use a let:

      let myObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"};
      ({ regex, ...myObject } = myObject);
      console.log(myObject);
      

      5

      • How do I destructure if the property name varies, i.e if I have it in a variable?

        – Ceres

        Sep 14, 2021 at 18:02

      • See this answer below; stackoverflow.com/a/52301527

        – Koen.

        Sep 15, 2021 at 19:48

      • Why is this preferable to delete()? “modern” isn’t really a reason…

        Jan 1 at 4:52

      • I’m not saying it is, I’m provinding an alternative. Although delete used to have some performance implications, which I think are already described in other answers on this page.

        – Koen.

        Jan 2 at 8:26

      • 1

        @GreenAsJade One big reason why you would prefer this is because it does not mutate the original object. Very important with frameworks like React. I was actually looking through for an answer that does not mutate the original object.

        – Silidrone

        Jul 14 at 15:09