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
– Pointy, Commented Feb 23, 2018 at 21:15
You may be interested in this question, which talks about which sort algorithm javascript is using internally (in summary: it varies). — CRice
– CRice, Commented Feb 23, 2018 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
– Robert, Commented Feb 23, 2018 at 21:20
Duplicate stackoverflow.com/questions/42088913/… or stackoverflow.com/questions/1494713/… — subhaze
– subhaze, Commented Feb 23, 2018 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
– Bergi, Commented Feb 23, 2018 at 21:33

JasonB · Accepted Answer · 2018-02-23 21:41:04Z

1

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];

answered Feb 23, 2018 at 21:41

JasonB

6,4182 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Robert Over a year ago

Would you mind posting the code you used to get this result as well?

JasonB Over a year ago

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 )

Jun Over a year ago

@Robert, check out my example to get the content of n.

Jun · Accepted Answer · 2018-02-23 22:02:05Z

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

Collectives™ on Stack Overflow

JavaScript callback function inside sort() a and b variables

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related