728x90
map() | filter() | reduce() | |
목적 | 배열 내의 모든 요소 대해서 주어진 함수를 호출한 결과를 모아 새로운 배열로 반환 | 배열에서 조건을 만족하는 요소만 추려서 새로운 배열을 반환 | 배열의 요소를 누적하여 단일값 만듦 |
사용 예시 | 배열의 각 요소를 평가한다. (평가한다: 특정 조건이나 연산을 적용해 판단하거나 처리하는 과정을 의미) |
배열의 각 요소를 평가하고, 조건에 맞는 요소들만 남김 | 배열의 각 요소를 누적하거나 합산하여 하나의 값을 계산할 때 사용 |
반환 값 | 변환 된 요소로 구성된 새로운 배열 | 조건을 만족하는 요소로 구성된 새로운 배열 | 누적된 단일 값 |
코드 | const numbers = [1, 2, 3, 4]; const dubled = numbers.map(num=> num*2); console.log(doubled); // [2, 4, 6, 8] |
const numbers = [1, 2, 3, 4]; const evens = numbers.filter(num=>num%2===0); console.log(evens); // [2, 4] |
const numbers = [1, 2, 3, 4]; const sum = numbers.reduce((acc, curr) => acc + curr, 0); console.log(sum); // 10 |
map()
map() 메서드는 배열 내의 모든 요소 대해서 주어진 함수를 호출한 결과를 모아 새로운 배열로 반환
const numbers = [1, 2, 3, 4, 5, 6, 7];
const result = numbers.map((number)=>number*2);
console.log(reesult); // [2, 4, 6, 8, 10, 12,, 14]
some()
some() 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트 한다.
const fruits = ["사과", "딸기", "배", "참외", "딸기", "수박"];
const result = fruits.some((fruits) => fruits === "수박");
console.log(result); // true
every()
every() 메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트한다.
const fruits = ["수박", "수박", "배", "수박", "수박", "수박", "수박"];
const result = fruits.every((fruits) => fruits === '수박');
console.log(result); // false
filter()
filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환
// 짝수만 필터링하기
const numbers = [1, 2, 3, 4, 5, 6, 7];
const result = numbers.filter((number) => number % 2 === 0(;
console.log(result); // [2, 4, 6]
reduce()
reduce() 메서드는 배열의 각 요소에 대해 주어진 reuder 함수를 실행하고, 하나의 결과값을 바노한
reuder() 함수
reducer() 함수는 네개의 매개변수를 갖는다.
- 누적 값(acc)
- 현재 값(cur)
- 현재 인덱스(idx)
- 원본 배열(src)
reducer 함수의 반환 값은 누적 값에 할당되고 최종 결과는 이 누적 값이 된다.
// 누적합 구하기
const numbers = [1,2 , 3, 4, 5, 6, 7]
const result = numbers.reduce((acc, cur) => acc + cur);
console.log(result);
728x90
'🦎 JavaScript > JavaScript' 카테고리의 다른 글
[JS] 옵셔닝 체이닝(?.)은 언제 사용하면 좋을까? (feat. 점표기법) (1) | 2024.09.18 |
---|---|
[JS] filter메서드, find메서드 2가지 차이 (1) | 2024.09.18 |
for..of vs for..each + 콜백함수 까지 🫡 (0) | 2024.09.03 |
[JS] forEach (0) | 2024.08.22 |
[JS] 스타일과 클래스 (0) | 2024.08.22 |