Javascript: Avoiding Mutations the Easy Way

javascript_avoiding_mutations_the_easy_way.md

JavaScript: Avoiding Mutations the Easy Way

Removing an Element from an Array

// Bad:
list.pop()

// Good:
list.filter(element => element !== 'hi')

Adding an Element to an Array

// Bad:
list.push('hi')

// Good:
[ ...list, 'hi' ]

// Good:
list.concat(['hi'])

Replacing an Element in an Array

// Bad:
list[0] = 'hi'

// Good:
list.map(element => element === 'hi' ? 'bye' : element)

Updating a Property in an Object

// Bad:
person.name = 'Sam'

// Good:
{ ...person, name: 'Sam' }

// Good:
Object.assign({}, person, { name: 'George' })

Adding a Property to an Object

// Bad:
person.age = 30

// Good:
{ ...person, age: 30 }

// Good:
Object.assign({}, person, { age: 30 })

Removing a Property from an Object

// Bad:
delete person.name

// Good (sort of):
{ ...person, age: undefined }

// Good (using lodash):
_.omit(person, 'age')

Resources

• Modern React with Redux by Stephen Grider
• Immutable changes to Objects and Arrays in JavaScript by Ricardo Magalhães
• Redux: Avoiding Array Mutations with concat(), slice(), and ...spread by Dan Abramov