JavaScript - spread and rest syntax to remove specific property from object

Question

I have an object as follows :

let obj = {foo: 1, bar: 2, baz: 3}

I would like to delete a specific property by calling a method that takes as parameter the name of the property to delete

removeProperty(obj, propertyName) {
  let { propertyName, _, ...result } = obj
  return result
}

the problem is that this method only works when we write the name of the property directly in the syntax spead, like: let { bar, _, ...result } = obj .But it does not work by passing it as a parameter, because the syntax spead creates it as a new variable

how can we do that, with another solution if possible except the omit of lodash

Andrew Li · Accepted Answer · 2018-12-13 02:37:23Z

42

You can use computed properties in destructuring:

let obj = {foo: 1, bar: 2, baz: 3}
function removeProperty(obj, propertyName) {
  let { [propertyName]: _, ...result } = obj
  return result
}
console.log(removeProperty(obj, 'foo'));

This will assign the property with the name of the value propertyName to a throwaway variable and essentially remove that key. See the MDN documentation.

edited Dec 13, 2018 at 2:37

answered Dec 13, 2018 at 0:16

Andrew Li

58.1k14 gold badges136 silver badges150 bronze badges

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

4 Comments

Symphony0084 Over a year ago

Why does setting it to an underscore remove it?

Andrew Li Over a year ago

@manley13 It doesn't need to be. The underscore could be anything. It's just convention to use an underscore as a dummy variable in programming since it's not used.

Marc Sloth Eastman Over a year ago

Is this possible if propertyName was an array? Trying to remove multiple computed properties from an object at once

Andrew Li Over a year ago

@MarcSlothEastman Not that I know of. You can use a loop and delete like in the other answer or filter out keys: Object.keys(obj).filter(key => !forbiddenKeys.includes(key)).reduce((acc, key) => ({ ...acc, [key]: obj[key] }), {}) though it's quite a sore on the eyes. It'd be more clear to do the former.

AnonymousSB · Accepted Answer · 2018-12-13 04:06:08Z

10

Another alternative to destructuring would be to use delete. The following solution reduces time-complexity by about 35% compared to destructuring (in Desktop Chrome)

Solution

let obj = {foo: 1, bar: 2, baz: 3}
function removeProperty(obj, propertyName) {
  let newObj = {...obj};
  delete newObj[propertyName];
  return newObj;
}
console.log(removeProperty(obj, 'foo'));

Performance Test

https://jsperf.com/so53753276

The results vary depending upon the browser used. The results are rather intriguing. Desktop Safari destructuring outperforms delete, but Desktop Chrome out performs all numbers from Desktop Safari.

+-----------------------------------+
| Browser | delete    | destructure |
+---------+-----------+-------------+
| Chrome  | 3,229,791 | 1,993,256   |
| Safari  | 1,186,679 | 1,872,396   | 
+---------+-----------+-------------+

The results on iOS are less surprising, as Chrome is just really Safari under the hood.

+-----------------------------------+
| Browser | delete    | destructure |
+---------+-----------+-------------+
| Chrome  | 1,146,496 | 1,785,551   |
| Safari  | 1,182,067 | 1,793,772   | 
+---------+-----------+-------------+

Documentation

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

edited Dec 13, 2018 at 4:06

answered Dec 13, 2018 at 0:31

AnonymousSB

3,58215 silver badges30 bronze badges

2 Comments

Andrew Li Over a year ago

Interestingly on Safari iOS my code runs faster. Cloning then deleteing is 43% slower.

AnonymousSB Over a year ago

@Li357 It does indeed appear that your solution is the most performant overall when weighted against all browsers; however, Desktop Chrome does shockingly outperform everyone when it comes to delete

Vigneshwaran Chandrasekaran · Accepted Answer · 2020-08-06 07:29:13Z

5

values = {
    id: 1,
    name: 'hello world',
    vehicle: 'car',
    time: '3.30 pm',
    date: '02 MAR 1990',
};

const { time, date, ...rest } = values;

now ***...rest*** contains the object values of {
    id: 1,
    name: 'hello world',
    vehicle: 'car',
};

answered Aug 6, 2020 at 7:29

Vigneshwaran Chandrasekaran

3,2931 gold badge29 silver badges21 bronze badges

Collectives™ on Stack Overflow

JavaScript - spread and rest syntax to remove specific property from object

3 Answers 3

4 Comments

Solution

Performance Test

Documentation

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Solution

Performance Test

Documentation

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related