16.9: Array Functions: sort() - Topics of JavaScript/ES6

all right if you've actually managed to sit through and watch all of these videos about all of these different functions I'm kind of amazed and really the truth isn't that the point of what I'm doing is not to like because there's a lot more of these array functions is did I say this already in a previous video but is not to go through all these one at a time and explain every single one as useful as that possibly might be in some cases but if you can kind of understand how they work and then figure out how to look up in the reference in the documentation you can look at all the array functions to figure them out for yourself but I'm here let's do one more one more really useful one let's talk about sort so I'm gonna come back over here I'm gonna save I'm gonna come back to this word stuff cuz we're gonna need that in a second but let's just look at the let's just look at this array of vows for a second so I'm gonna say console.log boughs and I'm just gonna say vows sort with no function passed in and console dot log Val's so let's see what happens and let me give this the number nine I'm gonna hit refresh and we can see look at that it's sorted it in numerical order from lowest to highest that's ascending order and in fact it didn't make a new array it sorted exactly that array so this is important to realize this is a distinction that we've really got to pay attention to so far in looking at these filter makes a new array reduce well reduce doesn't make an array it reduces things down to a single but could make an array but that's a special case reduce and map make a new array Phil fills an existing array and sort sorry filter and map new array Phil and sort act on an existing array reduces a special case so that's kind of important distinction between all of these so but how did it know to do that well sort you kind of like would say like oh I sort it should sort by numerical order and if these were words you know a Hello be goodbye you would guess it's gonna sort them in alphabetical order now if this is capital B that shows up first because it's actually going to sort by capital letters first if there was something else that I was going to look at here I'm gonna say capital B yeah if it's also like numbers and letters it's gonna first put the numbers and then it out in numeric order and then the letters in alphabetical order so there are there's a default way that an array will be sorted now let's let's look at this case what if I had just an array of objects so what if my array was actually something like a bunch of XY pairs so this is now an array and I oughta format it for me of two objects each with an x and a y well what if I sort that well it didn't change didn't change the order five six to ten all right well let's be sure about this let's say to ten five six and let's do it again to ten is first well that's there and now after sorting it to ten it's the same order so this is the thing there is a default way of sorting stuff but JavaScript the sort function only knows that default way for certainly kind of obvious things like numbers and strings if you want to sort something yourself you need to write your own comparing function this is why sort is a higher order function because it expects the sort function expects as an argument a function which you could call the compare or the comparator it's not actually a word I just feel like there's all sorts of goofiness in Java with these like long winded strange words but you need to write a function that compares and what does that function look like so let's come back over here so let's say for this particular case here what I wanted to do is I wanted to this by the y-values so I would write a function I'm gonna call it compare and it's going to compare two elements this higher-order function requires two arguments two elements of the array and it's your job to say which one should go before the other and the way that you can tell the way that you can tell the sort function to do that is by returning a positive or negative number and I can never remember which is which but positive maybe means a goes before B negative means B goes before a and zero means they're equivalent or it's the other way around I always just try it both ways and eventually I figure it out so for example I could say return a dot Y minus B dot Y right that makes sense because in this case we're going to have 10 minus 6 is 4 or 6 minus 10 is negative 4 so if I put that compare function right here in Val's and I hit refresh we're going to see that 6 comes before 10 let's change this to B minus a and we're gonna see that 10 comes before 6 I know this is small but can you see that 10 comes before 6 so this and if they're equal but that valley is gonna be 0 so what other ways can we have fun with this well let's go back to let's go back to this it was a dark and stormy false night who's trying to league that's false let's put this back in here and let's say what I did with filter in the previous video is I filtered out all of the words after I split up this text that were less than 3 characters and let's just split out let's let's actually well 3 or less so let's make it 2 or less so let's just make sure this still works we can see Oh Val's is not too fine I'm gonna gonna comment this out I'm not using that anymore so I'm just gonna look at this code and I'm gonna see ok so that's my was dark and stormy night now if I were to just say right before hear words dot sort I would get and dark stormy and dark night stormy was but what if I wanted to sort by the lengths of the words so I would we need to write a compare function and so I could start doing this with function compare a comma B return but here's the thing I'm trying to use as much as possible this arrow syntax to be able to sort of in line right there have the function that doesn't compare all in one line in very condensed way let's try to do that maybe we've done it I've done it enough times now they don't need to write it first as a long winded function then make an anonymous function then an arrow function let's do it all at once so I'm going to I'm gonna say we're word Ono so this is a comma B try always for up so this is the the the sort that compare function requires two arguments two elements of the array that I'm going to compare I'll keep this a and B sort of variable naming that's totally arbitrary I could call it cat and dog then I want to return the the difference between the lengths if one if one's length is bigger than the other it should be after it so I'm gonna say B and I don't need to say return I'm just gonna say B dot length minus a dot length so this should this should give me now a way of sorting the array where the longer ones appear at the end and let's see I probably got this backwards I always get it backwards I got it backwards of course where the longer ones are at the beginning so you know I could have figured that out but in the end I could just say a minus B and then there we go was and dark stormy so you can see three letter three letter for letter five letter five letter so this is the way that you can sort you can sort custom any list of any array of stuff based on however you want to compare two elements of that array all right now I'm trying to think if there's anything else I have to say I think that's it so we were done we've gotten through all this stuff what I want to do now is I want to look at taking a lot of these concepts into a kind of creative classic creative coding scenario a particle system and using a higher-order function to write a bunch of ways of managing to do a bunch of things to manage that array of particles and I'll do that in the next video which you might may or may not choose to watch thanks very much [Music]

Channel: The Coding Train

Views: 104,822

Rating: 4.8796129 out of 5

Keywords: JavaScript (Programming Language), live, programming, daniel shiffman, creative coding, coding challenge, tutorial, coding, challenges, coding train, the coding train, nature of code, live stream, itp nyu, es6 arrow functions, es6 arrow, map es6, reduce es6, reduce javascript explained, array reduce javascript, javascript reduce method, higher order functions javascript, es6 tutorial, es6 tutorial for beginners, es6 javascript, sort, sort javascript, sort js

Id: MWD-iKzR2c8

Length: 9min 19sec (559 seconds)

Published: Fri Feb 23 2018