Simplify array immutable changes with the new array.with method

[00:00] Let's create an array with some example data using the famous to do's example where every item is an object having 3 properties. The to do ID, the to do itself, and the boolean property that are minding whether the to do has been completed or not yet. Our task is to modify a given to do [00:19] object and switch the completed boolean property from false to true or from true to false. Let's say that in our case, that would be to do ID 1, whatever. And let's say that there would be way, way, way more to dos than the 2 that we can see over here. So in the [00:39] simplest scenario, we could basically mutate the array. So in this case, we would run the to do's dot find where we want to find the to do with a certain ID. So that would be the to do ID 1. And we could change the value of the completed property over here by [00:59] assigning that it would be a negation of what the original value of the completed property was. This would work in some scenarios. However, it could be troublesome if our JavaScript framework or library require immutable changes. So some frameworks and libraries require us [01:19] to create new objects whenever we want to change anything. And we need to create a new object, not only for the object that we're modifying, like creating the clone for, but also to all the parent objects that include it until the very root of the state object. So if we want to create this [01:39] change in an immutable fashion, what we could do would be to use the to dos dot map, the array dot map method so that we would create an array having exactly the same items, but we would basically replace only one of the items over here. So for each to do, we would need to check whether [01:59] the to do ID is the one that we want to modify, the one that we want to create a clone for. And if it's the one that we would create a new object, however, if it's not the one, then we would basically pass it through. So let's start with, pass it through scenario so that if this is not the one that [02:19] we are interested in, basically, leave it as it is because there is no reason for us to create a new object to clone it. However, if this is the one that we want to change, let's create a new object where we are going to start with spreading what is the content of the original one. And [02:39] we would like to modify what is the value of the completed property. So the completed property, the new value is going to be the negation of what it used to be before. And in the scenario where our framework or library requires us to create a new state object in [02:59] an immutable fashion, this could do the trick. However, in some scenarios, this might not be very convenient and it could get slightly simplified. So what JavaScript has introduced recently is the array dot with method, which accepts the index which [03:19] we index of the element that we want to replace and the value that we want to replace over here. So in our case, the ID, the index would be 0 and the value would be basically the new object. So in some scenarios, the map with the if statement inside would be simpler and in some other cases, [03:39] array dot width would be simpler. So let's see how would it work in this example. So let's start with what is the index of the element that we want to find. So that would be basically the to do's dot find. And here, since we want to get the index, let's basically find the index. So [03:58] this is basically index 0. And what we're going to do is the array dot with where the index is the index itself. And the value that we want to replace is going to be a new object where we are going to spread what was the value of the object [04:18] that we've had using the add method. And we want to override what is the value of the completed property. So we want to reach what is the value of the completed on the original object. So let's use the same one. And here we're just going to negate it. [04:39] And we've got the very same result. So in some cases, map with the condition inside would be simpler. And in some other cases, for instance, when we know what the index is, the array dot width would be also simpler. So remember that array dot width is creating a new [04:58] array. It doesn't mutate the existing array.