{"id":6691,"date":"2020-04-14T14:59:36","date_gmt":"2020-04-14T14:59:36","guid":{"rendered":"https:\/\/cheesecakelabs.com\/blog\/?p=6691\/"},"modified":"2022-07-01T17:09:14","modified_gmt":"2022-07-01T17:09:14","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 Avoid Mutation<\/span><\/h2>\n

When you work with immutable data you can have some positive impacts like the following:<\/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 avoid mutation.<\/span><\/p>\n

Causing Mutation<\/h2>\n

\"\"<\/p>\n

The following steps will cause mutation into 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 Array<\/h3>\n
Methods that will be used:<\/p>\n