Rethinking JavaScript Array Methods
Preamble: There are currently 43 JavaScript Array methods listed at the MDN website. This discussion includes about 25 of them... those that I tend to use.
Organizing Array Methods
To better understand and remember JavaScript Array methods, we can divide them into two distinct groups. In the first, we include any method that can mutate the original array. Then for the second, non-mutating group, we split those methods into three subgroups based on what they're designed to return... a) those that return a new array, b) those that return a value, and c) those that always return nothing. As an ordered list, it looks like this:
Methods that mutate the array.
Methods that are non-mutating:
a) those that return a new array,
b) those that return a value,
c) those that always return nothing.
Please be careful when using methods that can mutate the original array and only use them when your planned programming logic requires making changes to the original array. That said, let's start with listing the methods that can mutate an array, then list the non-mutating methods after... beginning with those that return a new array.
Methods that mutate the array
push() use to add item(s) to the end of the array, returns the new length.unshift() use to add item(s) to the start of array, returns the new length.pop() use to remove and return the last item in the array.shift() use to remove and return the first item in the array.reverse() use to reverse the order of items, executing changes "in place".sort() use to sort the items, executing changes "in place".splice() use to remove/replace/add items, returning array of removed items.
Methods that return a new array
filter() returns an array of those items passing a "test" function.slice() returns array of selected items, by specifying index range.map() uses a "change" function on each item to create a new array.toReversed() returns a new array with all items in the reverse order.toSorted() returns new array with all items sorted by specified order.toSpliced() returns array with specifed items spliced into original array.concat() returns array containing unsorted items from original arrays.with() returns array changed at specified index with specified value.
Methods that return a value
at() returns the value at specified array index.some() returns true if one array item passes the test.every() returns true if all array items pass the test.find() returns the first item that passes the test.findIndex() returns the array index of first item passing test.indexOf() returns the array index of the specified item.includes() returns true if the array includes the specified item.isArray() returns true if parameter is an array with at least one item.join() returns string of concatenated items with specified separator.reduce() used to calculate an accumulated value for all array items.length(an array reference) returns the number of array items.
Methods that always return undefined
forEach() use to execute a function on each item... returns undefined.
Note: with asynchronous functions, best to use the for..of loop.
In addition, my favorite "non-method" array tool is the Spread operator, which can be used to expand array elements into a new array... often combining them with new elements to make a new, larger array.
Of course there are several ways we might organized JS Array methods. This is but one way that might help new JavaScript programmers better understand and learn when to use the different array methods. If nothing else, I hope this article has prompted you to consider your own way of organizing and thinking about array methods.
In my next article, I plan to present how array methods can be used for six different types of coding logic: getting, adding, editing, removing, checking and evaluating array values. For each type of coding logic, we'll consider which Array methods might be used and, in some cases, the affects of using a mutating vs non-mutating method.
Final comment... much of the content for this article was originally prepared as part of a Scrimba Bootcamp Workshop on JavaScript Array Methods, presented in mid-December, 2023. -- Paul O.
References:
MDN Web Docs @ https://developer.mozilla.org/
W3 Schools @ https://www.w3schools.com/
