CODEWITHSUNDEEP
javascript
Robert
Robert

Reputation: 10390

JavaScript callback function inside sort() a and b variables

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.

Upvotes: 6

Views: 864

Answers (2)

Jun
Jun

Reputation: 3044

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

Upvotes: 1

JasonB
JasonB

Reputation: 6368

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

Upvotes: 1

Related Questions