자바스크립트 배열 메서드 map과 filter 비교

자바스크립트 배열 메서드 비교: map과 filter

자바스크립트에서 배열은 중요한 데이터 구조로, 여러 값을 손쉽게 관리하고 조작할 수 있는 기능을 제공합니다. 이 글에서는 배열을 처리하는 데 자주 사용되는 두 가지 메서드인 map과 filter에 대해 알아보겠습니다. 이 두 메서드는 모두 배열에서 새로운 배열을 생성하지만, 그 방식과 목적이 다릅니다.

map 메서드란?

map 메서드는 배열의 각 요소에 대해 지정된 함수를 실행하여, 그 반환값으로 구성된 새로운 배열을 생성합니다. 즉, 기존 배열의 요소를 변형하여 새로운 배열을 만드는 방식입니다. 예를 들어, 배열의 숫자 요소를 제곱하는 작업을 진행한다고 가정해 보겠습니다.

const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); // 출력: [1, 4, 9, 16]

위 예시에서 매핑된 배열은 각 숫자의 제곱으로 이루어져 있습니다. 이렇게 map은 배열의 모든 요소를 변형할 때 유용하게 사용됩니다.

filter 메서드란?

filter 메서드는 배열의 각 요소에 대해 지정된 조건 함수를 실행하고, 그 조건을 충족하는 요소들로만 구성된 새로운 배열을 생성합니다. 즉, 조건을 만족하는 요소들을 선별하여 새로운 배열을 만들 수 있습니다. 예를 들어, 짝수인 요소만을 필터링해 보겠습니다.

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 출력: [2, 4, 6]

위의 예제에서는 filter 메서드를 사용하여 짝수만을 추출한 새로운 배열을 생성했습니다.

map과 filter의 차이점

map과 filter 메서드는 모두 새로운 배열을 반환하지만, 그 목적과 사용 방법에서 차이가 있습니다. 아래에 주요 차이점을 정리하였습니다.

• 목적: map은 배열의 모든 요소를 변형하여 새로운 배열을 만듭니다. 반면, filter는 특정 조건을 만족하는 요소만을 선별하여 새로운 배열을 생성합니다.
• 반환 배열의 길이: map은 기존 배열과 동일한 길이의 배열을 반환하며, 조건을 만족하지 않는 경우에도 해당 요소를 변형하여 반영합니다. filter는 조건에 따라 요소가 제외될 수 있어, 반환 배열의 길이가 달라질 수 있습니다.
• 사용 예: map은 데이터 변환에 주로 사용되고, filter는 데이터를 필터링할 때 주로 사용됩니다.

활용 사례

map과 filter는 여러 상황에서 유용하게 활용될 수 있습니다. 예를 들어, 사용자 데이터를 처리할 때:

• map: 사용자의 이름을 대문자로 변환하고 싶을 때.
• filter: 나이가 18세 이상인 사용자만을 추출하고 싶을 때.

이처럼 여러 데이터를 동시에 처리할 때 각 메서드를 적절히 활용하면 작업의 효율성을 높일 수 있습니다.

성능 고려사항

map과 filter 메서드는 모두 배열을 순회하면서 함수를 실행하므로, 배열의 크기가 클 경우 성능에 영향을 줄 수 있습니다. 특히, 배열을 중첩하여 처리하는 경우 성능이 저하될 수 있으므로, 필요하다면 성능 최적화 방법을 강구하는 것이 좋습니다. 예를 들어, 한 배열에서 직접적으로 map과 filter를 함께 사용할 필요가 있다면, 두 메서드를 조합하여 단일 순회로 수행하는 방법을 고려해 볼 수 있습니다.

마무리

map과 filter 메서드는 배열을 처리하는데 있어 강력한 도구입니다. 데이터 변형 및 필터링의 필요에 따라 적절한 메서드를 선택하여 사용하면, 코드의 가독성과 유지보수성을 높일 수 있습니다. 자바스크립트를 사용하여 복잡한 데이터 구조를 관리할 때 이 두 메서드를 활용하는 것을 잊지 마세요.

자주 찾는 질문 Q&A