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 to 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 fifteen 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. Here's a method attached to a simple array called myArray.

        let myArray = [1,2,3];
    

        myArray.pop();
    

This code would apply a method called pop to the array.

Example Array

For each example, use a sample array that we'll call myArray, to perform the methods on. Feel free to pull up your console and code along.

        let myArray = [2,4,5,7,9,12,14];
    

These examples will assume you know the foundation of what JavaScript is and how it works. If you don't that's okay, we're all here to learn and grow.

Dig into these fifteen powerful array methods!

1. Array.push()

What it does: push() takes your array and adds one or more elements to the end of the array, then returns the new length of the array. This method will modify your existing array.

Add the number 20 to the array by running push(), using 20 as an argument.

        let myArray = [2,4,5,7,9,12,14];
myArray.push(20);
    

Check if it worked:

        console.log(myArray);
    

            [2,4,5,7,9,12,14,20]
    

Running the push() method on myArray added the value given in the argument into the array. In this case, 20. When you check myArray in the console, you will see the value is now added to the end of the array.

2. Array.concat()

What it does: concat() can merge two or more arrays into a new array. It does not modify the existing arrays but creates a new one.

Take myArray and merge an array called newArray into it.

        let myArray = [2,4,5,7,9,12,14];
let newArray = [1,2,3];
let result = myArray.concat(newArray);
    

        console.log(result);
    

        [2,4,5,7,9,12,14,1,2,3]
    

This method works wonders when dealing with multiple arrays or values you need to combine, all in one pretty simple step when using variables.

3. Array.join()

What it does: join() takes an array and concatenates the contents of the array, separated by a comma. The result is placed in a string. You can specify a separator if you want to use an alternative to a comma.

Take a look at how this works using myArray. First using the default method with no separator argument, which will use a comma.

        let myArray = [2,4,5,7,9,12,14];
myArray.join();
    

        "2,4,5,7,9,12,14"
    

JavaScript will output a string, with each value in the array separated by a comma. You can use an argument in the function to change the separator. Observe it with two arguments: a single space and a string.

        myArray.join(' ');
"2 4 5 7 9 12 14"
    

        myArray.join(' and ');
"2 and 4 and 5 and 7 and 9 and 12 and 14"
    

The first example is a space, making a string you can easily read.

The second example uses (' and '), and there are two things to know here.

First, we're using the word 'and' to separate the values. Secondly, there is a space on both sides of the word 'and'. This is an important thing to keep in mind when using join(). JavaScript reads arguments literally; so if this space is left out, everything will be scrunched together (ie. "2and4and5..." etc.) Not a very readable output!

4. Array.forEach()

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.

There is a little bit more to forEach(); look at the syntax, then perform a simple function to demonstrate.

        
myArray.forEach(function(item){
//code
});

    

We're using myArray, 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 own 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, check out this simple example. Add 15 to every value, and have the console show the result.

        
myArray.forEach(function(item){
    console.log(item + 15);
});

    

We're using item in this example as the variable, so the function is written to add 15 to each value via item. The console then prints the results. Here's what it looks like in a Google Chrome console.

The result is every number in the array, but with 15 added to it!

5. Array.map()

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 myArray, and place them in a new array. You will see the same function(item) syntax for a little more practice.

        let myArray = [2,4,5,7,9,12,14];
    

        let doubleArray = myArray.map(function(item){
return item * 2;
});
    

Check the results in the console.

        console.log(doubleArray);
    

        [4,8,10,14,18,24,28]
    

myArray is unchanged:

        console.log(myArray);
    

        [2,4,5,7,9,12,14]
    

6. Array.unshift()

What it does: Similar to how the push() method works, the unshift() method takes your array and adds one or more elements to the start of the array instead of the end, and returns the new length of the array. This method will modify your existing array.

        let myArray = [2,4,5,7,9,12,14];
myArray.unshift(0);
    

On logging the array to the console, you should see the number 0 at the start of the array.

        console.log(myArray);
    

        [0, 2,4,5,7,9,12,14]
    

7. Array.sort()

What it does: Sorting is one of the most common operations performed on an array and is highly useful. JavaScript's sort() array method can be used to sort an array of numbers or even strings with just a single line of code. This operation is in place and returns the sorted array by modifying the initial array. Take a different set of numbers for myArray this time.

        let myArray = [12, 55, 34, 65, 10];
myArray.sort((a,b) => a - b);
    

Since the sorting is done in place, you don't have to declare a separate variable for the sorted array.

        console.log(myArray);
    

        [10, 12, 34, 55, 65]
    

By default, the array is sorted in ascending order, but you can optionally pass a custom function to the sort() method to sort the array in the desired manner. In this case, I passed a custom arrow function to sort the array numerically in ascending order.

8. Array.reverse()

What it does: As the name suggests, the reverse() method is used to reverse the order of elements in the array. Note that this does not reverse the contents of the array but just the order itself. Here's an example to understand this method better:

        let myArray = [2,4,5,7,9,12,14];
myArray.reverse()
    

Log the output to the console to verify the operation.

        console.log(myArray);
    

        [14, 12, 9, 7, 5, 4, 2]
    

As you can see, the order of the elements has been reversed. Previously, the element at the last index (element 14 at index 6) is now the element at the zeroth index and so on.

9. Array.slice()

What it does: slice() is used to retrieve a shallow copy of a portion of an array. In simpler terms, this method allows you to select specific elements from an array by their index. You can pass the starting index of the element from which you want to retrieve and elements and optionally the end index as well.

If you don't provide the end index, all the elements from the start index to the end of the array will be retrieved. This method returns a new array and does not modify the existing one.

        let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(2);
    

In the code above, all the elements from the second index to the last index are retrieved since the end index parameter isn't passed. Log both the arrays to the console.

        console.log(myArray);
console.log(slicedArray);
    

        [2, 4, 5, 7, 9, 12, 14]
[5, 7, 9, 12, 14]

    

Evidently, the initial array is not modified by the slice() method and instead returns a new array that is stored in the slicedArray variable. Here's an example in which the end index parameter is also passed to the slice() method.

        let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(1, 3);
console.log(slicedArray);
    

        [4, 5]
    

10. Array.splice()

What it does: splice() is a helpful array method used for removing or replacing elements in the array in place. By specifying the index and number of elements to delete, it modifies the array.

        let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3);
console.log(myArray);
    

In the above example, the myArray array is spliced from index 2 and 3 elements are removed from it. The array now consists of:

        [2, 4, 12, 14]
    

To replace the elements rather than just deleting them, you can pass any number of optional parameters with the elements you want to replace with, like this:

        let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3, 1, 2, 3);
console.log(myArray);
    

        [2, 4, 1, 2, 3, 12, 14]
    

11. Array.filter()

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.

        let myArray = [2,4,5,7,9,12,14];
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);
console.log(divisibleByTwo);
    

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. Here's what the output looks like:

        [2, 4, 12, 14]
    

12. Array.reduce()

What it does: reduce() is an array method that takes a reducer function and executes it on each array element to output a single value while returning. It takes a reducer function with an accumulator variable and a current element variable as required parameters. The accumulator's value is remembered across all the iterations and is ultimately returned after the final iteration.

A popular use case of this method is to calculate the sum of all the elements in the array. The implementation of this functionality is as follows:

        let myArray = [2,4,5,7,9,12,14];
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);
    

0 is passed as the second parameter in the above example, which is used as the initial value of the accumulator variable. The sumOfNums variable will contain the return value of the reduce() method which is expected to be the sum of all elements in the array.

        console.log(sumOfNums);
    

        53
    

13. Array.includes()

What it does: Searching for an element in an array to check if it is present is an operation that is used quite frequently and hence, JavaScript has a built-in method for this in the form of includes() array method. Here's how you can use it:

        let myArray = [2,4,5,7,9,12,14];
console.log(myArray.includes(4));
console.log(myArray.includes(2, 1));
console.log(myArray.includes(12, 2));
console.log(myArray.includes(18));
    

This method takes a required parameter, the element to search for, and an optional parameter, the array index from which to start searching from. Depending upon whether that element is present or not, it will return true or false respectively. Therefore, the output will be:

        true
false
true
false
    

14. Array.indexOf()

What it does: indexOf() method is used to find out the index at which the first occurrence of a  specified element can be found in the array. Although it is similar to the includes() method, this method returns the numerical index or -1 if the element is not present in the array.

        let myArray = [2,4,5,7,9,12,14];
console.log(myArray.indexOf(4));
console.log(myArray.indexOf("4"));
console.log(myArray.indexOf(9, 2));
    

indexOf() method uses strict equality to check if an element is present, which means that the value, as well as the data type, should be the same. The optional second parameter takes the index to start searching from. Based on these criteria, the output will look like this:

        1
-1
4
    

15. Array.fill()

What it does: Oftentimes, you may need to set all the values in the array to a static value such as 0. Instead of using a loop, you can try the fill() method for the same purpose. You can call this method on an array with 1 required parameter: the value to fill the array with and 2 optional parameters: the start and the end index to fill between. This method modifies the exiting array.

        let myArray = [2,4,5,7,9,12,14];
let array1 = myArray.fill(0);

myArray = [2,4,5,7,9,12,14];
let array2 = myArray.fill(0, 2);

myArray = [2,4,5,7,9,12,14];
let array3 = myArray.fill(0, 1, 3);
    

On logging the output to the console, you'll see:

        console.log(array1);
console.log(array2);
console.log(array3);
    

        [0, 0, 0, 0, 0, 0, 0]
[2, 4, 0, 0, 0, 0, 0]
[2, 0, 0, 7, 9, 12, 14]
    

Next Steps in Your JavaScript Journey

Arrays are a powerful part of the JavaScript language, which is why there are so many methods built-in to make your life easier as a developer. The best way to master these fifteen methods is to practice.

As you continue to learn JavaScript, MDN is a great resource for detailed documentation. Get comfortable in the console, then take your skills up a notch with the best JavaScript editors for programmers. Ready to build your website with JavaScript? Why not take a look at some frameworks you can consider.