Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Immutable Operations Demonstration" Lesson is part of the full, Building Awesomer Apps with Angular course featured in this preview video. Here's what you'd learn in this lesson:

Lukas reviews code examples of immutable operations. Lukas takes questions from students.

Get Unlimited Access Now

Transcript from the "Immutable Operations Demonstration" Lesson

[00:00:00]
>> Lucas Ruebbelke: This is a pretty quick module. It's just a few slides, but I wanna put it out there because it is incredibly valuable for moving from this mutable mindset to an immutable mindset. And interestingly enough, once you make that switch mentally, it's just a matter of switching really how you approach these, or kind of the operators that you use.

[00:00:27]
>> Lucas Ruebbelke: So when we look at this code right here, we're using state dot push. So what is happening? It's taking the state collection, if you will, and it's pushing something into it, so it's mutating it. This is a mutable operation.
>> Lucas Ruebbelke: Here's another one. Let's say you have a collection, and you wanna update a specific item in the collection.

[00:00:56] Well, you're basically looping over the state collection, finding the thing that you want, chopping out the old one, putting the new one in, mutable.
>> Lucas Ruebbelke: Same thing for delete. Looping over the collection, finding the thing that you want out, deleting it from the collection, mutable. And so, these are things that I've done for years.

[00:01:20] Things like array.push, that's common. I've probably done this 10,000 times.
>> Lucas Ruebbelke: The problem is, these things mutate the collection or the object that you're working on. And so, the question is, how do we move from mutable to immutable? So there is a really handy method on object called freeze.

[00:01:48] And it's interesting, a lot of people do not talk about it very often, but it's pretty nice. And it's object.freeze. And so essentially what it does is it freezes an object and it prevents stuff from being changed. We can add properties to it, take it away or change existing properties.

[00:02:08] So this is really handy, this is if you use in GRX what they'll do, is actually if you are in development mode, is they will freeze the store, so everything that you do has to be mutable. So this is just kind of, I would say, training wheels, if you will.

[00:02:26] You can use this is a development context of I'm doing these things. And it will catch you, you're mutating the thing, stop doing it. All right, so let's look over create, update and delete. How do we go from mutable to immutable? So kind of a hint to this is, if you go look into MDN, that its pretty clear, kind of the marker here is, instead returns a new something and that's what you want.

[00:03:04] I need to do this thing, give me a new version of it. So in the case of dot push, instead what you do is use concat. And so what it does is it take in existing collection, the item you wanna add and returns them as a new collection.

[00:03:26] And so essentially it used to merge two or more arrays, but it does not change the existing arrays. Super easy, so now what you need to know is that instead of acting on something, you're actually getting something back which then you make an assignment. So, here, kind of shorthand to this, is you can use the spread array, which will expand that, whatever that is into a new array and then add this last piece to it.

[00:03:56] So this is kind of shorthand for this is spread operator and we're dropping in the payload. So with that said, instead of pushing something into array, merge the two arrays together and get a new one. Update, how do you update an item in a collection? Well, first step is with map.

[00:04:25] So if we look at the MDN, the map method creates a new array. And so what it does is it loops over, performs some operation on a collection, and then just returns a new collection. So that's step one is we're getting a new array. We also use object.assign to copy all the innumerable properties off of an object, of one or more objects.

[00:04:47] And then, low and behold it will return the target object. So essentially what we're doing is, we're saying go find the thing you wanna update, use object.assign to create a new version of this, and then return a brand new array that has this new object in it, very easy.

[00:05:11] And last but not least, delete. So, the filter method, let's see it here, creates a new array with all the elements that pass the test. So if you wanna filter something out, well you don't have to delete it, just loop over and just say, this is the criteria in which this thing will get back into the new collection, done.

[00:05:35] Concat, map, filter, and object.assign. That is how you move from mutable to immutable. All right, so with that said, let's just take a quick five minute break. Shake our legs out. And we will come back and talk about reactive forms, yes.
>> Student 1: Does immutability have something to do with the performance of the app?

[00:06:08] Because you are saying that an object is immutable, then you are assigning a new object. Then you edit or copy a value into an object.
>> Lucas Ruebbelke: Mm-hm.
>> Student 1: Actually, the computer is also doing the same thing, right? Because you would have to assign, you are not overwriting an existing value.

[00:06:29] I mean depending upon the language and the permutation, but you're not overwriting an existing value. You are just assigning new memory and then editing.
>> Lucas Ruebbelke: I would say that, and I'm not a computer scientist, I just play one on Frontend Masters. Is that you have multiple objects, or a single object with multiple pointers towards it, so if the pointers are still there, that's one concern.

[00:06:58] And so for instance, so you have the JVM, what's the other one? What's dot net?
>> Student 1: CLR.
>> Lucas Ruebbelke: CLR, and so they're trying to optimize it, and I think they do probably a pretty good job, but at the same time is if you need to undo something, or let's say having to go through and process like what has changed and compare it.

[00:07:29] So, first is in the case of dirty checking. It's much easier to say this thing is clearly different because the pointers have changed.
>> Student 1: Okay.
>> Lucas Ruebbelke: In other words saying, okay, has this changed or not? You're just comparing the pointers. If it is, you just swap them. But and I think one of the problems with AngularJS is in their digest cycle, what they were doing is looping through and comparing every single property.

[00:07:54] And that took a lot of time. So instead of doing a deep comparison, it's much faster to say we know this has changed cuz the pointer's different, and let's just swap it.
>> Lucas Ruebbelke: Does that make sense?
>> Student 1: Yeah, yeah.
>> Lucas Ruebbelke: And so it's kind of counter-intuitive of, wait a second, I'm just returning a new one?

[00:08:13] Isn't that,
>> Lucas Ruebbelke: You're just getting this new thing, and I think people kinda make this mental thing that would be, I take my car in to get a car wash and they just give me a new car. And it's not quite how it works is that, once computers are very efficient.

[00:08:31] But the fact is, we're not having to go through and take two cars and compare them piece by piece by piece, and saying, is anything changed in this car, because if it has, I'm getting the new one. And that's kinda the big difference.