Shared state can interact with just about anything; with side effects. The order of a function call matters which can also arise many bugs within your application.
So how can we write something that has no side effects? Something that won’t change whatever our array is you may ask?
We can copy the array inside our function!
Our global array and the newArray are exactly the same. We are using the concat() method instead of an = which would have given us the reference of the array(remember objects are passed by reference).
Instead of having them both point in the same direction, this way we have a unique copy of the array.
Then newArray.pop() and return newArray allows us to see the original array has not been changed.
Even though we created a new state inside the function, it is still a local variable. We are not changing or modifying anything outside of our scoped world. So because it has no affect on the outside world, we know what we can expect.
.map() returns a copy of the array
None of my arrays have changed. We have three distinct arrays. And all these functions have no side effects. They don’t affect anything that’s outside of their world.
None of the arrays have changed and we now have three unique arrays. Nor do any of these functions have side effects. Meaning they have no affect on anything outside of their scope.
But here is a distinct case:
This cannot be a pure function because console.log() uses the browser to log something to the said browser. Logging something outside its “world” hence modifying something outside of itself. Which is a perfect example of a side effect.