[Array] forEach, map, filter, reduce

 

Array는 다양한 메서드를 가지고 있다. 그 중 Array의 요소들을 사용하여 원하는 배열 혹은 결과 값을 받을 수 있는 메서드 중 대중적으로 많이 사용하는 네 가지의 메서드가 있다.

---

1. forEach

forEach() 메서드는 각 요소에 대하여 요소값과 인덱스를 활용한 함수를 작성하여 사용하는 메서드이다. 이 때 forEach는 return 값이 없다.

const num = [1,2,3,4,5,6];
const init = 10;
const num_forEach = num.forEach((val,cur) => {
    console.log(val, cur)
    return val + cur},init);

console.log(num_forEach);

// 1 0
// 2 1
// 3 2
// 4 3
// 5 4
// 6 5

---

2. map()

map()은 배열 각 요소에 대하여 주어진 함수를 수행한 결과를 모아 새로운 배열을 반환하는 메서드이다.

사용 방법은 3개의 매개변수와 이를 사용하는 함수를 작성하여 사용한다.

 

아래와 같이 사용 가능하다.

const num = [1,2,3,4,5,6];
const num_map = num.map((val,index,arr) => {
	console.log(val,index,arr);
	return val*2;
});

console.log(num_map);
//1 0 [ 1, 2, 3, 4, 5, 6 ]
//2 1 [ 1, 2, 3, 4, 5, 6 ]
//3 2 [ 1, 2, 3, 4, 5, 6 ]
//4 3 [ 1, 2, 3, 4, 5, 6 ]
//5 4 [ 1, 2, 3, 4, 5, 6 ]
//6 5 [ 1, 2, 3, 4, 5, 6 ]
//[ 2, 4, 6, 8, 10, 12 ]

각 메개 변수는 아래와 같다.

• val : 현재 요소
• index : 현재 요소의 인덱스
• arr : map()을 호출한 원본 배열

아래와 같이 매개변수로 배열의 인자를 받고, 해당 인자를 이용하는 식을 작성하여 사용하여 간단하게 나타낼 수도 있다.

const num = [1,2,3,4,5,6];
const num_map = num.map(val => val*2);

console.log(num_map);
//[ 2, 4, 6, 8, 10, 12 ]

 

---

3. filter()

filter()는 배열 각 요소에 대해서 주어진 함수의 결괏값이 true인 요소를 모아 새로운 배열을 반환하는 메서드이다.

map()에서는 리턴 값이 다양한 타입으로 가능하지만, filter에서는 오직 boolean 타입만 리턴값으로 가능하다.

 

사용 방법은 map()과 같이 3개의 매개변수를 가지고 이를 사용하는 함수를 입력하여 사용가능하다.

const num = [1,2,3,4,5,6];
const num_filter = num.filter((val,index,arr) => {
	console.log(val,index,arr);
	return val % 2 === 0;
});

console.log(num_filter);
// 1 0 [ 1, 2, 3, 4, 5, 6 ]
// 2 1 [ 1, 2, 3, 4, 5, 6 ]
// 3 2 [ 1, 2, 3, 4, 5, 6 ]
// 4 3 [ 1, 2, 3, 4, 5, 6 ]
// 5 4 [ 1, 2, 3, 4, 5, 6 ]
// 6 5 [ 1, 2, 3, 4, 5, 6 ]
// [ 2, 4, 6 ]

 

아래와 같이 매개변수로 배열의 인자를 받고, 해당 인자를 이용하는 식을 작성하여 사용하여 간단하게 나타낼 수도 있다.

const num = [1,2,3,4,5,6];
const num_filter = num.filter(val => val % 2 ===0);

console.log(num_filter);
//[ 2, 4, 6 ]

 

---

4. reduce

reduce() 메서드는 위에서 알아본 세 메서드보다 복잡한 형태를 가지고 있다. 하지만 충분한 이해한다면 다양한 상황에서 활용이 가능한 메서드이다.

이 메서드는 배열 각 요소에 대하여 입력한 함수를 실행하고 리턴값을 다음 요소로 넘겨주며 마지막에 하나의 결괏값을 반환한다. 하나의 결괏값을 반환 한다는 점에서 위 세 메서드와 차이가 있다.

 

사용 방법은 2개의 매개변수와 실행 함수, 초기값을 입력하여 사용한다. 이 때 초기값은 0으로 default 되어 있다.

const num = [1,2,3,4,5,6];
const init = 10;
const num_reduce = num.reduce((val,cur,index,array) => {
    console.log(val, cur)
    return val + cur},init);

console.log(num_reduce);
// 10 1
// 11 2
// 13 3
// 16 4
// 20 5
// 25 6
// 31

• init : 초기값
• val : 전달값
• cur : 현재 요소 값
• index : 현재 요소의 인덱스 값
• array : reduce()를 호출한 원본 배열