JavaScript - map, forEach, reduce

map, forEach, reduce

map

배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 반환

• array.map(callback(element[, index[, array]]))
• 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
• 콜백 함수의 반환 값을 요소로 하는 새로운 배열 반환
• 기존 배열 전체를 다른 형태로 바꿀 때 유용
  - forEach + return이라고 생각하기

예)

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // 출력: [2, 4, 6, 8, 10]

forEach

• array.forEach(callback(element[, index[,array]]))
• 인자로 주어지는 함수(콜백 함수)를 배열의 각 요소에 대해 한 번씩 실행
• 콜백 함수는 3가지 매개변수로 구성
  - element : 배열의 요소
  - index : 배열 요소의 인덱스
  - array : 배열 자체
• 반환 값(return) 없음
• 원본 배열을 변경하지 않음

예)

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => console.log(num)); // 각 요소를 출력

reduce

배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과를 누적하여 단일 값으로 반환

• array.reduce(callback(acc, element, [index[, array]])[, initialValue])
• 인자로 주어지는 함수(콜백함수)를 배열의 각 요소에 대해 한 번씩 실행해서, 하나의 결과 값을 반환
• 즉, 배열을 하나의 값으로 계산하는 동작이 필요할 때 사용(총합, 평균 등)
• map, filter 등 여러 배열 메서드 동장을 대부분 대체할 수 있음
• reduce 메서드의 주요 매개변수
  - acc
  - 이전 callback 함수의 반환 값이 누적되는 변수
  - initialValue(optional)
  - 최초 callback 함수 호출 시 acc에 할당되는 값, default 값은 배열의 첫 번째 값
• reduce의 첫 번째 매개변수인 콜백함수의 첫번째 매개변수(acc)는 누적된 값(전 단계까지의 결과)
• reduce의 두 번째 매개변수인 initialValue는 누적될 값의 초기값, 지정하지 않을 시 첫번째 요소의 값이 됨
  - 빈 배열의 경우 initialValue를 제공하지 않으면 에러 발생

예)

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((value, currentValue) => value + currentValue, 0);
console.log(sum); // 출력: 15 (1 + 2 + 3 + 4 + 5)