# Understanding IF function

Hi

``````<button onclick="myFunction()">Sort</button>

<p id="demo"></p>

<script>
var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}
];

displayCars();

function myFunction() {
cars.sort(function(a, b){
var x = a.type.toLowerCase();
var y = b.type.toLowerCase();
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});
displayCars();
}

function displayCars() {
document.getElementById("demo").innerHTML =
cars[0].type + " " + cars[0].year + "<br>" +
cars[1].type + " " + cars[1].year + "<br>" +
cars[2].type + " " + cars[2].year;
}
</script>
``````

the above is the Javascript Iâ€™m looking at - I am new to this so just trying to understand.

I understand that this will return the make of the cars in alphabetical order using type. I donâ€™t understand why the .toLowerCase is used.

Also the;

``````if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
``````

part of this code - what is this doing? I understand the if is asking if x is less than why return -1 but can anyone explain in more detail what this code actually means?

Thanks
Mary

@marysharpe97 Hi Mary,
to answer your question, the parameter you are passing to cars.sort() is a comparison function that will define how the cars should be sorted.

You are making a comparison of Strings and when you do so (e.g in the x < y part) you are comparing the strings based on the unicode order of their characters (more info here).
In order to have a real alphabetical order, you need to use the toLowerCase method, in this case, so that you donâ€™t discriminate between capital and lower letters.
Than you do the comparison and return one of the following values:

• a value < 0 means that the car â€śaâ€ť is before the car â€śbâ€ť and so it will be put at an earlier index in the array
• a value > 0 means that the car â€śaâ€ť is before the car â€śbâ€ť and so it will be put at a later index in the array
• 0 means the two cars are the same
For this part, you can take a look at the â€śDescriptionâ€ť paragraph here

I hope it helps.
Happy coding!

Simone

1 Like

Thank you for this - itâ€™s really useful.

So am I right in thinking that only one of the following can be true;

if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;

And in this case, which of these is true and why?

Sorry Iâ€™m struggling to get my head around it

Thanks Mary

@marysharpe97 Hey, donâ€™t worry, thereâ€™s no need to apologize
You are correct, only one of those can be true, also whenever you reach a â€śreturnâ€ť, you exit from the function and the part after that doesnâ€™t execute.

Letâ€™s make an example.

While you are sorting, the car A is {type:â€śSaabâ€ť, year:2001} and the car B is {type:â€śBMWâ€ť, year:2010}
your x becomes â€śsaabâ€ť (because you took the type and made it lower case) and your y becomes â€śbmwâ€ť.
Now you compare x and y and you find out that:

• â€śsaabâ€ť is not less than â€śbmwâ€ť => return -1 wonâ€™t execute and the execution moves on the next line;
• â€śsaabâ€ť is greater than â€śbmwâ€ť (it compares the first character of each strings. If the are the same, it compares the second ones. If they are the same, it compares the 3rd ones, etcâ€¦), 1 is returned which signals the sort function that the car â€śaâ€ť is greater than the car â€śbâ€ť, so it will give a greater index in the new array than the one given to â€śbâ€ť.
• return 0 is not executed because you already exited from the function on the 2nd check, returning 1

Of course if the car A was {type:â€śBMWâ€ť, year:2010} and the car B was {type:â€śSaabâ€ť, year:2001}, the returned value would have been -1.

And if the car A was {type:â€śBMWâ€ť, year:2010} and the car B was {type:â€śbMwâ€ť, year:2099}, the resulting value would have been 0, because after putting both types in lowerCase, they would both be â€śbmwâ€ť

That makes more sense. Thank you!

So would this function always sort alphabetically, or does 1 mean alphabetically ascending (a, b, c) and -1 alphabetically descending (c, b, a), and 0 no ordering.

Mary

If you want to sort it alphabetically ascending, the way you wrote it is correct.
If you want to sort it alphabetically descending, you can switch the â€śreturn -1â€ť with the â€śreturn 1â€ť:

``````cars.sort(function(a, b){
var x = a.type.toLowerCase();
var y = b.type.toLowerCase();
//if car A would come before car B alphabetically, give it a higher index in the array
if (x < y) {return 1;}
//if car A would come after car B alphabetically, give it a lower index in the array
if (x > y) {return -1;}
//car A and car B are alphabetically equal
return 0;
});
``````

One important thing to remember is that the comparison is done by checking the unicode value of the characters. Numbers come before capital letters which come before lower case letters.

If you donâ€™t pass a comparison function as a parameter to the sort method of the array, the array will be sorted by the unicode value in ascending order. If there are some elements that are not strings, if possibile, they will be converted in strings and compared as strings (so â€ś80â€ť will be < than â€ś9â€ť).

Simone

This particular one will sort alphabetically - the sort method reorder things based on if the callback function returns 1, -1 or 0.
If the callback comparing the elements return `-1` it means that x comes before y
If it returns 1 it means that x comes after y
And if it returns 0 then they are equal.

When all the elements pass through the callback now the sort method knows how to sort them and will give back a sorted array

If you want reverse alphabetical you should be able to do it knowing this

Thanks so much for your help

Thank you for this ieahleen