Immutable JavaScript or: How I Learned to Stop Worrying and Love Shallow Copies

Objects are the best and worst part of JavaScript.

The best:

1. Objects are general-purpose and can be used in many different ways:
   • Simple key-value stores { alice: 1, bob: 2 }
   • Arrays [1, 2]
   • Algebraic data types { type: "wizard", points: 1 }
   • OOP objects { name: "alice", points: 1, addPoint() { this.points += 1; } }
2. Objects have a plethora of ergonomic features:
   • Dot notation player1.points
   • Bracket notation players["alice"]
   • Indexing players[0]
   • Spread syntax { ...player1, points: 0 }
   • Computed property names { ...players, [getPlayer()]: 0 }
   • Methods { getPoints() { return this.points; } }
3. Objects work incredibly well with TypeScript:
   • Keyof operator keyof Player
   • Indexed access types Player["points"]
   • Mapped types { [key: string]: number }
   • Intersection types { name: string } & { points: number }
   • The Extract type Extract<Player, { type: "wizard" }>
   • Read-only types Readonly<Player>

The worst:

1. Objects are mutable
2. Objects are references

For example:

const addPoint = player => {
  player.points += 1;
  return player;
}

const player1 = { points: 1 };

// OK, we declared it like that
console.log(player1); // { points: 1 }

// OK, this is intended by the function
console.log(addPoint(player1)); // { points: 2 }

// !?
console.log(player1); // { points: 2 }

What's wrong with this?

• Functions give results by returning and mutating. This is a design flaw that results in awkward functions and inconsistent APIs.
• Mutation doesn't compose. For example: addPoint(addPoint(player1)). If addPoint just mutates its argument, this doesn't work. If addPoint mutates and returns, then we have one of those awkward functions. But if addPoint is pure, composition is effortless.
• Our old information is destroyed. If we want to access the previous state of our object, we have to defensively copy it. In JavaScript, this is no fun.¹
• Mutation gets harder to track as control flow becomes more complex. Mutating an object is fine as a quick hack, but eventually that object gets shared around, the call stack grows and things become very difficult to reason about.

const player1 = { points: 1, levels: { magic: 1 } };
const player2 = { ...player1, points: player1.points + 1 };