61

I create an object with multiple properties -

var objOpts = {
  option1: 'Option1',
  option2: 'Option2',
  option2: 'Option3'
};

I then add some more properties later on -

objOpts.option4 = 'Option4'
objOpts.option5 = 'Option5'

I'm then done with the two latter created properties ('Option4' & 'Option5') and I want to clear/delete both.

Currently I'd do it like so -

delete objOpts.option4
delete objOpts.option5

Is there another way to go about doing this? Imagine I'd added 5 more properties and needed to clear/delete them all that'd be five lines of almost identical 'delete' code

Improve this question
3
  • 5
    var extraOpts = ['option4','option5','option6','option7','option8']; for(index in extraOpts){ delete objOpts[extraOpts[index]]; } Commented Jul 21, 2014 at 12:05
  • Even better... var extraOpts = {}; extraOpts.options = ['option4','option5','option6','option7','option8']; delete extraOpts.options; console.log(extraOpts.options); Commented Dec 6, 2017 at 8:41
  • there is a small bug in the first answer: 'let' is missing in for loop. It should be: var extraOpts = ['option4','option5','option6','option7','option8']; for(let index in extraOpts){ delete objOpts[extraOpts[index]]; } Commented Jun 2, 2023 at 9:45

8 Answers 8

Reset to default
109

ES6 provides an elegant solution to this: Rest in Object Destructuring:

let { a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 };
console.log(rest); // { c: 30, d: 40 }

Note that this doesn't mutate the original object, but some folks might still find this useful.

Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

very neat answer. a little downside is that eslist warns that a & b are assigned but never used
@AharonOhayon eslint.org/docs/rules/no-unused-vars#ignorerestsiblings could be used to fix that
If you declare the deconstructed obj as a const won't that remove the elist warning?
Projects with ESlint - might complain on unused variables, so you might want to disable the rule before for that specific line
Some linting rules will allow you to denote an unused variable with an underscore like: _var while still allowing you to declare it like so: const { _a, _b, ...rest }. Otherwise you can add this to your eslintrc: "no-unused-vars": ["error", { "varsIgnorePattern": "^_", "argsIgnorePattern": "^_" }] to ignore unused variables or arguments that start with an underscore. I really like the "neat" answer, but as with most neat code it may not be easily understood. You could always wrap it in a named function for better readability though.
51

There is one simple fix using the library lodash.

The _.omit function takes your object and an array of keys that you want to remove and returns a new object with all the properties of the original object except those mentioned in the array.

This is a neat way of removing keys as using this you get a new object and the original object remains untouched. This avoids the problem of mutation where if we removed the keys in the original object all the other parts of code using that object might have a tendency to break or introduce bugs in the code.

Example

var obj = {x:1, y:2, z:3};
var result = _.omit(obj, ['x','y']);
console.log(result);

//Output
result = {z:3};

Link for the documentation of the same Click Here

Improve this answer

Comments

15

I'm sure you are trying to add custom properties to an object.

A simpler way I would suggest is by creating a sub property:

objOpts.custom.option4 = 'Option4'
objOpts.custom.option5 = 'Option5'

this way you could delete objOpts.custom and get done with it. Note that after this step you would have to recreate objOpts.custom = {}.

Moreover this way would also feel closer to OOP, since your public properties would easily be distinguishable from private ones.

If you are beginning with deleting objects in JavaScript, I'd like to point to to an excellently written article on the topic: http://perfectionkills.com/understanding-delete/

You could play around with the meta properties which allow you to protect properties from being deleted etc. (to create an even better coding flow for your case)

EDIT:

I'd like to add that instead of deleting and recreating the property, you could simply say objOpts.custom = {} which would release the option4 and option5 from memory (eventually, via Garbage Collection).

Improve this answer

Comments

11

One way is to create a separate function which takes your object and properties as argument.

Js fiddle example

Code also below:

var objOpts = {
  option1: 'Option1',
  option2: 'Option2',
  option3: 'Option3',
  option4: 'Option4'
};

/** 
 * Method for removing object properties
 *
 */
var removeObjectProperties = function(obj, props) {

    for(var i = 0; i < props.length; i++) {
        if(obj.hasOwnProperty(props[i])) {
            delete obj[props[i]];
        }
    }

};

// remove
removeObjectProperties(objOpts, ["option1", "option2"]);

// objOpts - after
console.log(objOpts);
Improve this answer

2 Comments

The check for obj.hasOwnProperty(props[i]) is not needed, because delete does not require the property to exist.
@mauno-vähä Objects does not have LENGTH prop, I think
8

A more modern method than Mauno Vänä:

function deleteProps (obj, prop) {
    for (const p of prop) {
       delete obj[p];
    }    
}

Example:

// Create sample object
const myObject = {
    a: 'Foo',
    b: 'Baa',
    c: 'Baz'
};

// Prints: {a: "Foo", b: "Baa", c: "Baz"}
console.log(myObject);

// Delete props
deleteProps(myObject, ['a', 'b']);

// Prints: {c: "Baz"}
console.log(myObject);
Improve this answer

1 Comment

The check for (p in obj) is not needed, because delete does not require the property to exist.
0 
var obj = {"key1":1,"key2":2,"key3":3,"key4":4};

if (!('multidelete' in Object.prototype)) {
Object.defineProperty(Object.prototype, 'multidelete', {
    value: function () {
        for (var i = 0; i < arguments.length; i++) {
            delete this[arguments[i]];
        }
    }
});
}

obj.multidelete("key1","key3");

You can use it like this to delete multiple keys in object

Improve this answer

Comments

0

One aditionnal otpion would be to use Object.assign to set the properties to either null or undefined depending on your use case. This does not delete the properties but clears them. So you would do either of these :

// Modify the object directly
Object.assign(objOpts, {option4: null, option5: null});

OR

// Create a copy of the object with the properties cleared 
const newObject = Object.assign({}, objOpts, {option4: null, option5: null});

You could also use an array to list the properties to clear with Array.reduce() to create the last param of Object.assign().

Improve this answer

Comments

-1 
Object.keys(object).forEach((prop) => delete object[prop]);
Improve this answer

4 Comments

How does this differ from delete object ?
You cannot call delete on an object. delete can be used to delete the property of an object, not the object itself.
How does this allow one to delete specific properties instead of all properties?
This seems to be a solution for how to delete all of an object's properties, leaving you with object === {}. This in no ways answers the OP's question.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.