Today I learned

JavaScript Array Mutation

Today I ~~learned~~ forgot, that the JavaScript array method

Array.prototype.pop()

mutates the original array. This caused me a lot of trouble and some nasty bugs. So here is an example to help you to not make the same mistake!

Let's say we have an array of animals.

const animals = ['dog', 'cat', 'bird', 'alpaca', 'whale']

Now we want to do something with the last element of the array, while also doing something with all animals.

I tried it this way:

const lastAnimal = animals.pop()

What would you expect animals and lastAnimal are referencing now? Take your time and think about it. Don't look!

console.log(animals) // ['dog', 'cat', 'bird', 'alpaca']
console.log(lastAnimal) // whale

Oh no! The pop() method also changed our original array animals and kicked the last element out of it. That's not what we wanted!

A better way to do this is to copy the original array with the spread operator and work on the copy from that on. This prevents mutating the original array.

const colors = ['green', 'blue', 'yellow', 'pink']
const copyOfColors = [...colors] // ['green', 'blue', 'yellow', 'pink']
const lastColor = copyOfColors.pop() // 'pink'

So copying arrays first, when you need to work with them is always a good idea. Hope this helps you!

I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me via Email ↗ Opens in new tab.

If you want to support me, you can buy me a coffee. I would be very happy about it!

I wish you a wonderful day! Marco