JavaScript sort() Method: Array Object

Last update on August 19 2022 21:50:37 (UTC/GMT +8 hours)

Description

The sort() method is used to sort the elements of an array.

Version

Implemented in JavaScript 1.1

Syntax

sort(compareFunction)

Parameters

compareFunction: The function defines the sort order. If it is not specified the array is sorted in dictionary order, not in numeric order. For example, "30" comes before "8", whereas a numeric sort 8 comes before 30.

If compareFunction is supplied, the array elements are sorted according to the return value of the compare function. If x and y are two elements being compared, then:

If compareFunction(x, y) is less than 0, sort y to x lower index than x.

If compareFunction(x, y) returns 0, leave x and y unchanged with respect to each other, but sorted with respect to all different elements.

If compareFunction(x, y) is greater than 0, sort y to a higher index than x.

Example - 1

In the following web document, sort() method sorts the various array (string, number, mixed) with and without compare function.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8" />
<title>JavaScript sort() method example</title>
<style type="text/css">
h1 {color:red}
</style>
</head>
<body>
<h1>JavaScript : sort() method</h1>
<script src="array-sort-example1.js"></script>
</body>
</html>

JS Code

var stringArray = new Array("79","A","345","Good");
var numberArray = new Array(54,11,3,600);
var mixedArray = new Array("A900","99","67",54,11,3,600);
function compareNumbers(x, y)
{
'use strict';
return x - y;
}
var newParagraph = document.createElement("p");
var newText = document.createTextNode("String Array : " + stringArray); 
newParagraph.appendChild(newText); 
document.body.appendChild(newParagraph); 
var newParagraph1 = document.createElement("p"); 
var newText1= document.createTextNode("Sorted : " + stringArray.sort());
newParagraph1.appendChild(newText1); 
document.body.appendChild(newParagraph1); 
var newParagraph2 = document.createElement("p"); 
var newText2= document.createTextNode("Number Array : " + numberArray.join()); 
newParagraph2.appendChild(newText2); 
document.body.appendChild(newParagraph2); 
var newParagraph3 = document.createElement("p"); 
var newText3 = document.createTextNode("Sorted without a compare function :" + numberArray.sort()); 
newParagraph3.appendChild(newText3); 
document.body.appendChild(newParagraph3); 
var newParagraph4 = document.createElement("p"); 
var newText4 = document.createTextNode("Sorted with compare function : " + numberArray.sort(compareNumbers)); 
newParagraph4.appendChild(newText4); 
document.body.appendChild(newParagraph4); 
var newParagraph5 = document.createElement("p"); 
var newText5 = document.createTextNode("Mixed Array : " + mixedArray); 
newParagraph5.appendChild(newText5); 
document.body.appendChild(newParagraph5); 
var newParagraph = document.createElement("p"); 
var newText = document.createTextNode("Sorted without a compare function : " + mixedArray.sort() ); 
newParagraph.appendChild(newText); 
document.body.appendChild(newParagraph); 
var newParagraph = document.createElement("p"); 
var newText = document.createTextNode("Sorted with compareNumbers : " + mixedArray.sort(compareNumbers)); 
newParagraph.appendChild(newText); 
document.body.appendChild(newParagraph);

View the example in the browser

Example - 2

In the following web document, sort() method sorts an array containing numeric numbers in ascending and descending order with the help of two functions.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8" />
<title>JavaScript sort() method example using numeric value</title>
<style type="text/css">
h1 {color:red}
</style>
</head>
<body>
<h1>JavaScript : sort() method using numeric value</h1>
<hr>
<script src="array-sort-example2.js"></script>
</body>
</html>

JS Code

var numberArray = new Array(54,11,3,600,-100,40,0);
function Ascending(x, y) 
{
'use strict'; 
return x - y;
}
function Descending(x, y) 
{
'use strict';  
return y - x;
}
var newParagraph = document.createElement("p"); 
var newText = document.createTextNode("List of the numbers : " + numberArray);
newParagraph.appendChild(newText);
document.body.appendChild(newParagraph);
var newParagraph1 = document.createElement("p");
var newText1 = document.createTextNode("Sorted in Ascending order :" + numberArray.sort(Ascending));
newParagraph1.appendChild(newText1); 
document.body.appendChild(newParagraph1);
var newParagraph2 = document.createElement("p");
var newText2 = document.createTextNode("Sorted in Descending order :" + numberArray.sort(Descending)); 
newParagraph2.appendChild(newText2);
document.body.appendChild(newParagraph2);

View the example in the browser

Practice the example online

See the Pen javascript-common-editor by w3resource (@w3resource) on CodePen.

Previous: JavaScript splice() Method : Array Object
Next: JavaScript toSource() Method: Array Object