Check out a free preview of the full The Hard Parts of Functional JavaScript course

The "Immutability" Lesson is part of the full, The Hard Parts of Functional JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

Will defines immutability as not mutating any data where it is past by reference, and goes over an example.

Preview
Close

Transcript from the "Immutability" Lesson

[00:00:00]
>> Will Sentance: This is a side effect. It's a consequence of the function. And remember, this is especially bad because the running of this function, it's only consequence must be this portion here literally becomes the number 10. Meaning, we use that fact here, right? And we use that result into the running of the next function in this case of divided by 5.

[00:00:22]
If instead running add 3, in that case it was with the input of 22 by that point, if you remember. Add 3 [INAUDIBLE]. If we had this add three function also have a global state consequences, a consequence for our global memory. Again, I'm already repeating the same thing, you already got it.

[00:00:42]
But if you had a global effect, that add three function isn't add three, it's add three plus mystery stuff. And our notion of our line of add three here being truly self contained and it's only consequence being the line below. And all of the lines having zero dependency relation to it, they don't depend on it at all, completely collapses.

[00:01:04]
And we're back to the world of every single line, I need to check exactly what it's doing and compare whether it has any effect or dependency of any other line in the code. And the whole thing's collapsed.
>> Will Sentance: If my function is able to have these consequences outside of its own line.

[00:01:18]
And if it's referring to something's that's on its local memory in that line, especially in the short functions is one line but not as local memory. It's impure, it destroys our whole model here. Let me have thumbs at this point cuz I don't want to keep repeating that in different ways if people got it from just that.

[00:01:35]
You lost me, clear, clarification. It's okay. Okay, some people aren't clear on it. All right, I sometimes over dwell on this. Okay, so we need functions that are pure, only consequence being their return value. Well if that's the case, let's just make sure we have no side effects.

[00:01:54]
There may be a side effect you've missed. And it relies on the fact that, if we want the only consequence in that to be on that line and to achieve reference to transparency, I can replace the function output and it's the same, then I need to, my function is pure.

[00:02:11]
I need to preserve my data and not manipulate it at all. Here's the problem you might have missed, a side effect that you didn't realize. And it's related to the fact that JavaScript passes when it executes a function, so here we're gonna have array 1, 2, 3. Model number two is a function.

[00:02:30]
We're gonna run map on that array 1, 2, 3, which would run probably by two on the one, more two on to two, more by two on to three, and store them in a new array for good reason. Because the array 1, 2, 3 that gets thrown into map is not copying that array 1, 2, 3 into maps execution context.

[00:02:56]
In fact, it's just linking back to the originally globally saved version. Meaning, if inside of map you start altering the array that's being also passed in, you're altering the array out in global. And now suddenly your line that you think is nice and clean and has no effects outside of it, is actually via your input of that line.

[00:03:21]
Having global effects, having effects that could have consequences for every other line in your code base. If map did not work the way it does by inside of it not mutating, not changing the input array 1,2, 3 but instead creating a brand new array taking our elements, doubling them, sticking those in the array, then this would not be true.

[00:03:46]
We would not get the same behavior by using the same line of code. We would get 2, 4, 6 and then I guess we'd get in the next slide if it use the same array. We'd get what, Seth? David Duke?
>> David: 4, 8, 12.
>> Will Sentance: Exactly, 4, 8, 12, exactly.

[00:04:03]
If we mutate the input array of our function, it's not pure, it's unpredictable. I can't figure out what it does just by reading it and looking at its output there in that line. And undoes all our hard work, because if we mutate the array, we change the array that we threw into map, let's diagram it for a second.

[00:04:21]
We've run out of space here. This is the last thing we're gonna do on this whole set. Let's just diagram this here. Well, let's just write it out. This is the last piece of this section before you have to prepare for programming. Anna, line one, what are we doing?

[00:04:39]
>> Anna: We are declaring an array of 1, 2, 3.
>> Will Sentance: 1, 2, 3, excellent. Next line, Alex?
>> Alex: Declaring a function, they will multiply by 2.
>> Will Sentance: Thank you, Alex. I'm very glad you said function as well, exactly. Said 2, [INAUDIBLE]. [SOUND] You got that fine. Next line, Charles?

[00:05:05]
>> Charles: Declaring our result.
>> Will Sentance: Okay. And so we do result is .array 1, 2, 3 don't map, which we remember now is the function that takes each element of our array. Creates a brand new array, creates a array, creates a brand new array inside of itself applies to each element of the array one, then two, then three.

[00:05:33]
And takes those single element, and there by the way not passed around by reference to their original birth version. They're passed around by just copying them in memory. As a value, they're not copied, they're just saved as a new value. And we double inside of this map, we create a new array into which the 1, 2, 3, we take each one and multiply it by 2.

[00:06:02]
If we did not, if instead we altered the input array, the array that gets thrown in, we would be altering this array. Meaning, this line here would be having influence on all other lines. Cuz any other line in my code, I can refer to this array. Meaning, it becomes dependent on my running of array.map if map did not work the way we wanted it to.

[00:06:26]
And instead mutated the input one, two, three, meaning we are determined in order to make sure every line of code we run is self contained on that line only to not mutate any data where it is passed by reference, by a link back to its original version. And it's that little hidden thing where we might otherwise break our pure function rules without even realizing it.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now