고차함수 메서드 정리(map, filter, reduce)

map()

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

map 활용 시, 아래 과정을 꼭 기억하세요.

• 배열의 각 요소가
• 특정 논리(함수)에 의해
• 다른 요소로 지정(map) 합니다.

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

 

filter()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

filter 활용 시, 아래 과정을 꼭 기억하세요.

• 배열의 각 요소가
• 특정 논리(함수)에 따르면, 사실(boolean)일 때
• 따로 분류합니다(filter).

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

 

reduce() 

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고,
하나의 결과값을 반환합니다.reduce 활용 시, 아래 과정을 꼭 기억하세요.

• 배열의 각 요소를
• 특정 방법(함수)에 따라
• 원하는 하나의 형태로
• 응축합니다. (reduction)

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

리듀서 함수는 네 개의 인자를 가집니다.

1. 누산기accumulator (acc)
2. 현재 값 (cur)
3. 현재 인덱스 (idx)
4. 원본 배열 (src)

리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.

 arr.reduce(callback[, initialValue]) 

- callback : 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받습니다.(acc, cur, idx, src)
-initialValue [Optional] : callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.