Mutation is ok
Tags: typescript, javascript, functional, webdev
Published: 2020-07-06 11:08:44

--- series: It is ok ---

The phrase - "mutation" started to have almost negative connotation in our programming community. It's like something wrong to mutate. As if we mutate we are not writing our beloved functional code anymore. Is mutation so evil? Or maybe some misuses are? Let's dive in.

## Statements
Functional programming is commonly about programming with using expressions only, and expression is something which evaluates to a value, therefore it has no side effects. But what if a function locally uses imperative statements, what can go wrong?

```ts
// expression based
const userName(u: User)  => u.secured ? "No access" : u.name;

// statement based
function userName(u: User) {
  if (u.secured) {
    return "No access";
  } else {
    return u.name;
  }
}
```
Ok so probably most of you don't see issues with both options, even though in the second I have used statements. We can then use statements in functional programming. I hope we agree at this point.

> **Note** I am deliberately using arrow function for expression based as arrow function is an expression, where function declaration is a statement.

## Local mutation

```ts
// declarative / expression based
const removeInactive (users: User[]) => 
  users.filter(user => user.active)

// imperative / statement based
function removeInactive (users: User[]) {
  let newUsers = []
  for (u in users) {
    if (u.active) {
      newUsers.push(u)
    }
  }
  return newUsers;
}
```
Now the code is more controversial. Declarative code is short, has no variables, it is also more readable for anyone having fp basics. The imperative one is longer, has variables and has local mutation.

For sure I would pick the first option if somebody would ask me - which code is better for you. But, if somebody has written the second, then does it create any problems for our code-base? 

Looking from helicopter view on how functions behave, both are
- referential transparency (for the same input gives the same output)
- have no side effects

Looks like from the interface perspective these functions are equivalent, both functions are pure mathematical functions. If some developer would write imperatively such function, and put it into some library, nobody would notice, and even nobody would care. And that is the thing. What is inside this function is - implementation details. 

> **Note** Still if we consider comparison of local complexity there is a clear winner.

## Reduce it
Many say that reduce can be overused, and many times when we use reduce code is just over-complicated. In my experience I have never seen reduce as a problem, but if we start to use it as a hammer, it can start to be a problem.

```ts
// reduce version - declarative
const intoCSV = (users: User[]) => 
   users.reduce((acc, user) => {
     const prefix = acc.length === 0 ? "" : ",";
     return acc + prefix + user.name;
  }
  , "");

// for..of version - imperative
function intoCSV (users: User[]) {
  let csv = "";
  for (const user of users) {
    const prefix = csv.length === 0 ? "" : ",";
    csv = csv + prefix + user.name; 
  }
  return csv;
}

```
In terms of *input -> output* both versions of *intoCSV* are again the same. These are pure functions even though inside of the second there are statements and variables. But readability argument is not so obvious as in previous examples. The reduce version is not far better. I would say there is no clear winner here. 

## Copy or not to copy

```ts
// reduce version - declarative
const intoUsersById = (users: User[]) => 
   users.reduce((acc, user) => ({...acc, [user.id]: user })
  , {} as { [k: number]: User });

// for..of version - imperative
function intoUsersById (users: User[]) {
  let byId: { [k: number]: User } = {};
  for (const user of users) {
    byId[user.id] = user;
  }
  return byId;
}
```
Next example shows another issue with the declarative version. This is also common, overusing copying of the structure. In the example we make a shallow copy of our final object during every "iteration". This has a real impact on the performance. Of course not as we should be very afraid, but if our collection is processed by node.js/deno we should worry. Some more thoughts about this aspect you can find in my previous article [Data mutation in functional JS](https://dev.to/macsikora/data-mutation-in-functional-javascript-1h97).

Still you should not be worried to make a mutation here. Its local not shared variable, nobody can use it until you will be done. Mutation is allowed and preferable in this case. 

> **Note** my point is here not against reduce. I like and use reduce, but we need to understand the trade-off. Also we can make mutation and use reduce.

## Why are people saying mutation is wrong?

First of all people are saying many things, and not all of them are correct 😉. Second of all, we have currently hype for FP, the hype is so strong that some people just go into dark corners of the paradigm, and claim FP supremacy even in places where there are no arguments to prove it. And I am also fan of FP, but I also follow common sense.

And yes if we work with expression based language like Haskell, Elm, PureScript, then we write only expressions and pure functions, but this is exactly how these languages were designed.

In multi-paradigm languages like TypeScript, JavaScript, Java, C# and so on, we should understand that language is not made for some concepts, and also that there are statements and mutations. If we know when it's safe to use that, everything should be ok.

## But when mutation is really wrong?

Everything which does not belong to the function should not be mutated. By "belong" I mean something created inside the body of the function. In other words, we can mutate our local variables, but we should avoid mutation of external state and input arguments. If we follow the rule then mutation should not bite us.

And this concept is commonly known, even [Rust language](https://www.rust-lang.org/) made from this its core concept. Take a look at [borrowing](https://doc.rust-lang.org/book/ch04-02-references-and-borrowing.html).

## Summary

Imperative core, functional shell.. wait what? Yes, so common architecture pattern is *"Functional core, imperative shell"*, and it is about putting side effects to the border. I am starting some mini-series about exactly making such imperative shell [here](https://dev.to/macsikora/a-pinch-of-magic-ejm). But what we are doing in this article is reverse of that, we use micro-mutations in order to produce some data inside pure functions. And don't be afraid to do so, until outside the function is referential transparent everything is good.


If you like this article and want read more from me, follow me on [dev.to](https://dev.to/macsikora) and [twitter](https://twitter.com/macsikora).