How to remove a property from objects in JavaScript? [Answered]

Sample query:

Say I create an object as follows:

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

How should I remove the property regex to end up with new myObject as follows?

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

How to remove a property from objects in JavaScript? Answer #1:

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

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

Example:

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

const {regex, ...newObj} = myObject;

console.log(newObj);   // has no 'regex' key
console.log(myObject); // remains unchanged

Answer #2:

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.

Answer #3:

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

console.log ( myObject.regex); // logs: undefined

This works in Firefox and Internet Explorer, and I think it works in all others.

Answer #4:

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

Edit:

To reassign to the same variable, use a let:

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

Removing properties from objects in JavaScript- Answer #5:

The delete operator is used to remove properties from objects.

const obj = { foo: "bar" }
delete obj.foo
obj.hasOwnProperty("foo") // false

Note that, for arrays, this is not the same as removing an element. To remove an element from an array, use Array#splice or Array#pop. For example:

arr // [0, 1, 2, 3, 4]
arr.splice(3,1); // 3
arr // [0, 1, 2, 4]

Details

delete in JavaScript has a different function to that of the keyword in C and C++: it does not directly free memory. Instead, its sole purpose is to remove properties from objects.

For arrays, deleting a property corresponding to an index, creates a sparse array (ie. an array with a “hole” in it). Most browsers represent these missing array indices as “empty”.

var array = [0, 1, 2, 3]
delete array[2] // [0, 1, empty, 3]

Note that delete does not relocate array[3] into array[2].

Different built-in functions in JavaScript handle sparse arrays differently.

  • for...in will skip the empty index completely.
  • A traditional for loop will return undefined for the value at the index.
  • Any method using Symbol.iterator will return undefined for the value at the index.
  • forEachmap and reduce will simply skip the missing index.

So, the delete operator should not be used for the common use-case of removing elements from an array. Arrays have a dedicated methods for removing elements and reallocating memory: Array#splice() and Array#pop.

Array#splice(start[, deleteCount[, item1[, item2[, …]]]])

Array#splice mutates the array, and returns any removed indices. deleteCount elements are removed from index start, and item1, item2... itemN are inserted into the array from index start. If deleteCount is omitted then elements from startIndex are removed to the end of the array.

let a = [0,1,2,3,4]
a.splice(2,2) // returns the removed elements [2,3]
// ...and `a` is now [0,1,4]

There is also a similarly named, but different, function on Array.prototypeArray#slice.

Array#slice([begin[, end]])

Array#slice is non-destructive, and returns a new array containing the indicated indices from start to end. If end is left unspecified, it defaults to the end of the array. If end is positive, it specifies the zero-based non-inclusive index to stop at. If end is negative it, it specifies the index to stop at by counting back from the end of the array (eg. -1 will omit the final index). If end <= start, the result is an empty array.

let a = [0,1,2,3,4]
let slices = [
    a.slice(0,2),
    a.slice(2,2),
    a.slice(2,3),
    a.slice(2,5) ]

//   a           [0,1,2,3,4]
//   slices[0]   [0 1]- - -   
//   slices[1]    - - - - -
//   slices[2]    - -[3]- -
//   slices[3]    - -[2 4 5]

Array#pop

Array#pop removes the last element from an array, and returns that element. This operation changes the length of the array.

Answer #6:

Spread Syntax (ES6)

In case you want to remove a dynamic variable using the spread syntax, you can do it like so:

const key = 'a';

const { [key]: foo, ...rest } = { a: 1, b: 2, c: 3 };

console.log(foo);  // 1
console.log(rest); // { b: 2, c: 3 }

foo will be a new variable with the value of a (which is 1).

Extended answer 😇

There are a few common ways to remove a property from an object.
Each one has its own pros and cons (check this performance comparison):

Delete Operator

It is readable and short, however, it might not be the best choice if you are operating on a large number of objects as its performance is not optimized.

delete obj[key];

Reassignment

It is more than two times faster than delete, however, the property is not deleted and can be iterated.

obj[key] = null;
obj[key] = false;
obj[key] = undefined;

Spread Operator

This ES6 operator allows us to return a brand new object, excluding any properties, without mutating the existing object. The downside is that it has the worse performance out of the above and is not suggested to be used when you need to remove many properties at a time.

{ [key]: val, ...rest } = obj;

Answer #7:

Another alternative is to use the Underscore.js library.

Note that _.pick() and _.omit() both return a copy of the object and don’t directly modify the original object. Assigning the result to the original object should do the trick (not shown).

Reference: link _.pick(object, *keys)

Return a copy of the object, filtered to only have values for the whitelisted keys (or array of valid keys).

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

_.pick(myJSONObject, "ircEvent", "method");
=> {"ircEvent": "PRIVMSG", "method": "newURI"};

Reference: link _.omit(object, *keys)

Return a copy of the object, filtered to omit the blacklisted keys (or array of keys).

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

_.omit(myJSONObject, "regex");
=> {"ircEvent": "PRIVMSG", "method": "newURI"};

For arrays, _.filter() and _.reject() can be used in a similar manner.

Answer #8:

To clone an object without a property:

For example:

let object = { a: 1, b: 2, c: 3 };

And we need to delete a.

  1. With an explicit prop key:const { a, ...rest } = object; object = rest;
  2. With a variable prop key:const propKey = 'a'; const { [propKey]: propValue, ...rest } = object; object = rest;
  3. A cool arrow function 😎: const removeProperty = (propKey, { [propKey]: propValue, ...rest }) => rest; object = removeProperty('a', object);
  4. For multiple propertiesconst removeProperties = (object, ...keys) => (keys.length ? removeProperties(removeProperty(keys.pop(), object), ...keys) : object);

Usage

object = removeProperties(object, 'a', 'b') // result => { c: 3 }

Or

    const propsToRemove = ['a', 'b']
    object = removeProperties(object, ...propsToRemove) // result => { c: 3 }

Answer #9:

The term you have used in your question title, Remove a property from a JavaScript object, can be interpreted in some different ways. The one is to remove it for whole the memory and the list of object keys or the other is just to remove it from your object. As it has been mentioned in some other answers, the delete keyword is the main part. Let’s say you have your object like:

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

If you do:

console.log(Object.keys(myJSONObject));

the result would be:

["ircEvent", "method", "regex"]

You can delete that specific key from your object keys like:

delete myJSONObject["regex"];

Then your objects key using Object.keys(myJSONObject) would be:

["ircEvent", "method"]

But the point is if you care about memory and you want to whole the object gets removed from the memory, it is recommended to set it to null before you delete the key:

myJSONObject["regex"] = null;
delete myJSONObject["regex"];

The other important point here is to be careful about your other references to the same object. For instance, if you create a variable like:

var regex = myJSONObject["regex"];

Or add it as a new pointer to another object like:

var myOtherObject = {};
myOtherObject["regex"] = myJSONObject["regex"];

Then even if you remove it from your object myJSONObject, that specific object won’t get deleted from the memory, since the regex variable and myOtherObject["regex"] still have their values. Then how could we remove the object from the memory for sure?

The answer would be to delete all the references you have in your code, pointed to that very object and also not use var statements to create new references to that object. This last point regarding var statements, is one of the most crucial issues that we are usually faced with, because using var statements would prevent the created object from getting removed.

Which means in this case you won’t be able to remove that object because you have created the regex variable via a var statement, and if you do:

delete regex; //False

The result would be false, which means that your delete statement haven’t been executed as you expected. But if you had not created that variable before, and you only had myOtherObject["regex"] as your last existing reference, you could have done this just by removing it like:

myOtherObject["regex"] = null;
delete myOtherObject["regex"];

In other words, a JavaScript object gets killed as soon as there is no reference left in your code pointed to that object.

Hope you learned something from this post.

Follow Programming Articles for more!

About ᴾᴿᴼᵍʳᵃᵐᵐᵉʳ

Linux and Python enthusiast, in love with open source since 2014, Writer at programming-articles.com, India.

View all posts by ᴾᴿᴼᵍʳᵃᵐᵐᵉʳ →