How to destructure an object based on a dynamic defined variable

Question

I am working with an immutable object that I need to add subtract an array of values from.

I know it's possible using ES6 destructing with the following.

const {countries, remainder} = someObj // {countries:...,languages:..., ...keys};

This will end me up with the remainder being the new Object without the countries key.

Therefore I figured out that I could use reduce on an array to go through and remove all the values from the object, returning a new object in the end, using the default parameter, being the original object.

However, I am not sure how to go about it, because the names of keys are defined in the array.

arrayToRemove.reduce((total, value) => {
  const { extractValue: [value], ...remainder } = total
  return remainder;
}, { ...originalObj });

arrayToRemove.reduce((total, value) => {
  const { [extractValue], ...remainder } = total
  return remainder;
}, { ...originalObj });

I am expecting to end up with a new Object without the keys that are contained in the array called arrayToRemove.

I need to do this while maintaining immutability, so I cannot just loop through the original object and remove them from it, so I thought the above would be a bright way to go about it.

Any help is appreciated.

const originalObj = {countries:[], language:"",food:[],drinks:[]} const arrayToRemove = ["countries","food"] const newObj = arrayToRemove.reduce((total, value) => { const { extractValue: [value], ...remainder } = total return remainder }, { ...originalObj }) — Vincent Rye
– Vincent Rye, Commented Jan 6, 2019 at 19:04
You need to use ...remainder to get the rest of the object properties. — Cameron Martin
– Cameron Martin, Commented Jan 6, 2019 at 19:04
as exampled in the above code example, I am using ...remainder, the problem is that I need to extract one key from it, so ...remainder contains only the remainder — Vincent Rye
– Vincent Rye, Commented Jan 6, 2019 at 19:06
"I need to do this while maintaining immutability, so I cannot just loop through the original object and remove them from it" How about let result = {}; for(let key in originalObj) if(!arrayToRemove.includes(key)) result[key] = originalObj[key]; The downside of the solution using object destructuring is that for each property you "remove" you create a new object where all the remaining properties are copied to. And all, except for the last of these objects, are immediately thrown away. — Thomas
– Thomas, Commented Jan 6, 2019 at 19:55

Nina Scholz · Accepted Answer · 2019-01-06 19:09:02Z

9

You could use a computed property names with a dummy as target property.

Read more here: object property assignment pattern [YDKJS: ES6 & Beyond]

var originalObj = { foo: 1, bar: 2, baz: 3, },
    arrayToRemove = ['foo', 'bar'],
    result = arrayToRemove.reduce((total, key) => {
        const { [key]: dummy, ...remainder } = total;
        return remainder;
    }, originalObj);


console.log(result);

edited Jan 6, 2019 at 19:09

answered Jan 6, 2019 at 19:05

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

1 Comment

Vincent Rye Over a year ago

THIS IS EXACTLY, what I am trying to achieve. The solution was my first second idea, with a dummy value, I didn't know I could do that.

Cameron Martin · Accepted Answer · 2019-01-06 19:07:07Z

5

arrayToRemove.reduce((obj, key) => {
  const { [key]: value, ...remainder } = obj
  return remainder
}, originalObj)

answered Jan 6, 2019 at 19:07

Cameron Martin

6,0102 gold badges45 silver badges55 bronze badges

Collectives™ on Stack Overflow

How to destructure an object based on a dynamic defined variable

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related