Don't mutate

To mutate means to change in form or nature. To understand mutation, think of X-Men. In X-Men, people can gain powers suddenly. You won’t know when it’s going to happen. Imagine if a close friend next to you grows fur and turns blue all of a sudden. Wouldn’t it be scary?

In JavaScript, the same problem with mutations apply. If your code is mutable (can mutate), you might change (and break) something without knowing about it.

What is mutable, what is not?

Objects are mutable. Primitives are not.

You can change the properties of an object after it is created, but you cannot change the properties of a primitive.

// Objects can mutate
const egg = { name: 'Humpty Dumpty' }
egg.isBroken = false

console.log(egg.name) // Humpty Dumpty
console.log(egg.isBroken) // false

// But primitives cannot mutate
const egg = 'Humpty Dumpty'
egg.isBroken = false

console.log(egg) // Humpty Dumpty
console.log(egg.isBroken) // undefined

Why mutation can be scary

When you change an object, you can change the external state without you knowing. Look at the following code to see an example on how this might happen:

const egg = { name: 'Humpty Dumpty' }

function breakNewEgg(egg) {
  const newEgg = egg
  newEgg.isBroken = true
}

breakNewEgg(egg)
console.log(egg.isBroken) // true

In breakNewEgg, we created a new variable, newEgg. Then, we mutate newEgg to include the isBroken property.

You can see that the original egg variable has changed even though we did not touch it. This is why mutation can be scary—you can change something without knowing.

Objects are passed as references

When you create an object, you create an “identity card” for the object. When you assign the object to a variable, you link this variable to this identity card. This is called “passing by reference”.

When you assign the object to another variable, you link the variable to the same identity card.

When you assign egg to a new variable, newEgg, newEgg points to the same object as egg. Since both variables point to the same identity card, it’s not a surprise that egg changes when newEgg changes.

Primitives are passed as values

When you declare a primitive, JavaScript does a similar thing. It creates a primitive and links the primitive to the variable.

But when you assign the same primitive to another variable, JavaScript creates another primitive and links the new primitive to the new variable.

As a result, we only care about what values primitive takes up. We don’t need to care about their references. This is why primitives are said to be “passed by values” (and also why we don’t have to worry about mutating primitives).

How to prevent mutation

You’ll learn how to prevent objects and arrays (since arrays are objects) from mutating in the next two lessons.