Explain this tutorial, please

[parvez]

Hi, I saw this posting in another forum and I couldn't find any answer to it. In w3schools.com, there's a tutorial on javascript about sorting. They have the following:

<script type="text/javascript">

function sortNumber(a,b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort(sortNumber))

</script>

The above produces the following output:
10,5,40,25,1000,1
1,5,10,25,40,1000

My question is: the sortNumber function is expecting 2 parameters ; can we call that function without passing any parameter like what it is in the last line? Secondly, how is that function sorting the numbers appropriately? Shouldn't "return a - b" subract b from a and then return the result? I hope I'm not asking any stupid questions. Thanks for any help.

[Mongus]

Array's sort function takes a reference to a compare function as a parameter. When you call the sort function it loops through the values contained in the array and compares them using the compare function you specified. It rearranges the array based on the results of the compare function.

The compare function will get two parameters every time it is called. If the first parameter is larger than the second it should return a positive number. If the first parameter is smaller than the second it should return a negative number. If the parameters are equal it should return 0.

[parvez]

Array's sort function takes a reference to a compare function as a parameter. When you call the sort function it loops through the values contained in the array and compares them using the compare function you specified. It rearranges the array based on the results of the compare function.

The compare function will get two parameters every time it is called. If the first parameter is larger than the second it should return a positive number. If the first parameter is smaller than the second it should return a negative number. If the parameters are equal it should return 0.

Thanks for your replay. I still don't understand how compare function receiving the parameters that is being compared. Also, shouldn't every line in javascript end with a semicolor " ; "

[A1ien51]

Semicolon is optional, but you should use it!

Basically you are wondering what is in the black box.

By default the sort method is set you to compare strings. So if you were to sort that number without the custom function it would return a funny result. Hence why you probably found this code.

Now with this code you are passing a reference to a funciton that is doing subtraction. Now as explained this subtraction is used to do a comparsion. A positive number, negative number, and zero tells the hidden part of the code what is going on for the sort.

Now when we add this reference to a function, we are passing the instructions to the hidden code we do not see. What is going on in the back ground is this (this is a basic idea, not the exact thing!)

<script type="text/javascript">

function sortNumber(a,b)
{
  return a - b
}


//fancy way to extend the Array Object (normally you do not overwrite methods that exist!)
Array.prototype.sort = function(fnc)
{

  var _arrOrg = this; //The orginal array that is sent in.
  var _arrNew = new Array(_arrOrg[0]); //Create a new array to insert the new values

  for(var i=1;i<_arrOrg.length;i++) //loop through the orginal array to get the values
  {
    var _inserted = false;  //set a flag so we know if we got a match
    for(var j=0; j< _arrNew.length;j++)//loop through the values of our new array 
    {

      var _comp = fnc(_arrOrg[i],_arrNew[j]); //use the custom function specified by the user sending the orginal array value we need to find a new home and the new array we are now sorting

      if(_comp<0) //if it is less than the current value
      {
        var x0 = _arrNew.splice(j,0,_arrOrg[i]); //add it to the new location
        _inserted = true;  //set the flag to true
        break; //exit this loop since we found the spot
      }
      
    }

    if(!_inserted)_arrNew[_arrNew.length] = _arrOrg[i]; //make sure we found the spot, if not add it to the end of our new array

  }

  return _arrNew;  //return the newly sorted array back

}

var arr = new Array(6);
arr[0] = "10";
arr[1] = "5";
arr[2] = "40";
arr[3] = "25";
arr[4] = "1000";
arr[5] = "1";

document.write(arr + "<br />");
document.write(arr.sort(sortNumber));

</script>

Hopefully that shows you what is happening inside that black box a little bit.

Eric

[parvez]

Thank you so much for explaining it. It kinda make sense now. I was planning to learn javascript closure but didn't have time yet. So, just a quick question, does the above have anything to do with closure or is that a different trick.

[Mongus]

No, it doesn't have anything to do with closures. It has to do with the object oriented nature of JavaScript. An array is an object that contains a list of other objects. The sort function operates on that list.