A Guide to Basic Array Methods in JavaScript
Being able to traverse, alter, and inspect an array is an essential foundation for any programming language. In this article, I explore and outline the basic methods available to the array object that every programmer using JavaScript should know.
Table of Contents:
- Adding to an array:
unshift()
,push()
- Removing elements from an array:
shift()
,pop()
- Changing the order of an array:
sort()
,reverse()
- Inspecting an array:
indexOf()
,lastIndexOf()
,includes()
Adding to an array
unshift()
— Adds one or more elements to the beginning of an array and returns the new length of the array. This method is destructive, meaning that the original array will be modified.
Click here to view more information on MDN web docs.
push()
— Adds one or more elements to the end of an array. The return value will be the new length of the array. This method is destructive.
Click here to view more information on MDN web docs.
Removing elements from an array
shift()
— Removes only the first element of an array and returns the removed element. This method does not take arguments and it is destructive. This method will return undefined
if there are no elements available to remove from the array.
Click here to view more information on MDN web docs.
pop()
— This method removes or “pops off” the last element. This method does not take arguments and it is destructive. It is a destructive method that returns the removed element.
Click here to view more information on MDN web docs.
Changing the order of an array
sort()
— This method sorts elements by converting them into strings and sorting them alphabetically. This method is destructive and will permanently change the order of the given array.
Click here to view more information on MDN web docs (highly recommended).
Because there is a string conversion, you will get unexpected results when applying this method to an array of numbers. To correct this behavior, add a callback function sort()
that will compare the numeric values passed in. This callback function is typically written in one of two ways:
reverse()
— This method will reverse the order of elements in a given array. This method is destructive, i.e. it will permanently change the order of the array, and does not take arguments.
Click here to view more information on MDN web docs.
Inspecting an array
indexOf()
— This method returns the index value of a given element in an array. Additionally, it can take a second argument of an index number and it will only look at elements starting on and after that index number. This is useful if you have two identical elements in the same array.
Click here to view more information on MDN web docs.
lastIndexOf()
— This method will return the last index of the given element in an array. If there are one or more matches, the last index of that element will return. If there is no match, the return value with be -1
.
Additionally, lastIndexOf()
is case sensitive so while "Rugby"
might be in our sports
array, sports.lastIndexOf("rugby")
will return -1
.
Click here to view more information on MDN web docs.
includes()
— This method takes in an argument and returns a boolean value of true
if the element is present in the array or false
if it is not. This method is also case sensitive.
Click here to view more information on MDN web docs.
BONUS
This next one is technically property and not a method, but it is still one of the most important tools available to an array in JavaScript.
length
— Returns the number of elements in the receiver array. It does not include parenthesis, length
not length()
, and does not alter the original array.
Apart from its basic use, thelength
property is commonly used to access the last element of an array via square bracket notation, []
.
Click here to view more information on MDN web docs.
Conclusion
These are just a handful of basic methods available to the array object in JavaScript. Once you have these down, there are a host of more advanced methods that take array traversal to new heights. For a complete list of these methods, click on any of the MDN web doc links above and you will see them listed on the left-most vertical column.