Hey! It's been a while, but I'm back. 😎

In this post, I'm going to summarize a handful of JavaScript array methods I've found to be really useful as a full-stack developer. While I won't cover every single method that exists (not even close), knowing how these ones are used will be super useful for you, especially if you're just starting out using arrays.

Let's get started!

Array.length

Okay, okay, I know this one is an array property, but I felt it important enough to include here due to how much I've used it. Array.length will return a number representing how many items are present in a given array.

One of my go-to uses for Array.length is to test if an array contains any items. Since 0 is a 'falsy' value in JavaScript (meaning it will equate to false if used in logic statements), Array.length can be used in the argument of an if statement to do something (or not 🙂) if the given array has or doesn't have any elements.

For instance, maybe you've done a network request to fetch an array of records. Once the request is done, you want a string (let's call it message) to be different based on whether or not the array has any records in it.

Note how we don't have to even put records.length === 0 in our if statement, since 0 is a falsy value!

Array.push() & Array.pop()

While Array.push() and Array.pop() are 2 different methods, I’m grouping them together since they’re basically opposites of each other.

Array.push() is used to add an element to the end of an array. It will then return a number representing the new length of the array.

Array.pop() is used to remove an element from the end of an array. Array.pop() will then return this element in case you need it. Due to this, Array.pop() can be set to a variable to hold the value it returns.

Array.shift() & Array.unshift()

Much like Array.push() and Array.pop() are opposites for adding and removing items from the end of an array, Array.shift() and Array.unshift() are used to do similar things to the front of an array.

Array.shift() removes the first element from an array and returns it. This is very similar to Array.pop(), which does this same thing to the end of an array.

Array.unshift(), just like Array.push(), will add an element to an array. However, Array.unshift() will add this element to the front of the array, opposite from Array.push() doing this to the end of an array. Array.unshift() will return a number to represent the new length of the array.

Here’s some code showing all 4 of the methods we just talked about:

Array.forEach()

Array.forEach() is one of the easiest ways to loop over an array in order to do some sort of action for each element (hence the name 😉). Array.forEach() takes in a callback function as a parameter, and will execute that function once for each element in the array.

For instance, we could log each element of an array like this:

Array.forEach() can also accept a 2nd parameter (and a 3rd but that’s beyond the scope of this post). This second parameter will always be equal to the current array index (a number) of the element the forEach() is currently being acted on.

We could edit our prior function to only print every other element in the array:

As for that 3rd parameter I mentioned, here's the link to the MDN docs for Array.forEach() that covers the usage of the parameter. Feel free to check it out if you’re interested.

NOTE: Array.forEach() does NOT work with asynchronous code (such as a network request). If you need to do asynchronous tasks in a loop, you’re better off with something like a for, for…of, or a for…in loop (for…of is a personal favorite of mine).

Array.map()

You might notice Array.map() is very similar to Array.forEach(). On a basic level, they are! However, unlike Array.forEach(), which always returns undefined, Array.map() returns an array corresponding to the original array, after doing an action for each element.

Because Array.map() has a return value (an array), you should only use it when you actually need to use this value. If you still need to do something for each item in an array, but don't need a return value, you should use Array.forEach() or a for loop instead.

Another thing to note is Array.map() may give you unwanted items in the returned array, depending on your use case. For instance you could end up with elements being undefined, like this:

There are lots of ways to get around this, such as filtering out the undefined values, or using a reducer. I typically prefer to create an empty array first, then push items to it using Array.forEach() if I foresee this being an issue.

Array.includes()

Array.includes() is super useful when you want to check if an array contains (or includes 🤯) a specific value. For instance, maybe you’re adding a bunch of elements to an array, but want to make sure you don't add one that's already there. You could use Array.includes() to easily do this:

NOTE: Array.includes() cannot be used to check an array for much more than basic data types like numbers, strings, and things like that. For instance, we can’t check if an array includes an object with specific key/value pairs like this:

Array.filter()

Array.filter() can be used to (you guessed it) filter an array to only contain the element(s) you want. The returned array will contain elements that cause the return value in the method’s callback function to be true.

If you recall our Array.map() issue from earlier, where the returned array might have undefined values, we could use Array.filter() to get rid of these by chaining the two methods together.

Array.join()

If you ever need to show the user a list of comma-separated values, Array.join() is for you! Array.join() will return a string with all the values of a given array, separated by a string of your choice (such as a comma).

A common usage of Array.join() for me is building HTML strings based on JSON data. For instance, given the same array as above, what if we instead want to create an HTML unordered list with list items for each array element? We can do something like this:

Honorable Mentions

There are many more JavaScript array methods I've not mentioned. I'd highly recommend checking out the JavaScript array documentation on MDN if you're interested in learning more!

My honorable mentions are methods i've found useful, but not quite as often as the ones I've outline above. Your mileage may vary. 🚗

Array.reduce()

This method will accept a callback function to condense a given array down to a single value. MDN Doc

Array.sort()

Sorts an array based on a given callback function. This function should compare 2 array elements and determine which is greater/less than the other, or if they're equal. MDN Doc

Array.splice()

Allows you to edit an array by adding/removing elements at the index of your choice. A common use case is to delete a specific element from an array when a user deletes the corresponding item from a list. MDN Doc

...

If you made it this far, I just want to thank you for reading! I hope you were able to learn something new from this post, and hope you'll check back for the next one! 🤠