Avoiding object mutation

Question

I am working with React and ES6. So I arrivied to the following case: I have an state with an array of objects suppose a = [{id: 1, value: 1}, {id: 2, value: 2}] in the state of Object A, then I pass the list to Object B by props, Object B (in the constructor) copy the list to its own state and call a function which is using map function where I return b = [{id: 1, value: 1, text: 'foo'}, {id: 2, value: 2, text: 'foo'}] (added (text, value) to each object), so it though it was not mutating a in Object A but it was.

So I made some tests:

const a = [{id: 1, value: 1}, {id: 2, value: 2}] // suppose it is in object A

addText = (list) => {
    return list.map((item) => {item.text = "foo"; return item})
}

const b = addText(a) // suppose it is in object B

so under my assumption a !== b, but a was mutated by addText, so they were equal.

In a large scale project programmers make mistakes (I did here!) how it is supposed to be handled this kind of situations to avoid mutating objects in this way? (The example tries to represet a as an state for Object A which is a component from React)

You could deep copy the list so that new list does not have references to old list. — Jesvin Jose
– Jesvin Jose, Commented Feb 23, 2017 at 13:24
FWIW: I would not expect a copy when I call a function named addText. And imho that's part of the problem. You even write "added (text, value) to each object". That is mutation. Therefore it's hard to understand when you conclude _"so it though it was not mutating". — a better oliver
– a better oliver, Commented Feb 23, 2017 at 13:45
@zeroflagL I concluded that because I was mutating inside Object B and I supposed it was outside the scope of Object A, but sure you're right, that's why I said "programmers make mistakes" I did that one, so I wanted to know how to avoid this behavior for other programmers. — FacundoGFlores
– FacundoGFlores, Commented Feb 23, 2017 at 14:00
There is a great quote: "There are only two hard things in Computer Science: cache invalidation and naming things." My point was, that if the function was named e.g. "createClonesWithText" chances are that you wouldn't have made that mistake. And to be honest: map implies returning a new value. So I don't expect this very mistake to come up often. The only way to definitely prevent the mistake is to make the objects in a immutable. A more sensible solution would be to pass a copy to addText in the first place. — a better oliver
– a better oliver, Commented Feb 23, 2017 at 14:19

Andy_D · Accepted Answer · 2017-02-23 13:41:18Z

5

If your change to the object is really that shallow (at the top level of the object), you can use Object.assign({}, oldObj, newObj), or if you have the Object spread proposal enabled in babel, { ...oldObj, newThing: 'thing' }

To enforce this on a team, you could use this ESLint plugin https://github.com/jhusain/eslint-plugin-immutable with the no-mutation rule enabled.

edited Feb 23, 2017 at 13:41

answered Feb 23, 2017 at 13:24

Andy_D

4,22829 silver badges19 bronze badges

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

5 Comments

FacundoGFlores Over a year ago

Thank you, I ended using Object.assign() but is it possible to force all programmers in a team using it to prevent mutations?

Andy_D Over a year ago

Added a suggestion for that to the answer.

FacundoGFlores Over a year ago

I added the ESLint plugin to the project but I have problems with CustomComponent.propTypes ESLint is linting "No object mutation allowed", but it is a React's thing, any idea about applying this linter on React projects?

Andy_D Over a year ago

You could always disable the rule on each propTypes declaration. Or check out the source of the plugin and add a an option to ignore propTypes mutations.

Banoona Over a year ago

you could also check out redux-immutable-state-invariant here github.com/leoasis/redux-immutable-state-invariant (it's middleware for development use, and it enforces immutability)

Advait Junnarkar · Accepted Answer · 2023-01-12 12:03:38Z

By directly referring to item.text you are changing it.

Map iterates over an array. Since your array has objects, unlike primitive values, it doesn't duplicate them in the function scope. Instead, it passes by reference.

The solution is to return new (duplicated) object values whilst iterating in the map function.

const a = [{id: 1, value: 1}, {id: 2, value: 2}]

addText = (list) => {
    return list.map((item) => {
        return {
            ...item,
            text: 'foo',
        };
    })
}

const b = addText(a)

You can simplify the syntax, and reduce indentation, by omitting the return statements as you are using arrow functions anyway.

const a = [{id: 1, value: 1}, {id: 2, value: 2}]

addText = list => list.map(item => ({
    ...item,
    text: 'foo',
}));

const b = addText(a)

Collectives™ on Stack Overflow

Avoiding object mutation

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related