Filter array property of object without mutating the object itself

Question

I would like to filter a property of an object without mutating the object.

let myObject = {
    propA: [1,2,3],
    propB: "foo"
}

Now I would like to do something like:

myObject.propA.filter(el => el === 2)

But this only returns a filtered array and I would have to write

myObject.propA = myObject.propA.filter(el => el === 2)

in order to change my object.

But that's exactly not what I want! I would like to generate a new filtered object without mutating the old one. Could someone help me out?

Just clone the object first?

CertainPerformance
– CertainPerformance

2018-12-11 02:05:35 +00:00
Commented Dec 11, 2018 at 2:05 — CertainPerformance
– CertainPerformance, Commented Dec 11, 2018 at 2:05

Mark · Accepted Answer · 2018-12-11 02:15:14Z

2

You can filter() the array, and then merge it with the original object to create a new one without mutating the original. Something like:

let myObject = {
    propA: [1,2,3],
    propB: "foo"
}
let propA = myObject.propA.filter(el => el === 2)
let newobj = {...myObject, propA}

// new Object
console.log("New:", newobj)

// old object unchanges
console.log("Old:", myObject)

answered Dec 11, 2018 at 2:15

Mark

92.7k8 gold badges116 silver badges156 bronze badges

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

Comments

iwaduarte · Accepted Answer · 2018-12-11 02:21:58Z

1

You could also clone the object and alter only the property of the new object.

let myObject = {
    propA: [1,2,3],
    propB: "foo"
}
let newObject = Object.create(myObject);
newObject.propA = myObject.propA.filter(el=> el ===2);

answered Dec 11, 2018 at 2:21

iwaduarte

1,74919 silver badges26 bronze badges

Comments

Mulan · Accepted Answer · 2018-12-11 03:35:37Z

1

You could write transform using destructuring assignment and spread argument

const transform = ({ a = [], ...rest }) =>
  ({ a: a .filter (el => el === 2)
   , ...rest
   })

const myObject =
  { a: [ 1, 2, 3 ]
  , b: "foo"
  }
   
console .log
  ( transform (myObject)
    // { a: [ 2 ], b: "foo" }
    
  , transform ({ a: [ 1, 2, 1, 2, 1, 2 ], b: "bar", c: "cat" })
    // { a: [ 2, 2, 2 ], b: "bar", c: "cat" }
    
  , transform ({ y: "z" })
    // { a: [], y: "z" }
  )

answered Dec 11, 2018 at 3:35

Mulan

136k35 gold badges240 silver badges276 bronze badges

Collectives™ on Stack Overflow

Filter array property of object without mutating the object itself

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related