Top 5 Practical Array Methods in JavaScript

forEach()

The forEach() method executes a provided function for each array element.

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

numbers.forEach(element => {
  console.log(element + 10);
});

11
12
13
14
15

The forEach just does execute the same function for each element of an array. It does not return anything. If we try to do the console.log(resultForEach) in the following code, undefined appears.

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

const resultForEach = numbers.forEach(element => {
  return element * 10;
});

console.log(resultForEach);

undefined

Reference link1

Map()

The map() method creates a new array with the results of calling a function for every array element.

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

const resultMap = numbers.map(element => {
  console.log(element + 10);
});

11
12
13
14
15

The map() method shows us the same result as the forEach() method. But the return value appears if we try to do the console.log(resultMap) in the following code. It has a return value and can generate a new array. This is the big difference between the map() method and the forEach() method.

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

const resultMap = numbers.map(element => {
  return element + 10;
});
console.log(resultMap);

[ 11, 12, 13, 14, 15 ]

Reference link2

Filter()

The filter() method returns a new array with all elements that pass the test defined by the given function.

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

numbers.filter( element => {
  if (element % 2 == 0){
    return true;
  }
  else{
    return false;
  }
});

[ 2, 4 ]

The filter() method also can generate a new array that consists of only the element which satisfies a given condition.
Reference link3

Every() & Some()

• Every()

The JavaScript Array every() method checks if all the array elements pass the given test function.

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

const resultEvery = numbers.every( element => {
  return element <= 5;
} );

console.log(resultEvery);

true

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

const resultEvery = numbers.every( element => {
  return element % 2 == 0;
} );

console.log(resultEvery);

false

• Some()

The some() method tests whether any of the array elements pass the given test function.

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


const resultSome = numbers.some( element => {
  return element % 2 == 0;
} );

console.log(resultSome);

true

We should remember the every() method and the some() method as a set. The every() method requires that all elements meet the condition, on the other hand, some() method needs at least one element meets the condition. I wrote the same condition for every() method and the some() method but the results were different.
Reference link4
Reference link5

Reduce()

The reduce() method executes a reducer function on each element of the array and returns a single output value.

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

const resultReduce = numbers.reduce((accumulator,currentValue,currentIndex,array) => {
  return accumulator + currentValue;
});

console.log(resultReduce);

15

The reduce() method is more tricky than others. It can have 4 parameters. (we can skip writing currentIndex and array) It returns not a new array but one value.

• If initialValue is specified,
  • accumulator = initialValue
  • currentValue = the first element of the array
• If initialValue is omitted,
  • the accumulator = the first element of the array
  • currentValue = the second element of the array

I am going to write what happens in the above code.

Reference link6
Reference link7