| |
공통점 |
용도 |
사용법 |
예제 코드 |
특징 |
| forEach |
- 고차함수(함수를 인수로 전달받거나 함수를 반환하는 함수, 불변성을 지향)
- 그외 고차함수 : sort, findIndex, flatMap
- 모든 배열은 중간에 요소 멈춤 불가 |
for 문 대체 할 수 있는 고차함수(왜? 반복을 위한 별도의 변수를 선언해야하므로 함수형 프로그래밍이 추구하는 바와 다름) - 자신의 내부에서 반복문을 통해 자신을 호출 한 배열을 순회하며 수행할 처리를 콜백함수 로 전달받아 반복 |
- [3개의 인수 전달 받는 콜백 함수] 메서드를 호출한 배열 의 요소값, 인덱스, 메서드를 호출한 배열 자체(this)를 인 수로 전달받아 사용
- [2개의 인수 전달 받는 콜백 함수] 요소값, 콜백 함수 내 부에서 this로 사용할 객체를 전달할 수 있다 그러나 더 나 은 방법은 화살표 함수를 사용하는 것 |
const arr = [];
[1, 2, 3 ].forEach((ele)=> arr.push(ele * 2 );
console.log(arr) // [2, 4, 6 ]; |
- forEach 메서드는 원본 배열을 변경하지는 않지만 콜백 함수를 통해 원본 배열을 변경 할 수 는 있다.
const numbers = [1, 2, 3];
numbers.forEach((item, index, arr) =>{arr[index] = item ** 2};
console,log(numbers) // [1, 4, 9]
- forEach 메서드의 반환값은 언제 나 undefined
- for문과 달리 break, continue문을 사용할 수 없으므로 배열의 모든 요 소를 순회하여 중간에 순회를 중단 불가 ( 희소 배열의 요소는 undefined출 력, 순회 대상에서 제외 )
- side effect 100% 발생함
- 이터레이터(이터러블한 객체를 순차적으로 탐사)와 동일 |
| map |
요소값을 다른 값으로 매핑하여 새로운 배열 을 생성하는 고차함수 |
const arr = [];
[1, 2, 3 ].map((ele)=> arr.push(ele * 2 );
console.log(arr) // [2, 4, 6 ]; |
- map 메서드를 호출한 배열과 map 메서드가 새롭게 생성하여 반환한 배열은 1:1 매핑관계
- return 없는 map메서드는 forEach와 동일하므로 return 필수! |
| filter |
배열의 모든 요소를 순회하면서 인수로 전달 받은 콜백함수를 반복 호출하며 반환 값이 true인 요소로 구성된 새로운 배열을 반환 |
[1, 2, 2, 3].filter(item => item === 2) // [2, 2] |
- 생성된 배열의 length는 filter메서 드를 호출한 배열의 length와 같거 나 작다 - 자신을 호출한 배열에서 특정 요 소를 제거하기 위해 사용할 수 있다.
- 호출한 배열이 특정 요소가 중복 되어 있다면 중복된 요소가 모두 제 거되므로 특정 요소를 하나만 제거 하고자 한다면 indexOf메서드를 통 해 특정 요소의 인덱스를 취득한 후 에 splice메서드를 사용해야함
- 판별식은 return에서 판별일뿐, 판별식 이전 이후에서 하는 것은 무의미
- filter는 중복된 판별식 모두를 판별해서 제거하는데, 하나의 중복된 요소만 제거하고자 한다면 findIndex + splice가 아니라 reduce 사용하기를 권장
|
| some |
배열의 요소 중에 콜백함수를 통해 정의한 조 건을 만족하는 요소가 1개이상 존재하면 그 결과를 불리언 타입으로 반환 |
[5, 10, 15].some(item => item > 10 ) // true |
- some메서드를 호출한 배열이 빈 배열일 경우 언제나 false 반환
- true인 요소가 나올때까지 순환
- 첫 요소부터 랭킹같이 모든 요소를 순회하지 않고 일부만 순회하기 원할때 적합
|
| every |
배열의 모든 요소가 콜백 함수를 통해 정의한 조건을 모두 만족하는 지 확인하여 그 결과 값 을 불리언 타입으로 변환 |
[5, 10, 15].every(item => item > 10 ) // false |
- every메서드를 호출한 배열이 빈 배열일 경우 언제나 true 반환
- false인 요소가 나올때까지 순환
- 첫 요소부터 랭킹같이 모든 요소를 순회하지 않고 일부만 순회하기 원할때 적합 |
| find |
배열의 요소를 순회하면서 인수로 전달된 콜 백함수를 호출하여 반환한 값이 true인 첫 번 째 요소를 반환한다. true인 요소가 존재하지 않는다면 undefined를 반환 |
[1, 2, 2, 3].find(item => item === 2) // 2 |
- es6도입
- vs filter |
| reduce |
배열의 모든 요소를 순회하며 인수로 전달받 은 콜백함수를 반복 호출하여 콜백함수의 반 환값을 다음 순회 시에 콜백함수의 첫번째 인 수로 전달하며 콜백함수를 호출하여 하나의 결과값을 만들어 반환 |
[2개의 인수를 전달받음]
- 1번째 인수 : 4개의 인수를 받을 수 있는 콜백함수 - 초기값 또는 콜백함수의 이전 반환값
- reduce 메서드를 호출한 배열의 요소값
- reduce 메서드를 호출한 인덱스
- reduce 메서드를 호출한 배열 자체 (this)
- 2번째 인수 : 초기값 ( 생략 가능하지만 비추천 ) |
- 평균 구하기
[1, 2, 3].reduce((acc, cur, i, {length})
=>{ return i === length - 1 ?(acc + cur) / length : acc + cur }, 0);
- 최대값 구하기 ( vs Math.max)
[1, 2, 3].reduce((acc, cur) =>{ (acc > cur ? acc : cur) }, 0);
- 요소의 중복 횟수 구하기
const arr = ["a", "b", "c", "a"];
const cnt = arr.reduce((acc, cur) => { acc[cur] = (acc[cur] || 0) + 1 return acc; }, {});
console.log(cnt) // {a: 2, b: 1, c: 1} - 중첩 배열의 평탄화 vs flat 메서드 [1, [2, 3], 4, [5, 6]].reduce((acc, cur) => acc. concat(cur), []); // [1, 2, 3, 4, 5, 6] - 중복 요소 제거 vs filter 메서드 [1, 2,1, 3, 5, 4, 5, 3, 4, 4].reduce((acc, cur, i, arr) =>{ if(arr.indexOf(cur) === i) acc.push(cur); return acc; }, []); // [1, 2, 3, 5, 4] |
- 모든 배열의 고차함수는 reduce 메서드로 구현 가능
- 빈 배열로 reduce메서드를 호출하 면 에러 발생하지만 초기값을 전달 해주면 에러 안남
- 객체의 특정 프로퍼티 값을 합산 하는 경우 유용하며 반드시 초기값 을 전달해야함 (왜 ? NaN 나올 수 있음) |