4 Must-Know JavaScript Array Methods

Essential JavaScript array methods made easy!

An article by — Halim Shams

Arrays are one of the most common things you are going to use as a programmer in your projects, and without knowing array methods, you won’t be able to ace your interview. There are way too many array methods existing currently, and knowing them will skyrocket your programming skills.

So let’s delve into some of the most pivotal array methods, you must know.

1. filter()

The filter() method is one of the most vital methods you need to know as a developer. This is a built-in function in JavaScript that allows you to filter an array by providing a condition. It executes for each element in the array and returns a new array.

Here’s an example:

const numbers = [5, 9, 12, 3, 17, 4, 1, 18, 6]

const tenPlus = numbers.filter((num) => {
 return num > 10;
});

console.log(tenPlus); // Output: [12, 17, 18]

In this example, we have an array of random numbers. We’re using the filter()method to create a new array called tenPlus, which consists of only numbers that are higher than 10.

2. map()

The map() method is another built-in function in JavaScript that allows you to transform an array by applying a function to each element in the array. It takes a callback function as an argument, which is going to execute for each element in the array.

Here’s an example of how to use map() method:

const numbers = [1, 2, 3, 4, 5]

const decupleNumbers = numbers.map((num) => {
 return num * 10;
})

console.log(decupleNumbers); // Output: [10, 20, 30, 40, 50]

In this example, we have an array of numbers. We’re using the map() method to create a new array called decupleNumbers, which contains each number from the original array multiplied by 10. The callback function takes each number from the original array, multiplies it by 10, returns the result, and stores it in a new array.

Exclusive for My Blog Readers!

Looking for fresh and exciting web development tips and tricks? Look no further! Subscribe to my weekly newsletter and get the latest trends, free tools and resources, and exclusive content delivered straight to your inbox. Join our community of savvy web developers who stay ahead of the game. Don’t miss out — sign up now!

Subscribe to Halim's Newsletter

Level up your web development skills with our weekly newsletter — join now!

3. find()

Just like the first two methods, this one can also be more efficient in a project where you need to let clients search through your website.

The find() method is a built-in JavaScript function that allows you to find the first element in an array that fulfills a given condition. It takes a callback function as an argument, which is executed for each element in the array until an element meeting the condition is found.

Here’s a simple example of how thefind() method works:

const numbers = [5, 3, 2, 7, 4, 8]

const evenNumber = number.find((num) => {
 return num % 2 === 0;
})

console.log(evenNumber); // Output: 2

In this example, we have an array of mixed numbers that includes both even and odd numbers. We’re using the find() method to find the first even number in the array. The callback function takes each number in the array as an argument, checks if it is even by testing if the remainder of the number divided by 2 is equal to 0, and returns true if it is even.

Notice that the find() method doesn’t return the output in an array.

4. forEach()

forEach() is a little distinct from the previous methods we have discovered. You may have also used or heard about this method before and used it in loops. Just like for loops, the forEach() method also iterates over the elements of an array and performs an action on each element. It requires a callback function as an argument, which is executed once for each element in the array.

Here’s a walk through of how to use this method:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((num) => {
 console.log(num); // Output: 1, 2, 3, 4, 5
})

This method does not return anything; it simply iterates over the elements of the array and executes the callback function for each element. This method can be a great replacement for the time and space taken by loops.

The difference between the forEach() and map() methods is that the map() method returns a new array, whereas forEach() doesn’t return anything, so for the record, it is recommended to avoid using the forEach() method for transforming an array and instead use the map() method.

forEach method can be a useful tool for performing an action on each element of an array, such as updating the UI or performing a calculation.

This was a wrap I hope you liked it and get something from it, don’t forget to share it with others who love to unleash their programming skills. 💛

Don’t forget to subscribe to my newsletter (Exclusive Newsletter Just for My Blog Readers): 👇

Subscribe to Halim's Newsletter

— You can follow me on Twitter as well, where I’ll share short and incredible stuffs out there, so don’t miss those. 🚀

Buy me a Coffee ☕