Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
There are many methods that allow us to manipulate and inspect the contents of arrays. This video goes over a set of functions that order and sort arrays.

0:00
[Deep Dive  JavaScript Foundations  Arrays: Methods: Part 2  with Jim Hoskins]

0:07
I'm going to go ahead and comment this out.

0:11
And another thing that we can do with arrays is sort them, but they may not work exactly like you think.

0:16
So let's create "var my_array." And we'll store some values like 10, 44, 32, 100, 0, 44, 3, and 4.

0:31
So we have a bunch of different values here in no particular order, and we'd like to sort them.

0:37
Well let's try it out. First let's do a "console.log" so you can see what the order of the elements are.

0:47
And then what we can do is call a method called "sort" on the array.

0:50
And what "sort" will do is sort the elements inside of our array in place, meaning anywhere we have this array stored,

0:57
all of the elements are suddenly going to be sorted.

1:00
So it's going to actually change the values inside of the array.

1:03
It won't create a new array that is sorted, but will actually sort the array in place.

1:09
So we can do "my_array.sort" and just leave it at that. Let's see what happens when we do this.

1:18
So we have our first console.log; it will be unsorted. And then we call sort, and then we can see what the my_array is after we call sort.

1:26
So I'm going to save it out and refresh, and we can see that the values have changed the order.

1:32
We have our original order on the first line but now they're in a new order.

1:36
But they're not quite the order that we probably would have wanted.

1:40
We were looking for a numerical sort, but we have a slightly different sort by default.

1:44
The values go 0, 10, 100, 3, 32, 4, 44, and 44. Now this is sorted but not numerically.

1:56
It's actually sorted as though they were strings.

1:59
So we can see that we start with a 0, then we start with our 1s, then we start with our 3s, and our 4s.

2:04
So it's actually sorting them as though they were strings, and that's actually the default way that the array is going to sort items.

2:11
It doesn't really recognize that all of our elements were numbers and should have been sorted numerically.

2:16
However, we can change how this sort method works by providing a comparative function.

2:20
Let's see how we do that.

2:22
Basically when we compare arrays we're just comparing the different items to each other and seeing which ones are bigger or smaller

2:28
or which ones come first or last.

2:30
The actual way in which we compare these is mostly abstracted away from us, so it takes care of it.

2:35
But if we want to change the way it actually sorts, we do need to write a little bit of code to help it along.

2:40
And this is the function that will take 2 of the items from our array, and then it will return whether or not the first one

2:47
is bigger, smaller, or equal to the other one.

2:49
With that information JavaScript can then go through all the elements,

2:53
use the comparative function to compare each of the items to each other, and return this sorted array.

2:58
Now we remember from Introduction to Programming that functions take in arguments and return values.

3:03
So the function that sort will take as an argument is a function that takes 2 parameters, and we'll call them "a" and "b."

3:12
And here's the body of our function, and I'm just going to break it off into different lines here.

3:16
So what we're doing here is we're passing an anonymous function, or that is a function without a name, to my_array.sort.

3:23
We saw that earlier when we stored a function into an array.

3:26
So our sort method is taking a function and that function takes 2 parameters, a and b, which are 2 different elements from our array,

3:32
and we need it to return a number.

3:35
The sign of that number is what's going to determine whether a is larger than b, smaller than b, or equal to b.

3:42
So if we return a negative number, that means a should come before b in our array.

3:46
If we return a positive number, a should come after b in our array.

3:50
And if we return 0, a and b are considered equal and can come in either order.

3:56
So if we want to implement a numeric sort, we can think of it this way.

4:00
If we want our smaller numbers to come first, then let's think about the case where a is 5 and b is 10.

4:07
If we subtract b from a, meaning if we subtract 10 from 5, we get 5,

4:13
which is negative and would indicate that a comes before b, which is the case.

4:19
If a was 10 and b was 5 and we subtracted b from a, then we get positive 5,

4:25
meaning that a should come after b which, again, is the case.

4:29
So subtracting numbers offers a great way for us to get the correctly signed return value.

4:33
Of course if a and b are equal, a minus b is 0, meaning they are the same, which is also what we want.

4:39
We can only do this if we're sure that all of our elements are numbers because that's the only thing we can subtract on.

4:45
But since we see my_array has all the correct values, we can write a very simple function saying "return a  b."

4:54
So now JavaScript knows how to compare the 2 elements in the array and should now compare them as though they were numbers.

5:00
So let's go back and check it out.

5:02
If we refresh, we can now see the elements in our array are sorted using a numerical sortâ€”0, 3, 4, 10, 32.

5:09
Our two 44s are next to each other and 100.

5:13
So depending on what types of objects we have in here, we can write more complex comparative functions for our sorts,

5:19
but I'm going to show you one other cool technique.

5:21
Let's say we want to randomize the order of the elements in our function.

5:25
Well one technique we could use to do this is whenever we compare 2 elements,

5:30
we could randomly return a number that's egative or positive with equal bias, and that should create a randomly sorted array.

5:38
So let's just go ahead and comment out this return value and let's return a random number

5:43
that is going to be with equal probability positive or negative.

5:47
We remember from numbers that Math.random returns a number from 01, but that's always going to be positive.

5:56
So the way we can make that equally positive or negative is to subtract 0.5 from it.

6:02
So now the value will be from 0.5 to 0.5, a random number.

6:07
So if we return that, every time the comparator function has called the 2 elements, it'll randomly be greater than or less than

6:15
and actually not use a or b at all.

6:18
So if we refresh and now we take a look, we get 1 sort which is randomized,

6:23
but every time we get it we're going to get a different random sort.

6:25
So that's another little clever way that you can shuffle an array based on Math.random's random values.

6:36
Finally, let's take a look at 1 more method that is called "reverse."

6:41
So we'll say, "var my_array =" we'll just make it simple "1, 2, 3, 4, 5."

6:52
And we'll do a console.log of its value, and we can see it's 1, 2, 3, 4, 5.

6:57
And then if we call "my_array.reverse" and then we do another console.log,

7:08
we can see that my_array.reverse has simply reversed the order of the elements inside of that array.

7:14
So what was at the first index is now at the last and so on and so forth, so now it's 5, 4, 3, 2, 1.

7:20
This modifies the actual elements in the array so any time we take a look at my_array after we called a reverse on it,

7:26
the values with now be reversed in place.

7:30
I'll be back to take a look at a few more methods that are available on our arrays.

7:35
[treehouse]
You need to sign up for Treehouse in order to download course files.
Sign up