A Guide to Basic Array Methods in JavaScript

Photo by Ronald Cuyan via Unsplash

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.

With the method unshift(), you can add one or more elements to the front of an array.

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.

With push(), you can add elements to the end of an array. The return value will be the new length of the array.

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).

The sort() method is destructive and will change the order of the original array

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:

If your array contains numbers, use one of the above callback functions to sort correctly. The callback functions above use arrow function notation.

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.

The reverse() method will physically reverse the current order of a given array.

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.

Use the optional second argument to only look at elements starting on or after the provided index number.

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.

Be careful, lastIndexOf() is case sensitive!

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.

The includes() method is case sensitive and will return a boolean value if a given element is present.

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.

Remember: length is a property and not a method, so it does NOT need parenthesis.

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.