Copy Instead of Mutate

[00:00:00]
>> Steve Kinney: And so we do need some approaches for not mutating objects and arrays. To be clear, there are libraries like Immutable JS, Mori, and a whole bunch of other ones that will give you immutable data structures. I've played with all of those, I am usually skeptical to bring them into a large production application.

[00:00:19]
For the reason, basically, that you're adding a layer of complexity, right? Now, there are some things that we're gonna do today that will be a lot easier if we didn't have to de-structure every object and spread every array, right? What we do at Twilio SendGrid is we write some helpers that would do this reliably, cover them with unit tests, right?

[00:00:38]
Because these libraries like Immutable and Mori, they're great every time I've used them. But yeah, having things where now you're dealing with regular JavaScript data structures, right? If we ever wanted to change that, that's probably an impossibly heavy lift. And if you already have an app in production, it is probably not particularly feasible to go to product and be like, listen, instead of new features.

[00:01:00]
I was thinking, I would change all of the data structures in our database to use this Immutable JS library. If you can swing it, cool, [LAUGH] right? You're starting a new project, neat, right? But maybe you can't, right? And so knowing these approaches with the kind of like vanilla JavaScript, I think is super useful.

[00:01:19]
So yeah, we know how to maintain objects, generally speaking, just add a new property to an object. Or use the delete keyword, and delete a property, so on and so forth. Object.assign is pretty reliable, it basically allows you to give it some number of arguments and it'll basically merge all of those objects.

[00:01:38]
So if you start out with a brand new empty object and then the second argument is your existing object, you will effectively get a copy, right? And this is important cuz the way that React, actually most libraries check to see if they need to re-render stuff as they compare the two objects, right?

[00:01:56]
Like an object, if you mutate it, it's the same reference in memory. And so it'll compare it even if you've mutated it, it's like yeah, it's the same object from last time. And so if you do that, you basically, it's really hard for these frameworks to render. So we always have to return new objects to basically tell React or any other framework that we wanna re-render the DOM.

[00:02:16]
So this will give you a copy of an object. If you're either using Babel or targeting modern browsers, arguably using Babel or TypeScript, you can also use this spread operator. Which effectively creates a new object, if you look at that copy with the curly braces. And takes all of the properties of the original object and adds them to that new object.

[00:02:36]
If you pop this into Babel, you're probably gonna get an object assigned out the other end, right? These are effectively the same. This is just a nicer syntax, but you can use whichever one makes you happier. You can also combine multiple objects. So if you wanna have an object that is the original and the extension, you can pass them to Object.assign or you can spread them both.

[00:02:57]
And you'll see us doing this throughout the course of the workshop. Copying an array. You can theoretically call slice and give it no arguments and you'll get back a new array. Or you can use the same kind of spread syntax. I like this for its consistency. Also array.push will add stuff to an array but it mutates the array.

[00:03:17]
So you will suddenly find a bug in your UI. Array.concat returns a brand new array. It can also take an array and kind of combine them together. There was a recent blog post that says array.push is 945 times faster than array.concat. But tough, we need immutable data structures.

[00:03:35]
Again, you can use the same syntax for extending an array with this spread operator, which I will mostly be using throughout this workshop.