[JavaScript] 고차함수 map(), filter(), reudce() 사용 방법

고차 함수

 

고차 함수란?
함수를 인자로 전달받거나 함수를 결과로 반환하는 함수를 말한다.

 

 

---

1. map()

기존 배열 요소를 가지고 새로운 요소로 변경하여 반환한다.

const map_reuslt = [1, 2, 3, 4].map((value, index, array)=>{ 
	console.log(value); // 1, 2, 3, 4 출력 
	return value*10; // 각 요소에 10을 곱한 값을 배열로 반환 
}); 
console.log(map_reuslt); // [ 10, 20, 30, 40 ]

• 콜백 함수의 매개변수로 value에 요소 값, index에 인덱스, array에 원본 배열이 들어온다.
• 각 콜백함수에서 return 하는 값 들으러 새로운 배열을 만들어 반환한다.

 

 

---

2. filter()

기존 배열 요소를 조건에 따라 제외하여 반환한다.

const filter_result = [1, 2, 3, 4].filter((value, index, array)=>{ 
	console.log(value); // 1, 2, 3, 4 출력
	return value%2 == 0; // value가 짝수인 값들을 배열로 반환 
}) ;
console.log(filter_result); // [ 2, 4 ]

• 콜백함수의 매개변수로 value에 요소 값, index에 인덱스, array에 원본 배열이 들어온다.
• 각 콜백함수에서 return 하는 값이 true일 때만, 그때의 value 값들로 새로운 배열을 만들어 반환한다.

 

 

---

3. reduce()

배열의 누적 합을 반환한다.

const reduce_result = [1, 2, 3, 4].reduce((pv, cv, idx, arr)=>{ 
    // pv : 누적 값, cv : 현재 요소, idx : 인덱스, arr : 현재 배열
    return pv + cv; // 이전 콜백함수가 리턴한 값에 현재의 요소 값을 더함(누적 개념) 
}, 100); // 100을 초기값으로 줌 
console.log(reduce_result); // 110 (100 + 1 + 2 + 3 + 4 결과)

• 두 번째 매개변수인 initialValue값을 시작으로,
• 각 콜백함수가 return 하는 값이 다음에 실행되는 콜백함수의 previousValue로 들어간다.
• 최종적으로 마지막 콜백 함수가 return 하는 값을 반환한다.