Sorting Function explanation

Question

I am quite a newbie to JavaScript programming. One of my team members has written a code that I don't really understand and the person is unable to explain it properly because of language barriers.

The code is supposed to for sorting items on a website. I understand that the function changeOptionValue consists of switch statements. We have 3 cases, lowest, highest and alphabetical. We call upon the sort_by variable that is defined below in each instance through the sort.method.

The parameters ('price', false, parseFloat) refer to different things. The first parameter is used to set the list. The second parameter is used to set the test condition (Question: why is it false in the low case and true in the high case). The third parameter parseFloat is used to display the content, which is a floating Point number.

The thing in general, I don't understand is the function expression var sort_by. Does primer refer to the floating point number? So if I check for primer!=null and I check if it is a floating point number and return the number in that field. In the second case I just retrieve the strings and check them alphabetically.

In the end I use the reverse to logically order things alphabetically expressed by the (a>b) part.

function changeOptionValue() {
    var option = document.getElementById("optionMenu").value;
    var toOrder = getProducts();
    switch (option) {
        case "lowest":
            toOrder.sort(sort_by('price', false, parseFloat))
            break;
        case "highest":
            toOrder.sort(sort_by('price', true, parseFloat))
            break;
        case "alphabetical":
            toOrder.sort(sort_by('name', false, ))
            break;
        default:
            break;
    }
    setProducts(toOrder);
    generateShopDOM()
}

var sort_by = function (field, reverse, primer) {
    //To get the value of the object (name or price)
    var key;
    if (primer!=null){
        key= function (x) { return primer(x[field]) }
    } else{
        key= function (x) { return x[field] };
    }

    //if you want it low to high or vice versa
    if(reverse==true){
        reverse=-1;
    }else{
        reverse=1;
    }

    return function (a, b) {
        return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
    }
}

Answer 1

As a quick primer, Array​.prototype​.sort() sorts the given array, either lexicographically by default, or by using a comparer function to define the sorting order.

In your code sample, the function sort_by(...) is a higher order function, a factory function if you will, that creates comparer functions depending on the given parameters. Let's go over its parameters in order:

• field is the field in the compared objects to use for comparison;
• reverse defines whether the sort should be ascending or descending;
• primer could also be called a parser or normalizer, it is an optional function to standardize the input value.

In the above example, parseFloat() is used to normalize values. Note that the function isn't called, but is passed as a parameter and is called later instead. The primer != null condition checks whether a parser is defined, and if so, use it to normalize the value before comparing.

The return statement (a > b) - (b > a) is the canonical safe way to compare values, see this answer for more information on that.

To put all of this into context, the call

toOrder.sort(sort_by('price', true, parseFloat))

will create a comparer function (the return value of sort_by) that will then be used to sort the toOrder array by using values in the 'price' field, returned in reverse order (reverse === true), parsing the field value as a float (primer === parseFloat) before comparing.