[JavaScript] map()과 filter() 비교. 예시와 주요 용도, 차이점 및 공통점

map 메서드와 filter 메서드의 공통점과 차이점을 알아보자.

 

우선 map()는 

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

원본은 변경되지 않고 새로운 배열이 생성된다.

각 요소를 변환하고, 변환된 값을 가진 새로운 배열을 반환한다.

 

map()의 예시

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(x => x * x);
// squaredNumbers는 [1, 4, 9, 16, 25]가 됩니다.

 

map()은 언제 사용하지 ?

- 변환 작업 : 각 요소를 가공하거나 변환하여 새로운 값의 배열을 생성

- 데이터 가공 : 데이터를 가져와서 필요한 형식으로 가공하거나, 특정 속성을 추출하여 새로운 배열을 만듦.

 

 

 

다음으로는 

filter()

배열의 각 요소를 주어진 함수의 조건에 따라 걸러내고, 조건을 만족하는 요소들로 이루어진 새로운 배열을 반환

원본은 변경되지 않고, 조건을 만족하지 않는 요소들을 새 배열에 포함되지 않는다.

요소를 필터링하고, 필터링된 요소들로 이루어진 새로운 배열을 반환

 

 

filter()의 예시

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(x => x % 2 === 0);
// evenNumbers는 [2, 4]가 됩니다.

 

filter()은 언제 사용하지 ?

- 필터링 : 배열에서 특정 조건을 만족하는 요소만 추출하여 새 배열을  생성

- 조건 검사 : 배열의 요소를 조건에 따라 검사하고 필요한 요소만 추출  (예) 특정 범위의 숫자를 선택하거나, 특정 문자열을 포함하는 요소를 선택

 

 

 

즉, 요약하면 map()은 배열의 각 요소를 변환하여 새 배열을 생성하고, filter()는 배열에서 조건을 만족하는 요소만을 걸러내어 새 배열을 생성한다.