includes, flat, find, & sort

[00:00:00]
>> Maximiliano Firtman: Now, getting into the new stuff that we have here, we have includes, that is actually pretty simple. That's the same as with the strings to avoid the usage of indexOf. This will check if banana is inside fruits, thimble to get, okay? Nothing so fancy. Flat and flat map, flat will flatten the nested array.

[00:00:26]
So, for example, if I console.log this, this is the flat version. So I say array.flat, and the2 has to do with how deep I want the flat, okay? So, how deep I want the flat. So if I run this, this is a flat 1, 2, 3, 4. It's getting two levels within the array, but you can say only one and you will see the difference.

[00:00:52]
And flat map, it's flatting and mapping at the same time. Okay, so it's flatting the array and also making a map. At the same time I'm while, it's because you can also flat a map. But in this case you are executing the map while it's doing the flat, which it's not exactly the same in terms of the order of the operations, okay?

[00:01:20]
It's just that, this is from ECMAScript 2019. So, again, you can see there are a lot of features, right? So, I'm going one by one and some of them are really quickly. For finding, we have a lot of properties that will let us find elements in different ways within an array, okay?

[00:01:40]
We have find that probably you have used before because it's part of ES6. Will find an element matching one particular lambda expression or function that you pass as an argument. That now we have also findIndex, that we returned the Index of the first element that matches one particular expression.

[00:02:06]
FindLast, that will find the last one, not the first one. And the findLastIndex, that will not return you the value, but the index of the last one, so we will start from behind. Again, nothing really complicated, we just add new methods that we have to find elements within an array.

[00:02:27]
At, it's weird because you say, okay, what do I need the at? The at will let you get an element at one position, but you can use negative values as well. So, for example, if I say -1 here is getting me 4, because it's the last one. So, it's a quick way to access the last element of an array, okay?

[00:02:52]
Nothing really, really important. A stable sort is not even something that has changed in the API. This is from 2018, I mean, it's sorting, which is okay, so what's the difference? The difference has to do with what happens when you have, for example, two 1s here. Which one goes first?

[00:03:14]
And probably you're thinking, well, what's the deal with that? Why is this important? Well, with numbers it's not important. But when you have objects, maybe they are semantically equal, they have different IDs, they're pointing to different objects. So, each browser so far, was using their own method to pick what happens when you have the same value.

[00:03:38]
So, sometimes you were not getting the same order in different browsers. So, now the the implementation of the ECMAScript has a guideline which explicitly said that they should be returned in the same order that they are defined in the original array. So in this case this one should be first, and this one should be second.

[00:04:03]
Again, the API is just the same, they're just changing the wording or the explanation, the implementation for the browser. Change by Copy, this is the last one on collections. Change by Copy is actually interesting, because so far we have methods to sort, as we saw before, to reverse or splice arrays.

[00:04:29]
But they were mutating the same array. So if I execute numbers.sort(), this is changing numbers. So, it's changing the array, it's sorting the array. Well, now we have a way, instead of changing to mutate that array, to receive another array. In this case, for example, with reverse numbers.

[00:04:56]
So, if I run this, I have the reverse numbers, but also I have the original number, so I keep both. With sort we have the same thing. Instead of doing sort, so if I sort, you can see both are 1, 2, 3. If I say toSort, now I keep the original one, that's the difference, okay?

[00:05:25]
So, this is behavior that we already have, but now we have another method that actually returns a new array. This is from ES2023, okay? So, it's actually pretty, pretty new. Makes sense? The same happens with a splice. When I make changes here using splice, it will create a new array with some elements remove or replace, that's the difference.

[00:05:55]
And then with will actually replace one particular index. In this case is changing the third element with the 10. So I'm getting a new array, a copy of the array with that element changed, is that all, okay? So, that's everything we have in ES6+ to work with arrays and collections.

[00:06:25]
>> Student: Do you think that the goal of the ECMAScript team is to move JavaScript closer to TypeScript and eventually replace it?
>> Maximiliano Firtman: So, for the question, if the ECMAScript theme is, let's say, removing the gap or reducing the gap between JavaScript and TypeScript. I don't think they're moving towards that goal.

[00:06:50]
Sometimes it feels that way because sometimes, for example, for private properties as the static keyword, but they're not copying how TypeScript defines him. TypeScript is more a mix between C# and JavaScript. So it's JavaScript, but with some C# ideas in terms of the syntax. And I don't think the ECMAScript team is going that way, but we will see some similar implementations at many points in the future.