1. map() 메서드
기능
- 배열의 모든 요소에 대해 제공된 콜백 함수를 실행한 결과값을 모아 새로운 배열을 반환합니다.
- 원본 배열은 변경되지 않습니다.
사용법
arr.map(callback(currentValue[, index[, array]])[, thisArg])
- callback: 각 요소를 처리하는 함수.
- currentValue: 현재 처리 중인 배열의 요소.
- index (선택): 현재 요소의 인덱스.
- array (선택): map이 호출된 배열 자체.
- thisArg: 콜백 함수 내부에서 this로 사용할 값을 지정 (선택).
- item: 현재 요소 값.
- index: 현재 요소의 인덱스.
- array: 원본 배열.
2. filter() 메서드
기능
- 배열의 모든 요소에 대해 주어진 조건(테스트)을 만족하는 요소만 모아 새로운 배열을 반환합니다.
- 원본 배열은 변경되지 않습니다.
사용법
arr.filter(callback(element[, index[, array]])[, thisArg])
- callback: 각 요소를 처리하는 함수.
- element: 현재 처리 중인 요소.
- index (선택): 현재 요소의 인덱스.
- array (선택): filter가 호출된 배열.
- thisArg: 콜백 함수 내부에서 this로 사용할 값을 지정 (선택).
예제 1: 조건에 맞는 요소 필터링
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result); // ['exuberant', 'destruction']
문자열 길이가 6을 초과하는 단어만 반환합니다.
3. reduce() 메서드
기능
- 배열의 모든 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.
- 누적값(accumulator)을 활용하여 배열의 각 요소를 처리합니다.
사용법
arr.reduce(callback(accumulator, currentValue[, currentIndex[, array]])[, initialValue])
- callback: 각 요소를 처리하는 함수.
- accumulator: 이전 콜백의 반환값 (초기값이 지정되면 initialValue로 시작).
- currentValue: 현재 처리 중인 요소.
- currentIndex (선택): 현재 요소의 인덱스.
- array (선택): reduce가 호출된 배열.
- initialValue: accumulator의 초기값 (선택).
요약
map() | 배열의 각 요소에 대해 함수를 실행한 결과값을 새 배열로 반환 | 새 배열 |
filter() | 배열의 각 요소에 대해 조건을 만족하는 요소만 새 배열로 반환 | 새 배열 |
reduce() | 배열의 각 요소를 누적하여 하나의 결과값을 반환 | 최종 누적값 |
'개발일지 > JavaScript' 카테고리의 다른 글
[26] 얕은 비교 vs. 깊은 비교 (0) | 2024.11.27 |
---|---|
[25] Undefined와 null의 차이 (0) | 2024.11.27 |
[23] 전개 연산자(Spread Operator) (0) | 2024.11.27 |
[22] 구조 분해 할당 (Destructuring) (0) | 2024.11.27 |
[21] Closure (0) | 2024.11.26 |