I need immediant help!

Hello Digital Point,

I come to you today with a question that has been riding my nerves the last few weeks about this JavaScript example on W3Schools. It does not make any sense what so ever and I need immediate help with it...

The link to the example is...
http://www.w3schools.com/jsref/jsref_sort.asp

'Example 2' is whats causing me to rip my hair out. I don't understand how it sorts the numbers... You can see the code below...

<script type="text/javascript">

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

var n = ["10", "5", "40", "25", "100", "1"];
document.write(n.sort(sortNumber));

</script>

Code (markup):

Please help me and give an explanation, thank you very much.

 

The sort() function built into JavaScript normally works only on strings and produces an ascending sort. But sort() allows the programmer to create his own custom function to handle the comparisons used by sort(). To use a custom function you pass the function name as a parameter in the call to sort(). In the example, the custom function sortNumber() does an ascending numerical sort. That's what's happening.

 

ugh... :\ I am kind of a newbie, can you explain in simple words, please?

 

sort() is built in method in javscript so you can easily sort any string in with the assistance of sort method of javascript. you can also sort any array without sort() method but for that u have to code more lines as well

 

I understand what sort() does... but I am having difficulty understanding the custom function "sortNumber" and how "return a - b;" sorts through the string?

MAJOR EDIT: So wait, does the "return a - b;" compare numbers against each other? When I change the minus sign to addition it does not display anything... I kinda know how return works but I have never seen one with the minus '-' sign. Please help me understand.

 

this script is better explained here: http://www.javascriptkit.com/javatutors/arraysort.shtml

if you are working with complicated client side technologies, a console like firebug is priceless.

"To sort numbers, you must add a function that compare numbers."
n is an array. the array looks like it has numbers in it, but they are not. they are strings.
10 = integer. "10" = string.

So if we want to sort the array, and sort is as numbers, there is an extra function to convert the string values to numbers for the sorting. that function is sortNumber. When i change that a bit to :

function sortNumber(a,b)
{
	console.log(a+" - "+b+ " = "+(a-b));
	return a - b;
}

var n = ["10", "5", "40", "25", "100", "1"];
document.write(n.sort(sortNumber));

Code (markup):

the output i get is:

10 - 5 = 5
10 - 40 = -30
40 - 25 = 15
10 - 25 = -15
100 - 1 = 99
40 - 1 = 39
5 - 1 = 4
5 - 100 = -95
10 - 100 = -90
25 - 100 = -75
40 - 100 = -60


I just learned something. This script was interesting, you would have to be familiar with some of the deeper workings of the javascript api to understand, or you could do like i did and just mess with firebug.

 

Its very hard for me to understand the logic behind it.

 

me too. it aint simple. sometimes we just gotta let the computer do its thing. my original format is an artist with pencil, pen, and paper. its always best practice to understand the tools we are working with so i share your concern. if the script works, sometimes we just gotta let it work even though the question of how it works remains. i prefer to understand things myself too.

 

Yeah art is my original format to. Programming logic takes a lot of research and practice to understand. Art does not... art does take practice though but not the tedious research that programming takes to grasp. I see your output...

But that has confused me even more sadly...

 

lol. maybe the best explanation is on the link at javascriptkit

 

Okay I will try and explain.

Javascript's sort function, by default, will sort a list of items alphabetically, not numerically (as the w3schools article points out). Do you see the problem with this? Numbers are sorted alphabetically, so "40" will come before "5", which we all know is not correct if we want the numbers sorted numerically.
So in order to change this we need to pass our own function (in this case the function 'sortNumber') to javascript's sort function. Which happens here: n.sort(sortNumber)

The purpose of our function (sortNumber) is to compare two values (a and b) and to return:
1) A negative result if a is lower then b
2) A positive result if a is higher then b

So if you look at the function:

function sortNumber(a,b)
{
	return a - b;  //< ----- if [I]a[/I] is lower then [I]b[/I], negative result is returned and vice-versa
}

Code (markup):

Javascripts inbuilt sort function runs all the numbers within your array, against each other, and sorts them according to the responses of your 'sortNumber' function. So the item with the most negative results will appear first, as it must be the lowest, and then it continues up from there.

Starting to make sense?

Think of a negative response as a 'vote' towards that number. The order is then established from 'Most votes' to 'Least votes'

Take this example:

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

var n = ["6", "3", "10"];
document.write(n.sort(sortNumber));

Code (markup):

Below is what happens in the background when you execute the line n.sort(sortNumber):

sortNumber(6,3) <- Result (3)
sortNumber(6,10) <- Result (-4)
Total Votes for '6': 1

sortNumber(3,6) <- Result (-3)
sortNumber(3,10) <- Result(-7)
Total Votes for '3': 2

sortNumber(10,6) <- Result(4)
sortNumber(10,3) <- Result(7)
Total Votes for '10': 0

Result: ["3","6","10"]