DEV Community

Cover image for Array sorting callbacks
Conan
Conan

Posted on • Edited on

Array sorting callbacks

#javascript #sorting

Photo by Edu Grande on Unsplash

A short Q&A on Array#sort() and passing a basic callback.

Before starting, let's just shorten console.log:

const { log } = console
Enter fullscreen mode Exit fullscreen mode

Similar to before, the question is:

"At the end of each run, can you guess what will be logged?" 🤔

1. array vs. [...array] 

const chars = ['a', '🪴', 'n', 'Z'] const sort = arr => [...arr].sort() const sortInPlace = arr => arr.sort() // 1a) const output1 = sort() log('output1 === ', output1) log('chars === ', chars) // 1b) const output2 = sortInPlace() log('output2 === ', output2) log('chars === ', chars)
Enter fullscreen mode Exit fullscreen mode

2. numbers vs. strings 

const numbers = [2, 3, 1, 10] const strings = ['2', '3', '1', '10'] const sort = arr => [...arr].sort() // 2a) const output1 = sort(numbers) log('output1 === ', output1) // 2b) const output2 = sort(strings) log('output2 === ', output2)
Enter fullscreen mode Exit fullscreen mode

3. using a callback

If callback looks like this...

function compare(a, b) { if (a < b) return -1 if (a === b) return 0 if (a > b) return 1 }
Enter fullscreen mode Exit fullscreen mode

...then:

const numbers = [2, 3, 1, 10] const sort = () => [...numbers].sort() const sortCompare = () => [...numbers].sort(compare) // 3a) const output1 = sort() log('output1 === ', output1) // 3b) const output2 = sortCompare() log('output2 === ', output2)
Enter fullscreen mode Exit fullscreen mode

If you need a little help, I made a corresponding interactive version of the article that offers some very basic visuals (with a few extras toward the bottom!)

I'm not sure if they help intuit what's going on, but they give the answers at least! Did they meet your expectations?

Top comments (0)