map()
함수와 filter()
함수
이 두 함수는 비슷한 구문을 사용하기 때문에 혼동하기 쉬운 점이 있습니다.
다음은 이 두 함수의 구문입니다.
차이점 비교
map()
과 filter()
함수는 모두 배열의 요소를 순회하고 새로운 배열을 반환하지만,
요소를 순회하는 목적과 처리하는 방법이 다릅니다.
요소를 순회하는 목적
map() |
배열의 각 요소를 변환하거나 가공한 결과를 적용한 새로운 요소로 배열을 생성하는 것이 목적입니다.
새로 생성된 배열은 변환하거나 가공된 요소들로 매핑되어 구성됩니다. |
---|---|
filter() |
배열의 각 요소들 중에서 원하는 조건에 맞는 요소들만으로 필터링된 배열을 생성하는 것이 목적입니다.
새로 생성된 배열은 조건을 충족하는 요소들로만 구성됩니다. |
map()
함수는 반환하는 배열의 길이가 원본 배열의 길이가 일치합니다.
이는 변환 작업이 각 요소에 대해 수행되기 때문에, 원본 배열의 요소 개수와 동일한 개수의 변환된 요소가 항상 생성되기 때문입니다.filter()
함수는 반환하는 배열의 길이와 원본 배열의 길이가 다를 수 있습니다.
이를 통해 필요 없는 데이터를 제외할 수 있습니다.
처리하는 방법
두 함수 모두 각 요소를 순회하며, 콜백 함수를 사용합니다.
이때, 콜백 함수의 return
으로 반환되는 처리 방법이 다릅니다.
map() |
콜백 함수는 해당하는 요소를 변환하거나 가공한 결과를 return 으로 반환해야 합니다. |
---|---|
filter() |
콜백 함수는 각 요소에 대해 조건을 평가하여
요소를 필터링(유지)하려면 true 를, 그렇지 않으면 false 를 return 으로 반환해야 합니다 |
브라우저 호환성
메서드 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
map()
|
1 | 12 | 1.5 | 3 |
filter()
|
1 | 12 | 1.5 | 3 |