## DEV Community is a community of 754,646 amazing developers

We're a place where coders share, stay up-to-date and grow their careers. Conan

Posted on • Updated on

# Array sorting callbacks

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
``````

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)
``````

### 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)
``````

### 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
}
``````

...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)
``````

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?