Transcript from the "sort Method" Lesson
[00:00:00]
>> Brian Holt: Yeah.
>> Speaker 2: Do you have any preferred methods for sorting arrays?
>> Brian Holt: Sort. [LAUGH] So that's a good question. Let's let's take a look at that, like here. Let's say we wanted to organize this. Well, let's start with the prime numbers. These are already sorted, but let's say we wanted to
[00:00:23]
>> Brian Holt: Just add some extra noise here, like let's put 10 here in the front.
>> Brian Holt: So there is a JavaScript function called sort. I say prime numbers dot sort
>> Brian Holt: That's right. This will sort it by string, right? It assumes everything is a string. So this is technically sorted by string right?
[00:00:47]
One comes before 10, before 11, and then two comes after that, right? Because one comes first in the alphabet. Right so what if you wanna start this by number right? That's follows so just like we can pass a function to map or for each or anything that we can pass a function to this.
[00:01:13]
This returns a number one or has a number one and a number two
>> Brian Holt: Okay, and this is just something you have to know, about how this works. If you return a positive number, it means the first one is larger. If you return a negative number, means the second one is larger.
[00:01:34]
And if you return zero, it means that they're equal.
>> Brian Holt: So if num1 is greater than num2,
>> Brian Holt: Return some positive number. It doesn't matter what it is. It could be one, it could be 100. Else if num2 is greater than num1,
>> Brian Holt: return -1. Otherwise you just return zero.
[00:02:07]
And what did I forget here? I think I need another, okay, cool, and I got it right. Sometimes I forget. [LAUGH]
>> Brian Holt: So this is a comparator, it's actually the name of what you would call that function not that you would ever have to know that. I hope you never have to know that, but every time that it runs a comparison between the two it runs some sort of internal algorithm.
[00:02:35]
It depends on which JavaScript engine that you're running. Most of them run an algorithm called quick-sort. Again not something that you ever have to care about or actually is usually merge-sort but nonetheless.
>> Brian Holt: But every time it goes to compare to numbers, says is this one bigger or is this one bigger?
[00:02:54]
>> Brian Holt: It will run your function to figure out which number is bigger. Do we follow so far? Does that make sense? Okay, in this particular case, we're comparing by number. So if number one is bigger, then you return 1. If number two is bigger, then you return -1.
[00:03:10]
And again, I could put -100 or 10. It doesn't affect anything here. Otherwise you return zero to let the thing know that they're equal. Now what happens if I wanted to reverse sorted right? Well, then I would just reverse these.
>> Brian Holt: And now it's reverse sorted. Question?
>> Speaker 3: So is the sort method in there, what like I guess actually sorts it like you're writing the logic for it.
[00:03:45]
So, I guess my question is, why aren't there, why isn't there one and negative 100 or zero a bunch times in the result?
>> Brian Holt: Because it's not actually inserting those into the array. The only thing that you're letting the sorting algorithm know is this one's bigger or this one smaller.
[00:04:01]
Right? And true and false is not enough to capture everything because they can be equal. So that's why they resorted to numbers.
>> Speaker 3: So this sort function is taking that either one or less than zero, placing it in right?
>> Brian Holt: Correct. In fact if you want to see what it's actually doing underneath the hood, this is another course that I have in front of masters.
[00:04:22]
Shameless self plug. Just kidding. [LAUGH] In here actually I teach you how to write these things from scratch. The one that it is running in Firefox is this one. So this is what it's actually doing underneath the hood, which looks kind of crazy right? They are basically dividing the list into smaller and smaller and smaller less and then combining them back into bigger and bigger and bigger lists.
[00:04:48]
>> Brian Holt: And the code, surprisingly, is not so complicated. It's about 50-ish lines of code, but that's code for another day.
>> Brian Holt: Questions about that?
>> Speaker 4: Could you use parseInt in there somewhere to make the string a number, like we did in other situations? Or this is the preferred method?
[00:05:28]
>> Brian Holt: Let me think about that. I don't think so, because you're not actually, yeah. So the sort function has, if you don't give it any sort of function, has a default function that it runs that does string comparison, right? So if this was a list of strings, let's actually just look at what that would look like.
[00:05:51]
So if this was a list of strings, it would get it right. So A, C, B, D, E, something like that. And the function that runs by default is the string comparison method to alphabetically sort things. And so if you don't fall into that use case then you have to write your own.
[00:06:16]
So like, I see where you're going and it's a good train of thought. But in this particular case that wouldn't work.
>> Brian Holt: So const strings. And then here if I strings dot sort, this should sort into a correct order based on alphabetical order.
>> Brian Holt: But things get weird.
[00:06:36]
Like what happens if there's capital B's? Well turns out capitals come before lowercase if you're doing string comparisons, so there's definitely caveats to this as well.
>> Speaker 3: What about if you put like dot two uppercase, in either the strings or the sort? So that it would still work.
[00:06:57]
>> Brian Holt: So, I mean something kind of fun you could do is could do dot map here and you do function string return string.toUppercase.
>> Brian Holt: So this is why functional program is really cool cuz then you can start changing things together because this array returns another array, which then you operate on that array, and then you return another array, and you operate on that array.
[00:07:33]
And you can just chain these functions together to get these really powerful transformations.
>> Brian Holt: So I don't think I really answered your question but I still think this is cool.
>> Speaker 3: [LAUGH] Yeah, it's cool.
>> Brian Holt: An It's also probably not necessarily you're looking for, right? Because in the process, I've destroyed data, right?
[00:07:50]
Like now we no longer know if these were uppercase or lowercase beforehand.
>> Brian Holt: But I don't care. [LAUGH] Like it wouldn't work, like what happens if I have this in there or
>> Brian Holt: I don't know, sweaty face? I don't know where did those come in sorting? Comes at the end apparently.
[00:08:19]
I believe was actually doing anything, if you're curious is it's sorting by Unicode codes, right? So there's basically codes that represent characters at like a lower level and it is sorting based on those so it turns out emojis come after letters but punctuation comes before. Again not typically or hopefully something that you ever need to know but.
[00:08:48]
>> Brian Holt: So,
>> Brian Holt: This is typically how you would structure this. So you would have multiple lines here so it gets a lot clearer to read the transformations over time. Let's just show you a little shortcut here. I've shown you so far just using the function key word, there's a thing called arrow functions, so this is combining them here, but if I hit space, it's just equals and angle bracket, and then my font combines them together.
[00:09:19]
So that's why it looks like an arrow. So this actually works. This is called an arrow function. 99% the same as just using the function key word. It's just a little bit shorter. This is also new to JavaScript as well. But we can actually make this even shorter.
[00:09:39]
So if I leave off the curly braces, there's what's called an implicit return.
>> Brian Holt: So whatever I put here, if I don't put curly braces means I can only do one statement, right? So I can't put a semi colon after this and do more stuff. You get one line or nothing, right?
[00:09:59]
But because I did that now it's implicitly calling return for you. Does that make sense? If you're coming from Ruby or something like that this will make a ton of sense because Ruby does that everywhere. But I like this because this got a lot more concise, right? We can actually make this even shorter.
[00:10:20]
So notice I have parentheses around the parameters here. If you have exactly one parameter, which I don't know why this is a rule but it is, if you have exactly one parameter, parentheses are optional. But if you have zero or two, they are no longer optional.