How to sort arrays with vanilla JavaScript

Today, we’re going to look at how you can sort and reorder items in an array using vanilla JavaScript. Let’s dig in!
Sorting with the Array.prototype.sort() method You can use the Array.prototype.sort() method to sort and reorder the items in an array.
It modifies the original array, and by default will order the items alphanumerically.
let wizards = [‘Merlin’, 42, ‘Gandalf’, 2022, ‘Radagast’]; // Sort the wizard array // [2022, 42, “Gandalf”, “Merlin”, “Radagast”] wizards.


This content originally appeared on Go Make Things and was authored by Go Make Things

Today, we’re going to look at how you can sort and reorder items in an array using vanilla JavaScript. Let’s dig in!

Sorting with the Array.prototype.sort() method

You can use the Array.prototype.sort() method to sort and reorder the items in an array.

It modifies the original array, and by default will order the items alphanumerically.

let wizards = ['Merlin', 42, 'Gandalf', 2022, 'Radagast'];

// Sort the wizard array
// [2022, 42, "Gandalf", "Merlin", "Radagast"]
wizards.sort();

Here’s a demo.

How to control how items in the array are sorted

You can optionally pass in a callback function that will modify the default sorting behavior.

The Array.prototype.sort() method loops through each item, and passes two items at a time as arguments into the callback function. You can compare those two items, and return an integer telling Array.sort() what to do with them.

If you return -1, it will place the first item before the second one. If you return 1, it will move the second item before the current one. If you return 0 (or nothing at all), it will leave them unchanged.

For example, let’s say you have an array of trees. Each item in the array is an object with the type of tree, and the number pineCones it has.

let trees = [
	{
		type: 'White pine',
		pineCones: 4
	},
	{
		type: 'Blue spruce',
		pineCones: 3
	},
	{
		type: 'Douglas fir',
		pineCones: 7
	}
];

You want to sort the array so that the tree with the most pine cones is first, and the one with the least pine cones is last.

In your callback function, you would compare tree1.pineCones to tree2.pineCones. If tree1 has more pineCones, you would return -1 to put it before tree2. Otherwise, you’d return 1 to put tree2 before tree1.

trees.sort(function (tree1, tree2) {

	// If the tree1 has more pine cones, put it before tree2
	if (tree1.pineCones > tree2.pineCones) {
		return -1;
	}

	// Otherwise, put tree2 before tree1
	return 1;

});

Here’s another demo.

🔥 Join the Vanilla JS Academy! A new session starts on January 30. Click here to learn more.


This content originally appeared on Go Make Things and was authored by Go Make Things


Print Share Comment Cite Upload Translate Updates
APA

Go Make Things | Sciencx (2023-01-17T14:30:00+00:00) How to sort arrays with vanilla JavaScript. Retrieved from https://www.scien.cx/2023/01/17/how-to-sort-arrays-with-vanilla-javascript/

MLA
" » How to sort arrays with vanilla JavaScript." Go Make Things | Sciencx - Tuesday January 17, 2023, https://www.scien.cx/2023/01/17/how-to-sort-arrays-with-vanilla-javascript/
HARVARD
Go Make Things | Sciencx Tuesday January 17, 2023 » How to sort arrays with vanilla JavaScript., viewed ,<https://www.scien.cx/2023/01/17/how-to-sort-arrays-with-vanilla-javascript/>
VANCOUVER
Go Make Things | Sciencx - » How to sort arrays with vanilla JavaScript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/01/17/how-to-sort-arrays-with-vanilla-javascript/
CHICAGO
" » How to sort arrays with vanilla JavaScript." Go Make Things | Sciencx - Accessed . https://www.scien.cx/2023/01/17/how-to-sort-arrays-with-vanilla-javascript/
IEEE
" » How to sort arrays with vanilla JavaScript." Go Make Things | Sciencx [Online]. Available: https://www.scien.cx/2023/01/17/how-to-sort-arrays-with-vanilla-javascript/. [Accessed: ]
rf:citation
» How to sort arrays with vanilla JavaScript | Go Make Things | Sciencx | https://www.scien.cx/2023/01/17/how-to-sort-arrays-with-vanilla-javascript/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts