[새싹 프론트엔드] 고차 함수 정리(map, filter, reduce, forEach)

고차함수

- 파라미터로 함수를 받거나 연산결과를 함수로 반환하는 함수

- 함수 안에서 다른 함수를 원하는 시점에 호출할 수 있는 권한을 가진다(=콜백함수)

 

 

1. map()

배열 내 모든 원소에 연산을 수행하고, 그 결과를 리턴한다.

 

array라는 배열의 각 요소에 2를 곱하고자 한다면?

const arr = [1, 2, 3];

const newArr = arr.map((item) => {
return item*2
});

console.log(newArr);

실행결과   [2, 4, 6]

 

✅ 배열 arr의 요소를 순회하면서 연산을 수행한 결과를 리턴한다. 리턴한 값은 newArr에 저장이 된다.

 

 

2. forEach()

배열의 각각 요소를 순회하며 연산을 수행한다.

 

map과의 차이점은

1. forEach는 함수를 실행하는 것 그 자체이고, map은 실행 결과를 새로운 배열로 반환하는 것이다.

2. forEach는 map과 달리 문 밖으로 return값을 받지 못한다. 

3. forEach는 기존 array를 변경하는 반면, map은 새로운 array를 반환한다.

map을 사용했을 때와 동일한 결과가 나오도록 코드를 짜면 이렇다.

연산 후 리턴해주는 값이 없으므로 그냥 새로운 배열을 만들고 거기에 값을 추가하는 방식.

 

그렇다면 forEach는 언제 사용하면 좋을까?..

 

 

 

3. filter()

배열을 순회하면서 콜백함수의 반환값이 true인 경우, 즉 조건에 맞는 배열의 모든 요소들을 반환한다.

filter함수로 arr의 cont가 apple인 요소 모두를 리턴한 것을 알 수 있다.

 

 

4. reduce()

배열의 각 요소를 순회하며 콜백함수의 실행하고 하나의 결과값을 반환한다.

reduce도 forEach와 map과 비슷하지만 누적값 등 조금 다른 부분이 있다.

 

arr.reduce( (accumulator, currentValue, index, array) => { }, initialValue )

reduce의 파라미터로는 콜백함수와 초기값이 들어간다.

 

콜백함수의 파라미터로는 네가지가 있다.

1. accumulator : 콜백함수의 반환값이 누적되는 값

- 앞에서 reduce의 두번째 파라미터인 초기값을 설정한 경우 이 초기값으로 콜백함수가 수행되고, 설정하지 않은 경우 arr의 0번째 index값으로 지정된다.

2. currentValue : 순회하는 배열의 현재 요소

3. index : 현재 배열 요소의 index (생략가능)

4. array : reduce함수를 호출한 배열 (생략가능)

 

초기값을 0으로 설정하고 현재값과 배열 요소를 더하는 콜백함수를 만들었더니,

arr의 요소를 순회하면서 기존값 + 배열요소 를 수행한 합이 reduce1에 들어가는 것을 확인할 수 있다.

 

 

 

(2023.07.13) - reduce 활용

프로그래머스 코딩테스트에서 배열을 두배 만드는 문제가 있었다.

 

정수 배열 numbers가 매개변수로 주어집니다. numbers의 각 원소에 두배한 원소를 가진 배열을 return하도록 solution 함수를 완성해주세요.

 

나는 이 문제를 map으로 풀었는데, reduce를 사용하여 푼 사람도 있어서 어떤방식인가 싶어서 알아보았다.

그 사람은

function solution(numbers) {
    return numbers.reduce((a, b) => [...a, b * 2], []);
}

이런식으로 풀었다.

처음에 reduce가 너무 오랜만이라 어떤 함수였는지도 기억이 가물가물했다..

 

이 함수를 앞에 풀이 한 것처럼 콘솔로 찍어서 나타내면 이렇다.

 

일단 초기값은 빈 배열로 설정했다. 그리고 순회하는 배열의 현재 요소에 곱하기 2를 한 결과값이 누적값으로 들어갔다. 그리고 배열의 다음요소도 반복. 스프레드 연산자를 사용하여 기존 누적되는 배열 값을 들고오고 2를 곱해준 값이 배열에 추가 되었다. 차례대로 순회하니까 기존 배열의 요소에 2씩 곱해진 배열을 출력할 수 있었다.

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 11주차 블로그 포스팅