www.webdeveloper.com
Results 1 to 6 of 6

Thread: Explain this tutorial, please

  1. #1
    Join Date
    Feb 2006
    Posts
    35

    Explain this tutorial, please

    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:

    HTML Code:
    <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.

  2. #2
    Join Date
    Mar 2005
    Location
    Gilbert, AZ
    Posts
    293
    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.

  3. #3
    Join Date
    Feb 2006
    Posts
    35
    Quote Originally Posted by 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.
    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 " ; "

  4. #4
    Join Date
    May 2003
    Location
    Between Baltimore and DC
    Posts
    3,579
    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!)

    Code:
    <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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint] | twitter | linkedin | http://www.pascarello.com

  5. #5
    Join Date
    Feb 2006
    Posts
    35
    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.

  6. #6
    Join Date
    Mar 2005
    Location
    Gilbert, AZ
    Posts
    293
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles