While the idea and visualisation is indeed good, there is an error in the visualization.

Namely, the meaning of “->” is inconsistent. IMO it should be the return value of the function call (like in reverse), but for at least pop, the visualization shows the array instead of the array + return value.

For pop the return value isn’t the array itself, but the popped value: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop

The visualisation could be improved by clarifying, that the array after the function call is visualised. And using -> isn’t the best option IMO, because people expect the right side to contain the return value.

map should probably be blueArr.map(blue => purple) instead of blueArr.map(blue => blue = purple)

This would’ve been much easier to read with plain numbers. Also, easier to read for color blind people.

[1, 2, 3, 4].push(5)             => [1, 2, 3, 4, 5]
[1, 2, 3, 4].unshift(5)          => [5, 1, 2, 3, 4]
[1, 2, 3, 4].pop()               => [1, 2, 3]
[1, 2, 3, 4].shift()             => [2, 3, 4]
[1, 2, 3, 4].map(x => x = 5)     => [5, 5, 5, 5]
[1, 2, 1, 4].filter(x => x == 1) => [1, 1]
[1, 2, 3, 4].reverse()           => [4, 3, 2, 1]
[1, 2, 3, 4].at(2)               => 3
[1, 2, 3, 4].slice(2)            => [3, 4]

Does anyone else dislike the words shift and unshift for that functionality?

Like how the colored shapes make what’s happening clearer.