Four Top Array Methods in JavaScript: All You Need To Know

In this article, we will be looking at four of the modern Javascript Es6 array methods: map(), forEach(), filter(), reduce() methods.

What are Array Methods in JavaScript?

JavaScript methods are incredibly useful for performing various actions on objects. Essentially, a JavaScript method is a property that holds a function definition, which makes it easy to work with objects programmatically.
Whether you're manipulating the DOM, handling user input, or performing complex calculations, JavaScript methods provide a powerful and flexible toolset for developers to work with.
So if you're looking to take your web development skills to the next level, mastering JavaScript methods is a smart move!

What is The map() JavaScript Array Method?

The .map method allows you to iterate through an array and carry out a specific function call for each of the array items.
This will create a new array in which the changed array items are contained.

The general syntax for the map method is:

array.map(function to be carried out on each item)


//map method with a function call 

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

function double(x) {
  return x*2;
};

const newNumbersArray = numbers.map(double);

console.log(newNumbersArray);

//console output = [2, 4, 6, 8, 10]

//map method with an annonymous function call 

const anotherNumbersArray = numbers.map((x) => {return x*3});

console.log(anotherNumbersArray);

//console output = [2, 4, 6, 8, 10]

In the code block above, there are two examples of how the map method works.

In the first example, we defined a function outside the map method. The function we defined takes in the command we want to happen to each of the items in the array. The second example sees us using an arrow function to define our function call directly inside the method.

What is the forEach() JavaScript Array Method?

The forEachmethod calls a function for each element in an array.

The forEachmethod is similar to the map method in that it iterates over the items in an array with a function.

However, the difference between a forEachmethod and a mapmethod is that a map method returns a new array of the modified array items while a forEachmethod returns undefined.

We use a forEachmethod when we have a small array to iterate over, as it is faster than the map method.

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

const newArray = [];

numbers.forEach((x) => {newArray.push(x*2)})

console.log(newArray);

//console output = [2, 4, 6, 8, 10, 12, 14]

You will notice in the example above that we had to create a new array ourselves and add our updated list items to it.

What is the filter() JavaScript Array Method

What the filter method does is that it returns, in a new array, the array items that satisfy/meet the condition embedded in the function.

const numbers = [10, 2, 13, 4, 50, 60, 7];

const newArray = numbers.filter((x) => {return x > 10});

console.log(newArray);

// console output = [13, 50, 60]

We see that in the new array newArraythat the numbers returned are the ones that satisfy the condition in the function. That is, it returned numbers that were greater than 10.

What is the reduce() JavaScript Array Method

The reduce() method executes a reducer function for an array element. The reduce() method returns a single value: the function's accumulated result. The reduce() method does not execute the function for empty array elements. The reduce() method does not change the original array.

const numbers = [10, 2, 13, 4, 50, 60, 7];

numbers.reduce((total, num) => {return total * num})

// output = 21840000

The reduce method takes two required parameters, total and
currentValue.

The reduce method does something similar to a scalar operation on the array, which is a vector. In a scalar operation (addition, multiplication, subtraction, or division) of a vector (array), only one value is returned.

Think of the total parameter as the present value or the current array. The currentValue is the individual values in the array.

We can now determine the scalar operation we want to happen on the array or vector. In the case of the example above, each item on the array, starting from index 0 is multiplied by each other to make one single unit value.

That's the end of this article for today! Thanks for dropping by. I hope you had as much fun reading this as I did writing it.
Connect with me on Linkedin