DEV Community

How not to sort an array in JavaScript

Phil Nash on August 25, 2019

Array sorting is one of those things you don’t spend too long thinking about, until it stops working for you. Recently I was working with array of ...

Read full post

Isa Levine • Aug 28 '19

Hi Phil, this is a great writeup! Do you mind if I link to this at the bottom of my recent article on JavaScript sorting? I'd love to direct people to the inconsistencies and gotchas with nulls and undefineds. :)

Phil Nash • Aug 28 '19

I would love it if you wanted to link to it! Thanks!

Isa Levine • Aug 28 '19

Thanks Phil! Link has been added! :)

(dev.to/isalevine/a-quick-review-of...)

Olzhas Askar • Aug 28 '19

I think the biggest disadvantage of sort() is that it sorts in place.
You need to do some relatively ugly hacks like spreading:

[...array].sort().map(console.log)

in order to use the power of FP.

zhuangya • Aug 28 '19

it returns an array of undefineds :/

damon • Aug 28 '19

That's because the console.log returns undefined, and it's being used in the call to .map().

var array = [9, 2, 3, 8, 1, 0]
var orderedArray = [...array].sort()

console.log(array)
// [9, 2, 3, 8, 1, 0]
console.log(orderedArray)
// [0, 1, 2, 3, 8, 9]

var logReturn = console.log("hello world")
// hello world
console.log(logReturn)
// undefined

zhuangya • Aug 29 '19

exactly, my point is we should not use map here at all.

Phil Nash • Aug 28 '19

Yeah, it is a shame that it acts in place as we move to code that attempts to reduce the number of side effects. At least we can work around it, the problem is just remembering to.

Stefano • Aug 28 '19

Hi Phil,
would not have been the case to use lodash for undefined and null ?

Valentin Jarysta • Aug 28 '19 • Edited

This would have worked as well, therefore you might not need lodash.

Phil Nash • Aug 28 '19

Hi Stefano, not sure what you mean there. Could you explain more?

Stefano • Aug 28 '19

lodash.com/docs/4.17.15#compact

Paweł Kowalski • Aug 28 '19

Wow. Using lodash for that. Wow. :)

Phil Nash • Aug 28 '19

Oh, sure, I could have used that. I’d probably prefer to just use an array filter though, as I do later in the post, as it will only filter the things I want and don’t incur the overhead of requiring a library like (or even just a function from) lodash.

Paweł Kowalski • Aug 28 '19

Hmm, i always filter the falsy values by doing arr.filter(x => x) (i probably would do that if i wanted <1 numbers in there though ;)

Olzhas Askar • Aug 28 '19

I like

array.filter(Boolean)

Paweł Kowalski • Aug 28 '19

Nice one, didnt know that one :)

Phil Nash • Aug 29 '19

They are both cool filter expressions! 😎

But... they both lose 0 or '' which you might not want. That's why I like the undefined check.

> const array = [-1, 0, 1]
[ -1, 0, 1 ]
> array.filter(Boolean)
[ -1, 1 ]
> array.filter(x => x)
[ -1, 1 ]

André Costa Lima • Aug 28 '19

Very informative, thank you! 😊👌💪

Phil Nash • Aug 29 '19

Glad you enjoyed it, thanks!