Advanced JS Array Manipulation
This is part three of an ongoing blog series about using arrays in JavaScript. If you haven’t read part one or part two, I’d recommend doing so.
We have learned about the basics of arrays in JavaScript. Then, we learned about how to do some basic manipulation of arrays. Now, we will discuss how to do some more advanced array manipulation including sorting, reverse sort, and finding the minimum or maximum.
Sorting an Array in Alphabetical Order — .sort()/.reverse()
Sometimes you may have an array and want to sort it in alphabetical order (numeric later). You can do this using the .sort() method on an array.
let fruit = ["Banana", "Apple", "Pear", "Grapes"]
fruit.sort() //=> ["Apple", "Banana", "Grapes", "Pear"]You can even reverse the sort!
fruit.reverse() //=> ["Pear", "Grapes", "Banana", "Apple"]Sorting an Array in Numeric Order — .sort(function)
By default, the .sort() method will sort the values as strings. This means that it will convert the numbers to strings before trying to compare them making 25 come after 100 because 2 is greater than 1. This is fixable by creating a function to compare within the sort method.
// Wrong
let nums = [10, 50, 20, 100, 40]
nums.sort() //=> [10, 100, 20, 40, 50]// Correct - In ascending order
let nums = [10, 50, 20, 100, 40]
nums.sort(function(a, b) {return a - b}) //=> [10, 20, 40, 50, 100]// Correct - In descending order
let nums = [10, 50, 20, 100, 40]
nums.sort(function(a, b) {return b - a}) //=> [100, 50, 40, 20, 10]
Find the Minimum and Maximum Numbers in Array — .min()/.max()
You can find the minimum and the maximum numbers in an array very easily with just one line of code. The Math.min() and Math.max() functions allow you to chain on the .apply() method (from the array prototype) to continuously iterate through the array to check for the minimum or maximum values.
The .apply() method requires two arguments. (func.apply(thisArg, [argsArray]))
From the MDN:
thisArg
The value of this provided for the call to func. Note that this may not be the actual value seen by the method: if the method is a function in non-strict mode code, [null](<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null>) and [undefined](<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined>) will be replaced with the global object, and primitive values will be boxed. This argument is required.
argsArray Optional
An array-like object, specifying the arguments with which func should be called, or [null](<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null>) or [undefined](<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined>) if no arguments should be provided to the function. Starting with ECMAScript 5 these arguments can be a generic array-like object instead of an array. See below for browser compatibility information.
let nums = [150, 1111, -42, 0, 542]
Math.min.apply(null, nums) //=> -42
Math.max.apply(null, nums) //=> 1111// As covered in previous blogs, you can always create a variable
// and set the min/max functions to a variable
let maxNumber = Math.max.apply(null, nums)
maxNumber //=> 1111
Conclusion
In the last three blog posts, we learned how to create and manipulate arrays fairly effectively. As previously emphasized, arrays are one of the most powerful data structures and are used all of the time in programming. It is very important to learn how to use them and be very effective with them. Next, I will talk about how to deal with iterating through arrays!
