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! :slight_smile:

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 :smiley:
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 :slight_smile:

Thank you for this ieahleen