filter()

• 특정 조건을 만족하는 요소를 걸러내는 메서드
• immutable (기존 배열 수정하지 않음)
• '특정 조건'이 인자로 전달. 이 때 이 조건은 함수 형태.
• 함수를 전달인자로 받기 때문에 고차함수.
• 배열을 리턴

작동 원리

• 배열의 각 요소가
• 특정 논리(조건, 콜백함수)에 따르면 사실(true)일 때
• 따로 분류(filter)

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

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

console.log(result) // ["exuberant", "destruction", "present"]

filter()의 콜백함수

🐿 인자 : 배열의 요소

👉🏽 리턴값: true 또는 false

• 콜백함수 내부의 조건에 따라 참이면 true, 거짓이면 false를 리턴

---

map()

• 배열을 리턴

작동 원리

• 배열의 각 요소가
• 특정 논리(함수)에 의해
• 다른 요소로 매핑(map)

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

const map1 = array1.map(x => x * 2);

console.log(map1) // [2, 8, 18, 32]

map()의 콜백함수

🐿 인자 : 배열의 요소

👉🏽 리턴값: 콜백함수의 로직에 따라 변환된 요소

---

reduce()

• (새로운 배열을 리턴하는 filter, map과 달리) 🌟 최종 누적값을 리턴 🌟
• 🌟 *콜백함수(리듀서 함수)의 최종 누적값이 reduce()의 리턴값으로 그대로 리턴됨 *🌟

• 인자로 콜백함수와 함께 초기값(initial value)을 지정할 수 있음. (초기값은 지정하지 않으면 배열의 첫 번째 요소.)
• 초기값을 기반으로 누적값(accumulator)이 결정됨.
• 배열의 요소가 순회하며 순서대로 현재값(current value)으로 들어감.
• 함수에 의해 누적값이 계속 업데이트되어 새로운 누적값이 리턴되고 결국 마지막에는 최종 누적값이 리턴된다.

작동 원리

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

let arr = [1, 2, 3];

let result = arr.reduce(
function (누적값, 현재값, 인덱스) {
 누적값과 현재값을 이용한 로직
 return 누적값
 }, 초기값)

console.log(result) // 최종 누적값

ex) 배열의 요소들의 합 구하기

const arr = [1, 2, 3, 4];

const initialValue = 0;
const sum = arr.reduce((acc, cur) => acc + cur, initialValue);

console.log(sum) // 10

reduce()의 콜백함수 (= 리듀서 함수)

🐿 인자1: 누적값

: 최초에는 초기값이 있으면 초기값, 없으면 배열의 첫 번째 요소

🐿 인자2: 현재값

: 배열의 요소가 하나씩 순회하며 들어감

👉🏽 리턴값: 각 순회 회차의 누적값으로 계속 업데이트 되다가 결국 최종 누적값으로 결정됨.

: 이 최종 누적값이 reduce()의 리턴값으로 그대로 리턴됨