JS default sort

by TigerAsks

HTML

<div class ="resultDisplay" />

CSS

.resultDisplay {
    display: flex;
    flex-direction: column;
}

JavaScript

const init = () => {
	const resultDisplay = document.querySelector('.resultDisplay')
    const print = (msg) => {
    	const line = document.createElement('p')
        line.innerHTML = msg
    	resultDisplay.appendChild(line)
    }
    
    const arr = [9, 15, 25]
    print(`arr === [${arr}]`)
    print('arr.sort() without sorting function sorts "9", "15" and "25" as STRINGS<br/>because "1" comes before "2" and "2" comes before "9", "9" will actually be sorted in last place')
    
    //I need to copy the array, here because sorting happens in-place
    print(`arr.sort() === [${[...arr].sort()}]`)
    print(`
    	i.e.<br>
    	arr[1] === ${arr[1]}<br>
    	arr.sort()[1] === ${[...arr].sort()[1]}
    `)
    
    print(`
    	therefore<br>
    	arr[1] + arr.sort()[1] === ${arr[1] + arr.sort()[1]}
    `)
    
    const arr2 = [9,15,25]
    print(`
    	to sort by value, you need to pass a sort function<br>
        arr.sort((a,b) => a - b) === [${[...arr2].sort((a,b) => a - b)}]<br>
    	arr[1] + arr.sort((a,b) => a - b)[1] === ${arr2[1] + arr2.sort((a,b) => a-b)[1]}
    `)
    
}

init()