[javascript] forEach, map, filter, reduce 차이

forEach랑 filter는 종종 사용했었는데

map이랑 reduce는 안쓰다보니 헷갈려서 정리!

 

 

forEach, map, filter, reduce

 

*콜백함수를 사용하는 메소드들
*배열안의 요소들을 하나하나 탐색해줌 (for문 처럼)

 

1. forEach

*주어진 함수를 배열안의 요소들에게 각각 실행.

let a= ["사과","바나나","복숭아"];

a.forEach(function(value, index){
	console.log(value, index, this);
}, [1,2])

// 결과
// 사과 0 [1,2]
// 바나나 0 [1,2]
// 복숭아 0 [1,2]

 

2. map

원본 배열의 요소들을 하나하나 탐색하면서 return한 값들로 새로운 배열을 생성. (원본 배열의 길이와 동일)

 

let a= ["사과","바나나","복숭아"];

let answer = a.map(function(value, index){
	return value+"맛";
}, [1, 2]);
console.log(answer);

//["사과맛", "바나나맛", "복숭아맛"]

그런데 만약 조건을 넣고 그 조건에 해당된 값만 넣으려 한다면 

배열의 길이는 유지하기 때문에 undefined로 처리 됨.

let a= [10,20,30,40,50];

let answer = a.map(function(value, index){
	if(value<3) return value;
}, [1, 2]);
console.log(answer);

//[10, 20, undefined, undefined, undefined]

*새로운 배열을 생성하지만 배열의 길이는 동일.

 

 

3. filter

원본 배열의 요소들을 하나하나 탐색하면서 조건에 맞는 새로운 배열을 생성. (원본 배열의 길이 무시)

let a= [10,20,30,40,50];

let answer = a.filter(function(value, index){
	return value<30;
}, [1, 2]);
console.log(answer);

//[10, 20]

* 콜백함수에서 true를 리턴한 값들로만 새로운 배열 생성.

 

 

4. reduce

원본 배열의 요소들에 함수를 실행하고 하나의 결과 값을 리턴.

let a= [1,2,3,4,5];

let answer = a.reduce(function(acc, value, index){
	return acc+value;
}, 0);
console.log(answer);

// 15

첫번째 인자는 콜백함수의 인자, 두번째는 초기화 값

 

acc = 0(초기화한 0값) + value
acc+value 를 배열이 끝날 때 까지 반복