Web developers of all skill levels, from rookie programmers to coding experts, come to see the importance of JavaScript in developing modern websites. JavaScript is so dominant that it's an essential skill to know if you're going to create web apps.

One of the most powerful building blocks built-in into the JavaScript language is arrays. Arrays are commonly found in many programming languages and are useful for storing data.

JavaScript also includes useful features known as array methods. Here are some you should take a close look at to grow your skills as a developer.

What Are Array Methods?

Array methods are functions built-in to JavaScript that you can apply to your arrays. Each method has a unique function that performs a change or calculation on your array, saving you from needing to code common functions from scratch.

Array methods in JavaScript are run using a dot-notation attached to your array variable. Since they're just JavaScript functions, they always end with parenthesis which can hold optional arguments.

The Array.forEach Method

What it does: forEach() (case sensitive!) performs a function on each item in your array. This function is any function you create, similar to using a "for" loop to apply a function to an array but with much less work to code.

The forEach method has the following syntax:

We're using Array, forEach() is applied with the dot notation. You place the function you wish to use inside of the argument parenthesis, which is function(item) in the example.

Take a look at function(item). This is the function executed inside of forEach(), and it has its argument. We're calling the argument item. There are two things to know about this argument:

• When forEach() loops over your array, it applies the code to this argument. Think of it as a temporary variable that holds the current element.

• You choose the name of the argument, it can be named anything you want. Typically this would be named something that makes it easier to understand, like item or element.

With those two things in mind, take a look at this simple code below:

We're using element in this example as the variable, so here the function was created to display the days of the week

The Array.map Method

The Array map method is the most useful and widely used array method among all other methods.

What it does: map() performs a function on every element in your array and places the result in a new array.

Running a function on every element sounds like forEach(). The difference here is map() creates a new array when ran. forEach() does not create a new array automatically, you would have to code a specific function to do so.

Use map() to double the value of every element in Array, and place them in a new array. You will see the same function(element) syntax for a little more practice.

myArray is unchanged:

The difference between the forEach and map methods is that forEach is only used for looping and does not return anything. On the other hand, the map method returns a new array that is of the same length as the original array.

Also, note that map does not change the original array but returns a new array.

The Array.filter() Method

What it does: The filter() method is a useful array method that takes a function containing a test and returns a new array with all the elements that pass that test. True to its name, this method is used to filter the elements you need from the other elements. The filtration is done using a function that returns a boolean value.

Here's an example of the filter() method used for getting only those elements from the array that are divisible by 2.

In the above example, an arrow function is passed as the parameter which takes each number from the original array and checks if it is divisible by 2 using the modulo (%) and equality (===) operator.

The Array.reduce Method

The reduce method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

Note that the output of the reduce method is always a single value. It can be an object, a number, a string, an array, and so on. It depends on what you want the output of reduce method to generate but it's always a single value.

Suppose that you want to find the sum of all the numbers in the array. You can use the reduce method for that.

The reduce method accepts a callback function that receives accumulator, number,index, and array as the values. In the above code, we’re using only accumulator and number.

The Array.find Method

The find method returns the value of the first element in the array that satisfies the provided test condition.

The find method takes a callback function as the first argument and executes the callback function for every element of the array. Each array element value is passed as the first parameter to the callback function.

Suppose, we have a list of employees like this:

As you can see, using normal for loop makes the code much larger and harder to understand. But using the find method, we can write the same code in an easy-to-understand way.

• It allows us to quickly find any element without writing a lot of code

• It stops looping as soon as it finds a match so there is no need for an extra break statement.

Last Words

Without arrays, we should store each value in a separate variable, then call the code that performs the display or print, then add each item separately. It would be longer to write,

less efficient and it would carry more risk of errors. If we had 10 items for adding to the bill, that would be bad enough, but what about 100 items or 1000? All the questions are answered aforementioned.

And that's it. You're done.

Follow Cedrick Lupembe for more web-related content

If you decide to try some of these tips or need any help, send me a message on Twitter or comment on the link to your website. I'd love to check it out!