Avoiding Mutation Exercise

[00:00:00]
>> In our next exercise, we're going to wrap our heads around how we can avoid mutation in our code. And we're gonna look at a couple of libraries for using those types of immutable data structures in JavaScript. Because like I said, we have a great functional programming community in JavaScript.

[00:00:20]
And part of the benefit of that, is that we have some awesome tool, and awesome libraries, for doing things like working with immutable data. So we have got another exercise here avoiding mutation. Again, you can find it in that collection, all linked from the overview document. And in this exercise, we're going to be going through and, first of all thinking, about some array operations in JavaScript.

[00:00:49]
That unlike MapReduce, and filter and whatnot, actually do mutate their original arrays. So I'm thinking of things like push and pop. And then there's also the case of, of when we update a single element in an array by, let's saying array, square brackets two equals new value. So in these exercises, you're going to be implementing your own versions of functions to replace those mutating built in JavaScript array operations.

[00:01:23]
So we're going to go through those. And again, you look for those little tadas to pass. And we're going to check that again that those arrays haven't been changed after you've done things to them. We're going to define a push function to replace array.push, we're gonna define an update function to replace that index assignment.

[00:01:42]
And then we're going to replace a pop method with the pop function. So we're going to go through and fill those out. And then as a challenge you can also think about other array operations that you use a lot, other array methods that you use a lot that are actually mutating the change data in place.

[00:02:03]
And I highly recommend if you want to read up on which of the JavaScript array methods change the array that they're operating on versus which do not. Check out the resources on Mozilla Developer Network, MDN. They're really great for describing all the individual array methods and you can check there if you're not sure if a method is mutating or not.

[00:02:25]
So that's a little challenge that you can think about afterwards. And then we mentioned those immutable data structures that use that structural sharing to give us efficient copying. Because we're always returning new copies of all this data since we're not mutating it anymore. And to have those libraries, Immutable js, and Immer are very popular for working with these type of data structures in JavaScript.

[00:02:50]
So what I've got here is some example code to show you a little bit of what it feels like to work with those libraries. This is all live JavaScript code, so we're actually requiring those libraries right into our observable notebook here. So you can work with them, so feel free to read through this and play with those cells, write new cells, try these out.

[00:03:13]
There are links to the documentation for these libraries. So we're not going to be necessarily implementing any code here but just understanding what it feels like to work with a couple of these immutable data structure libraries. And some reflection questions for which ones you find most easy and friendly and fun perhaps to work with.

[00:03:33]
Because they have different APIs, different kinds of ways that you'll work with data in them. So just a little bit of exploratory time to check out two of those libraries. And also to think about how we can replace some of those mutating array methods with non mutating ones.