Start a free Courses trial
to watch this video
Have you ever needed to sort an array in alphabetical order? Or what about sorting an array of players based on their scores? The sort() JavaScript array method can do this with ease, though there are a few pitfalls you have to keep in mind. Follow along as Dustin explains how to incorporate this method into your projects to sort your data efficiently.
Related content
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[MUSIC] 0:00 Hey, what's up. 0:09 I'm Dustin, a developer here at Treehouse. 0:10 Today I wanna talk about the sort method. 0:12 It's a pretty popular JavaScript array method that allows you to essentially sort 0:15 items in your array. 0:20 Follow along as I explain how it works. 0:21 And, as always, check out the teacher's notes or description down below for 0:23 related resources. 0:27 If you're ready to follow along, let's get into it. 0:29 First off, let's check out the definition for sort. 0:31 According to W3Schools, the sort method sorts an array alphabetically. 0:35 Sounds easy, right? 0:41 Well, let's give this a try. 0:42 I'll hop over into my text editor, and all I have in here is an app.js file, 0:44 which I'm running with Node. 0:48 If you're unfamiliar with Node or don't have it installed, 0:51 you can also write this code in your browser's terminal. 0:54 In my app.js, I have a few different arrays. 0:56 Let's get started with the first one. 1:00 It's an array of months, holding January, April, July, and December as strings. 1:02 I'll console.log our months array with the sort method chained onto it. 1:08 Let's see what we get back. 1:12 I'll hit Save, and run node app.js in my terminal. 1:14 And we get back our months array, but in alphabetical order, sweet. 1:18 This method works really easily with strings, but what about numbers? 1:22 Can we run the sort method on number types? 1:26 Let's find out. 1:29 My second array is named numbers, and it holds a few numbers 10, 5, 100, 53, and 6. 1:30 Let's change our console.log method to log numbers.sort instead of months.sort. 1:37 I'll hit Save, and run node app.js in my terminal, again. 1:45 And look at that, it doesn't seem to have worked, or did it? 1:50 What happened was, the sort method converts array elements to strings, sorts 1:55 them, then converts them back to numbers in an attempt to sort the array items. 2:00 We get 10 back, first, followed by 100, 2:05 because both of these have a 1 as their first character. 2:08 10 comes before 100 because 10 has less characters. 2:13 5 comes after 100 because the first character in 5 is higher than 2:14 the first character of 100, which is 1, and so on and so on. 2:19 Sorting numbers with the sort method is actually done a different way. 2:25 Let's create a new variable called numbersInOrder and 2:29 set it equal to numbers.sort. 2:33 Now, I'm gonna hop back to the W3Schools documentation and 2:35 take a look at the compare function we can use with this method. 2:39 The purpose of the compare function is to define an alternative sort order. 2:48 This next part is important. 2:53 It states that the compare function should return a negative, zero, or 2:54 positive value, depending on the arguments. 2:58 When the sort function compares two values, it sends the values to the compare 3:01 function, and sorts the values according to the returned value, 3:05 which can be either a negative, positive, or zero value. 3:09 If the result of the compare function is a negative value, 3:13 a is sorted before b, and if the result is positive, b is sorted before a. 3:17 Also, if the value is 0, then there are no changes made to the sorting order. 3:22 This may all seem confusing at first, so if you're interested in taking a look at 3:27 the example that they provide, I'll be sure to link this resource down below. 3:31 But I'm going to hop back into our code and 3:35 show you how this works with our numbers array. 3:37 We can start by passing in the compare function inside of our sort method, 3:40 giving a and b as parameters. 3:45 I'll add in an arrow function, and we can just write a- b as our logic. 3:47 a will be compared to b, and if the result is negative, 3:52 then a will be sorted before b. 3:56 And if the result is positive, b will be sorted before a. 3:58 This is easier to notice when running our code. 4:02 So let's log out our numbers in order of variable, and hit Save, and 4:04 check out the terminal. 4:08 Awesome, now we see our numbers sorted in order from lowest number to 4:11 the highest number. 4:14 If we wanted to show the opposite, we can just swap a and b in our logic. 4:16 Sweet, now our array is sorted from highest number to the lowest number. 4:24 Let's now take a look at our students array. 4:29 It's an array of objects holding student names, points, and badges. 4:31 Let's see if we can sort this array by students with the most badges. 4:36 I'll create a variable named mostBadges and set it equal to students.sort(). 4:40 I'll pass in our compare function with a and b as parameters. 4:46 And in the logic we'll write a.badges- b.badges. 4:50 If we console.log our mostBadges variable, you'll see we're getting back our 4:56 array of objects, but something's wrong, it's backwards. 5:00 So let's swap out a.badges - b.badges with b.badges - a.badges. 5:04 I'll hit Save, and rerun our file. 5:12 And, sweet, we now get our array items back sorted from the highest badge count. 5:14 Earlier we discussed how easy it was to sort arrays based on strings, 5:20 alphabetically. 5:24 Well, what if you have an array of objects like we do here? 5:25 You can still compare strings while using the compare function, and 5:29 I'll show you how it works. 5:32 Let's replace our shorthand syntax with curly braces and rewrite our logic. 5:34 Let's write a conditional statement. 5:40 We'll write if a.name is greater than b.name, 5:42 we want to return a negative value so that a can be sorted before b. 5:46 Else, we want to return a positive value so that b can be sorted before a. 5:52 Let's update our variable name to sortedByName, and 5:58 also change the variable name in the console.log method. 6:01 And we'll hit Save, and run Node app.js. 6:06 Look at that, we get back our array in reverse alphabetical order. 6:13 Can you figure out how to get our array back in alphabetical order based off 6:17 the student name? 6:21 Remember earlier I said we need to return either a negative value, positive value, 6:23 or zero. 6:28 Let's swap our return statements in our conditional. 6:29 I'll change the first one to a positive 1 and the second one to a negative 1. 6:32 I'll hit Save, and check the terminal. 6:38 Looks like it worked. 6:41 I am using a positive and negative 1 as my return value, but 6:42 you can use any numbers that you'd like. 6:45 As long as their value is either negative or positive, 6:48 your array items will be compared and sorted. 6:50 If 0 is returned, no changes will be made to the sorting order. 6:53 That about covers it for the sort JavaScript array method. 6:57 This is a super powerful method that can help you in your projects once you're 7:01 comfortable using it. 7:05 I hope this guide helps, and I'll see you in the next one. 7:06 Until then, have fun, and happy coding. 7:08
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up