Top 5 Practical Array Methods in JavaScript
Tags: javascript, beginners
Published: 2022-09-28 19:25:48

##forEach()
> The forEach() method executes a provided function for each array element.
```javascript
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. 
```javascript
const numbers = [1,2,3,4,5];

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

console.log(resultForEach);
```
```
undefined
```
[Reference link1](https://www.programiz.com/javascript/library/array/foreach)
___
##Map()
> The map() method creates a new array with the results of calling a function for every array element.
```javascript
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.
```javascript
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]
(https://www.programiz.com/javascript/library/array/map)
___
##Filter()
> The filter() method returns a new array with all elements that pass the test defined by the given function.
```javascript
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](https://www.programiz.com/javascript/library/array/filter)
___
##Every() & Some()
- Every()

> The JavaScript Array every() method checks if all the array elements pass the given test function.
```javascript
const numbers = [1,2,3,4,5];

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

console.log(resultEvery);
```
```
true
```
```javascript
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.
```javascript
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](https://www.programiz.com/javascript/library/array/every)
[Reference link5](https://www.programiz.com/javascript/library/array/some)
___
##Reduce()
> The reduce() method executes a reducer function on each element of the array and returns a single output value.

```javascript
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.

Word | Meaning |
--- | --- |
accumulator | initial value or the previous result which was being executed | 
currentValue | the value which is being executed right now | 
currentIndex | the index which is being executed right now | 
array | array which is provided ahead |

* 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.

How many times | accumulator | currentValue | currentIndex | 
--- | --- | --- | --- | 
1st | 1 | 2 | 1 | 
2nd | 3 | 3 | 2 | 
3rd | 6 | 4 | 3 | 
4th | 10 | 5 | 4 | 
[Reference link6](https://www.programiz.com/javascript/library/array/reduce)
[Reference link7](https://qiita.com/chihiro/items/1047e40514a778c08baa)