How to sort array by value in JavaScript?

The JavaScript Array.sort() method is used to sort the array elements in place and returns the sorted array. This function sorts the elements in string format. It will work well for string arrays but not for numbers. For example: if numbers are sorted as strings then “75” is bigger than “200”.

Table of Contents Show

How to order array by value in JavaScript?
How do you sort an array by value?
How to sort array by key value in JavaScript?
How to sort array numbers in JavaScript?

Example: In this example, the Array sort() method is implemented. The array is sorted as a string.

Javascript

<script>

let arr = [12, 25, 31, 23, 75, 81, 100]

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

Output:

// code shows this output
Wrong Output   : [100, 12, 23, 25, 31, 75, 81] 

// Correct Output
Correct Output : [12, 23, 25, 31, 75, 81, 100]

Example: This example sorts the array elements in string format.

javascript

<script>

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

function(a, b){return a - b}

function(a, b){return a - b}

function(a, b){return a - b}

function(a, b){return a - b}

function(a, b){return a - b}

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

Original Array
12,25,31,23,75,81,100

After sorting in Ascending order
12,23,25,31,75,81,100

Original Array
12,25,31,23,75,81,100

After sorting in Ascending order
12,23,25,31,75,81,100

function(a, b){return a - b}

Original Array
12,25,31,23,75,81,100

After sorting in Ascending order
12,23,25,31,75,81,100

function(a, b){return a - b}

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

function(a, b){return b - a}

function(a, b){return b - a}

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

Output:

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

Then, how to sort number array elements?
There are two approaches to sorting the number array in ascending order.

Using Compare Function
By Creating Loops

Using Compare Function: We can create a Compare function that returns negative, zero, or positive values.

Syntax:

function(a, b){return a - b}

Negative Value ( a < b) => a will be placed before b
zero value (a == b) => No Change
Positive Value (a > b ) => a will be placed after b

Example: This example uses compare function to sort the array elements in ascending order.

javascript

<script>

function(a, b){return b - a}

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

Original Array
12,25,31,23,75,81,100

After sorting in Ascending order
100,81,75,31,25,23,12

function(a, b){return a - b}

function(a, b){return a - b}

function(a, b){return a - b}

function(a, b){return a - b}

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

Original Array
1,15,10,45,27,100

Sorted Array
1,10,15,27,45,100

Original Array
1,15,10,45,27,100

Sorted Array
1,10,15,27,45,100

Original Array
1,15,10,45,27,100

Sorted Array
1,10,15,27,45,100

Original Array
1,15,10,45,27,100

Sorted Array
1,10,15,27,45,100

Original Array
1,15,10,45,27,100

Sorted Array
1,10,15,27,45,100

Original Array
1,15,10,45,27,100

Sorted Array
1,10,15,27,45,100

function(a, b){return a - b}

3<script>1

function(a, b){return a - b}

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

<script>5

<script>7

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

Output:

Original Array
12,25,31,23,75,81,100

After sorting in Ascending order
12,23,25,31,75,81,100

Now, we would like to sort the array in Descending order then we have to change the compare function.

Syntax:

function(a, b){return b - a}

Negative Value ( b < a) => a will be Placed after b
zero value (a == b) => No Change
Positive Value (b > a ) => a will be placed before b

Example: This example uses compare function to sort the array elements in descending order.

javascript

<script>

function(a, b){return b - a}

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

Original Array
12,25,31,23,75,81,100

After sorting in Ascending order
100,81,75,31,25,23,12

function(a, b){return a - b}

function(a, b){return a - b}

function(a, b){return a - b}

function(a, b){return a - b}

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

Original Array
1,15,10,45,27,100

Sorted Array
1,10,15,27,45,100

Original Array
1,15,10,45,27,100

Sorted Array
1,10,15,27,45,100

Original Array
1,15,10,45,27,100

Sorted Array
1,10,15,27,45,100

Original Array
1,15,10,45,27,100

Sorted Array
1,10,15,27,45,100

Original Array
1,15,10,45,27,100

Sorted Array
1,10,15,27,45,100

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

function(a, b){return a - b}

3<script>1

function(a, b){return a - b}

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

<script>5

function(a, b){return b - a}

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

Output:

Original Array
12,25,31,23,75,81,100

After sorting in Ascending order
100,81,75,31,25,23,12

Creating Loops: We can also use loops to sort the array elements. Here, we will use bubble sort (a simple sorting technique) to sort the array elements in ascending order.

How to order array by value in JavaScript?

You can use the JavaScript sort() method to sort an array. The sort() method accepts an array as an argument and sorts its values in ascending order. Arrays are sorted in place which means the original array is modified.

How do you sort an array by value?

sort() - sort arrays in ascending order. rsort() - sort arrays in descending order. asort() - sort associative arrays in ascending order, according to the value. ksort() - sort associative arrays in ascending order, according to the key.

How to sort array by key value in JavaScript?

Use Array. sort() function to sort an array of objects by key value. The Array. sort() function can be used to sort an array of objects by key value.

How to sort array numbers in JavaScript?

JavaScript Array sort() The sort() sorts the elements of an array. The sort() overwrites the original array. The sort() sorts the elements as strings in alphabetical and ascending order.