Sorting not being applied in a list of objects

Question

I am sorting an array of objects and the sorting function seems to do not have any result on the array. So it returns the same list.

I exported the array and the sorting functions to the window and execute them manually then the resulting array is well sorted.

import { connect } from "react-redux"

import DestinationsGallery from "./destinationsGallery"

import DestinationFilter from "./functions/filter"
import WindPoint from "./functions/windPoint"
import {sortCosts,sortWind, sortName} from "./functions/sort"

const getSelectedDestinations = ( catalog, filter ) => { 
    let paramCatalog = null 
    let paramSorted = null

    if (catalog) {
        paramCatalog =  catalog
            .map(spot => WindPoint(spot,filter))
            .filter( item => DestinationFilter( item,filter ) )
            .sort( ( a,b ) => a.name.localeCompare( b.name ) )


        window.catalog = paramCatalog
        window.sortCosts = sortCosts
        window.sortWind = sortWind
        window.sortName = sortName

        console.log("Unsorted",paramCatalog)    
        paramSorted = paramCatalog.sort( sortName )
        console.log( "Sorted name",paraSorted, paramCatalog.sort( sortName ) )


        let paraSorted = paramCatalog.sort( sortWind )
        console.log( "Sorted wind",paraSorted )
    }
    return paramSorted
}

export default connect( store => ({
    destinations: getSelectedDestinations(store.kiteSpots.catalog.list, store.kiteSpots.filter),
    filter: store.kiteSpots.filter,
}),null)(DestinationsGallery)

and my sorting functions are:

export const sortCosts = ( a,b ) => ( a.data.CostsRank > b.data.CostsRank? 1 : -1 )  
export const sortWind = ( a,b ) => ( a.windPoint.probability > b.windPoint.probability ? 1 : -1 ) 
export const sortName = ( a,b ) => { return a.name > b.name ? 1 : -1 }

So I just would like the output list is correct

Answer 1

This code does not mutates (sort) the catalog array if it's what you expected, only param catalog will be sorted as the sort is applied to the result of the mapping and filtering of catalog which both return new array instances.

Maybe if you post more code and source data we could find what's wrong.

That said, you shouldn't compare strings this way, using a mathematical operator, as it may not behave as you expect.

This discussion from stackoverflow explains a bit the differences. In short codepoint order (used when comparing with >) is not the same as actual alphabetical order.

Also, the return value of a comparison function should be 1, -1 or 0 because not swaping equal values sometimes matter.

For instance sorting [0,0,1,1,2,2,3,3] by allowing swapping equal comparing value does not matter.

But sorting [{ name: 'foo', value: 0},{ name: 'bar', value: 0},{ name: 'fuu', value: 1},{ name: 'ber', value: 1}] according to value may change the order of the original array when it may not be desirable.

It's true that older implementation of the native sort did not care for equal comparing value and may have the order anyway but now nore implementations respect the contract of not modifying already sorted arrays.

If you care about alphabetical order of unicaode strings, try and use String.prototype.localeCompare.

If you're comparing numbers (say a and b), and if you don't have to deal with NaN or infinity or undefined, it is more correct and requires less native instructions to return a-b for ascending order and b-a for descending order.

Answer 2

You can try using String.prototype.localeCompare for comparing strings. See MDN.

const x = [
  { name: "James"},
  { name: "Zeb"},
  { name: "Annie"},
  { name: "Michaèl"},
  { name: "James"},
];

console.log( x.slice(0).sort( (a, b) => a.name.localeCompare(b.name) ) );
// include value equality
console.log( x.slice(0).sort( (a, b) => -(a.name < b.name) || +(a.name > b.name)) );

Or include the possible value equality in comparing:

a.name > b.name ? 1 : a.name < b.name ? -1 : 0) or (see comments)

-(a.name < b.name) || +(a.name > b.name)

Or (for performance) you can use Intl.Collator (see MDN and the next snippet)

const intlCollator = new Intl.Collator("de", {sensitivity: "variant"});
console.log( 
  [
    { name: "Anna"},
    { name: "Michiel"},
    { name: "Desiré"},
    { name: "Siënna"},
    { name: "Jøn"},
    { name: "Mariêke"},
    { name: "José"},
    { name: "Anna"},
    { name: "Renée"},
    { name: "Désirée"},
  ].sort( (a, b) => 
      intlCollator.compare(a.name, b.name) )
);

.as-console-wrapper { top: 0; max-height: 100% !important; }