JavaScript callback function inside sort() a and b variables

Question

I am trying to understand how the sort() function works along with the callback function passed into it. More specifically the values of a and b

Example code:

var n = [4, 11, 2, 10, 3, 1];
    n.sort(function(a, b) {
        console.log(a);
        console.log(b);
        console.log('--')
        return a-b;
    });

Result:

4
11
--
11
2
--
4
2
--
11
10
--
4
10
--
11
3
--
10
3
--
4
3
--
2
3
--
11
1
--
10
1
--
4
1
--
3
1
--
2
1
--

The first round I can follow that a = 4, and b = 11, easy to follow.

The second round I can follow that a = 11 and b = 2.

But after that I sort of loose track of what actually is going, for example when you get to when a = 4 and b = 3. How is this actually working? I tried working it out on paper but could not see the logic in the output of a and b.

The exact details of the sort algorithm used is not stipulated by the spec, but for arrays of more than a few elements it's *probably*, in general, a `quicksort` implementation. The API is designed such that you don't have to care about that at all, and in fact you definitely should not make any assumptions. Just return consistent comparison results when the same two values are compared. — Pointy, Feb 23 '18 at 21:15
You may be interested in [this question](https://stackoverflow.com/questions/234683/javascript-array-sort-implementation), which talks about which sort algorithm javascript is using internally (in summary: it varies). — CRice, Feb 23 '18 at 21:17
I totally understand. I just have the opinion that if you can't workout a coding problem using pencil and paper you really don't understand the code. — Robert, Feb 23 '18 at 21:20
Duplicate https://stackoverflow.com/questions/42088913/confusing-point-about-array-sort-method-in-javascript or https://stackoverflow.com/questions/1494713/how-does-javascripts-sort-work — subhaze, Feb 23 '18 at 21:32
@RobertRocha Well the problem is that you don't have the code of the sort function, and it's always hard (if not impossible) to work out an algorithm from just its logging output. — Bergi, Feb 23 '18 at 21:33
Possible duplicate of [Confusing point about Array sort method in javascript](https://stackoverflow.com/questions/42088913/confusing-point-about-array-sort-method-in-javascript) — subhaze, Feb 23 '18 at 21:35

Jun · Answer 1 · 2018-02-23T22:02:05.180

You can see it this way. When you have two numbers, compare the a (the previous one) and b (the next one).
If a is bigger than b, put it after b.
If a is smaller than b, put it before b.
In fact, when you have the case 'a > b', you can return any positive number: put a after b.
And, when you have the case 'a < b', you can return any negative number: put a before b. It is essentially comparing 2 numbers at a time.

The position in the array can be understood as below. Looking from the perspective of return a-b, if you return a negative number, put a before b; if you return a positive number, put a after b. negative numbers - zero - positive numbers.

Perhaps, you can understand it better by printing out content in n during runtime.

window.n = [4, 11, 2, 10, 3, 1];
n.sort(function(a, b) {
    console.log(a);
    console.log(b);
    console.log(window.n); // You can see what is in n in the every comparison
    console.log('--')
    return a-b;
});

Result on Chrome v64.0.3282

4
11
(6) [4, 11, 2, 10, 3, 1]
--
11
2
(6) [4, 11, 2, 10, 3, 1]
--
4
2
(6) [4, 11, 11, 10, 3, 1]
--
11
10
(6) [2, 4, 11, 10, 3, 1]
--
4
10
(6) [2, 4, 11, 11, 3, 1]
--
11
3
(6) [2, 4, 10, 11, 3, 1]
--
10
3
(6) [2, 4, 10, 11, 11, 1]
--
4 
3
(6) [2, 4, 10, 10, 11, 1]
--
2
3
(6) [2, 4, 4, 10, 11, 1]
--
11
1
(6) [2, 3, 4, 10, 11, 1]
--
10
1
(6) [2, 3, 4, 10, 11, 11]
--
4
1
(6) [2, 3, 4, 10, 10, 11]
--
3
1
(6) [2, 3, 4, 4, 10, 11]
--
2
1
(6) [2, 3, 3, 4, 10, 11]
--

(6) [1, 2, 3, 4, 10, 11] // result

Your code returns the same result as below:

var n = [4, 11, 2, 10, 3, 1];
n.sort(function(a, b) {
    console.log(a);
    console.log(b);
    console.log('--')
    if (a > b) {
        return 1;
    } else {
        return -1;
    }  
});
(6) [1, 2, 3, 4, 10, 11] // result

OR

var n = [4, 11, 2, 10, 3, 1];
n.sort((a, b) => a > b ? 1 : -1);
(6) [1, 2, 3, 4, 10, 11] // result

score 1 · Answer 2 · answered Feb 23 '18 at 21:41

Looks like a modified bubble sort. You can see what is happening when you compare the state of the array at each step - I have added them below.

Move the value from index 1 as low as it should go. (index 0-1 are in order) Now move the value from index 2 as low as it should go. (index 0-2 are in order) Now move the value from index 3 as low as it should go. (index 0-3 are in order)

Since we know how much of the array is in order we short circuit the comparisons and jump to the next index as soon as the comparison function is not negative.

4
11
-- [4, 11, 2, 10, 3, 1];
11
2
-- [4, 2, 11, 10, 3, 1];
4
2
-- [2, 4, 11, 10, 3, 1];
11
10
-- [2, 4, 10, 11, 3, 1];
4
10
-- [2, 4, 10, 11, 3, 1];
11
3
-- [2, 4, 10, 3, 11, 1];
10
3
-- [2, 4, 3, 10, 11, 1];
4
3
-- [2, 3, 4, 10, 11, 1];
2
3
-- [2, 3, 4, 10, 11, 1];
11
1
-- [2, 3, 4, 10, 1, 11];
10
1
-- [2, 3, 4, 1, 10, 11];
4
1
-- [2, 3, 1, 4, 10, 11];
3
1
-- [2, 1, 3, 4, 10, 11];
2
1
-- [1, 2, 3, 4, 10, 11];

Would you mind posting the code you used to get this result as well? — Robert, Feb 23 '18 at 21:42
I just went through with "pencil and paper" like you suggested! Just swap the values where they are in the array if the comparison function is positive ( a < b ) — JasonB, Feb 23 '18 at 21:43

JavaScript callback function inside sort() a and b variables

2 Answers2