{"id":6691,"date":"2020-04-14T14:59:36","date_gmt":"2020-04-14T14:59:36","guid":{"rendered":"https:\/\/cheesecakelabs.com\/blog\/?p=6691\/"},"modified":"2026-08-15T08:09:06","modified_gmt":"2026-08-15T08:09:06","slug":"avoid-array-mutation","status":"publish","type":"post","link":"https:\/\/cheesecakelabs.com\/blog\/avoid-array-mutation\/","title":{"rendered":"How to Avoid Array Mutation"},"content":{"rendered":"

Originally posted on dev.to<\/a><\/em><\/p>\n

In this article, I’ll focus on showing how to add, edit and remove items in an array causing mutation and non-mutation ways.<\/span><\/p>\n

One thing we need to keep in mind when writing code avoiding mutation is to return a new reference to the data after the update.<\/span><\/p>\n

It’s a common approach when working with functional programming, and if you want to understand some concepts of functional programming, I recommend you read this <\/span>article<\/span><\/a> I wrote some time ago.<\/span><\/p>\n

<\/p>\n

Why should you avoid array mutation?<\/span><\/h2>\n

You should avoid array mutation so that every update returns a new reference to the data instead of changing the array in place. That makes it safe to add, edit, and remove items without breaking code that still holds the original array. Working with immutable data has these positive impacts:<\/span><\/p>\n

– Tracking data without mutation is much better;<\/span><\/p>\n

– Immutable states help you implement unidirectional data flow that helps you handle data;<\/span><\/p>\n

I really recommend you read this <\/span>article<\/span><\/a> to go deeper into why you should avoid mutation.<\/span><\/p>\n

Which array methods cause mutation?<\/h2>\n

\"\"<\/p>\n

Array methods like push(), unshift(), splice(), pop(), and shift() cause mutation because they change the original array in place instead of returning a new one. The steps below cause mutation in the array when adding, removing, and editing elements from `family`.<\/span><\/p>\n

To show an example of mutating, we’ll use the following array:<\/p>\n

const heroesMutate = ['Spider-man', 'Thor', 'Hulk', 'Iron Man'];\nconsole.log(heroesMutate); \/\/ => [\"Spider-man\", \"Thor\", \"Hulk\", \"Iron Man\"]\n<\/code><\/pre>\n
Including in the Array<\/h3>\n
Methods that will be used:<\/p>\n