Immutability and you: Part 1
Tags: immutability, javascript, beginners
Published: 2020-07-09 15:21:38

## The problem

Consider something like this

```js
const a = [1,2,3];
const b = a;
a.push(4);
console.log(b); // [1,2,3,4]
```

Can you see the problem? You've created an array `a`, then you copied (you **think** you copied) it into `b`, so you legitimately think `a` and `b` are now separate. Then you *mutate* array `a` by pushing a new value into it and then `b` changes as well. Why is that?!

Something like this happened:
- A new array `[1,2,3]` is created inside a place in your RAM memory called *the heap*
- You give this array a *reference* known as `a`, like an address, so that you can later fetch the array value from memory
- You create a new reference `b` by assigning it `a`, so now you have two references that point to the same position in memory (red flag!)
- The `push` method just *mutates* the array value without changing its address, so when you output `b` you see the unexpected. OMG. And it's just 4 lines of code.

The same problem, but with an object

```js
const question = { content: 'What is 6x9?' };
const answer = question;
answer.content = '42.';
console.log(question); // { content: '42.' }
```

When you change the content of the answer by *mutating* it, you change the question too (it's getting deep in here) since `question` and `answer` refer to the same value in memory.

## The solution

So, how to solve the problem? **Immutability**!

If you think about *primitives* in JavaScript, like strings, numbers and booleans, you already know about immutability. Look at this

```js
const a = 10;
const b = a;
// const a = a + 10; // You cannot reassign a const!
```

As you can see, there's no way to actually *mutate* the number `a` and that's because primitives in JavaScript are immutable by default. **Compound** values, on the other hand, like arrays and objects, are mutable. For example, you can add values to arrays with `push` or even re-assign object properties (as in the example above): the values have changed, of course, but the position in memory of the whole array or object is still the same so that every variable that points to that value shares the same value.

Instead of changing just a small part of an array or object, thus *mutating* it, you should replace the whole thing, even if you only changed a single letter. The idea is that values should be like photographs: they're immutable, they represent some point in time and you can take as many as you want, each different even if only by a bit. If you take a bad photo of your kitten doing something funny you just take a new shot.

Updating objects and arrays "immutably" (more on that later) takes a new memory slot in the heap and the old slot just gets automatically captured and erased by a thing called *garbage collector*. The advantage of this is that you avoid the *reference hell* like in the first example, you have better testing, predictability and even *time-traveling debugging*.

Immutability is a key concept of [Redux](https://redux.js.org/), which is a popular state management pattern heavily used in [React](https://react-redux.js.org/) and in [Angular](https://ngrx.io/) too.

## The spread syntax

The [spread syntax](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/Spread_syntax), is, really, just a bunch of dots! It's the main operator you need to finally achieve immutability. What they do is *expanding* what immediately follows them, creating a copy of it. Let's rewrite the first example

```js
const a = [1,2,3];
// const b = a; // <-- We changed this
const b = [...a]; // <-- Into this
a.push(4);
console.log(b); // [1,2,3]
```

What actually happened? Basically, `[...a]` means "create a new array and replace `...a` with all the items inside `a`", so you're effectively creating a *real copy* of `a` which takes a new place in memory, not just a reference to it. That's why `b` is now completely unaffected by whatever you do to `a`.

In part 2 and 3 we'll take a look at how to update arrays and objects with the spread syntax in practice

Photo by [Andrea Ferrario](https://unsplash.com/@andreaferrario) on [Unsplash](https://unsplash.com)