자바스크립트 배열 필터링 방법 정리

자바스크립트는 배열을 효율적으로 처리하는 다양한 메서드를 제공하는데, 그중에서도 map()과 filter() 메서드는 매우 유용합니다. 이 두 메서드는 배열의 데이터를 변형하고 필터링하는 데 사용되며, 각각의 사용법과 특징을 알아보겠습니다.

map 메서드

map() 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하여 그 결과로 새로운 배열을 생성합니다. 이 과정에서 원본 배열은 변경되지 않으며, 변형된 값들로 새로운 배열을 만듭니다.

map 사용법

map() 메서드의 구문은 다음과 같습니다:

array.map(callback(currentValue[, index[, array]])[, thisArg])

• currentValue: 배열 내 현재 요소
• index: 현재 요소의 인덱스 (선택적)
• array: map() 메서드를 호출한 원본 배열 (선택적)
• thisArg: 콜백 내에서 사용할 this 값 (선택적)

다음은 map() 메서드를 이용한 간단한 예시입니다. 주어진 배열의 모든 숫자를 두 배로 만드는 과정을 살펴보겠습니다:

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

위의 예시는 숫자가 들어 있는 배열을 두 배로 증가시키는 구문으로, map() 메서드는 입력된 배열의 각 요소에 대해 함수를 적용하여 새로운 배열을 생성합니다. 이때, 원본 배열은 변경되지 않습니다.

객체 배열에서의 활용

객체 배열에서도 map() 메서드를 활용할 수 있습니다. 예를 들어, 여러 과일의 색상 정보가 저장된 배열에서 색상만 추출하고 싶을 때 다음과 같이 구현할 수 있습니다:

const fruits = [
 {color: "yellow", name: "banana"},
 {color: "red", name: "tomato"},
 {color: "orange", name: "orange"}
];
const colors = fruits.map(fruit => fruit.color);
console.log(colors); // ["yellow", "red", "orange"]

filter 메서드

filter() 메서드는 배열의 각 요소에 대해 주어진 조건을 평가하여, 그 조건을 충족하는 요소들만으로 이루어진 새로운 배열을 반환합니다. 이 또한 원본 배열은 수정하지 않습니다.

filter 사용법

filter() 메서드의 구문은 다음과 같습니다:

array.filter(callback(currentValue[, index[, array]])[, thisArg])

• currentValue: 배열 내 현재 요소
• index: 현재 요소의 인덱스 (선택적)
• array: 필터링을 실행한 원본 배열 (선택적)

다음은 filter() 메서드를 사용하여 배열에서 특정 조건을 충족하는 요소만 필터링하는 예시입니다. 여기서는 길이가 5보다 큰 과일만 걸러내는 과정을 살펴보겠습니다:

const fruits = ['kiwi', 'banana', 'apple', 'peach', 'pineapple'];
const longFruits = fruits.filter(fruit => fruit.length > 5);
console.log(longFruits); // ["banana", "pineapple"]

검색 기능 구현 시 활용

실제 개발 환경에서는 filter() 메서드를 활용하여 검색 기능을 구현할 수 있습니다. 사용자가 입력한 검색어를 포함한 요소들만을 필터링하여 결과를 보여주는 예시는 다음과 같이 작성할 수 있습니다:

const searchFruits = (query) => {
 return fruits.filter(fruit => fruit.toLowerCase().includes(query.toLowerCase()));
};
console.log(searchFruits('ap')); // ["banana", "apple", "pineapple"]

map과 filter의 차이점

map()은 배열의 각 요소를 변형하여 새로운 배열을 생성하는 반면, filter()는 특정 조건을 충족하는 요소들을 걸러내어 새로운 배열을 반환합니다. 이 두 메서드는 배열을 처리할 때 각각의 상황에 맞게 선택하여 사용하는 것이 중요합니다. 예를 들어, 데이터 변환이 필요할 때는 map()을, 데이터 필터링이 필요할 때는 filter()를 사용하는 것이 바람직합니다.

결론

자바스크립트의 map()과 filter() 메서드는 배열을 다룰 때 매우 유용한 도구입니다. 이 둘을 적절히 활용하면 코드를 더욱 간결하고 명확하게 작성할 수 있습니다. 이 글에서 설명한 내용을 바탕으로 다양한 상황에서 map()과 filter()를 적극적으로 활용하시기 바랍니다. 데이터 처리 및 변형을 효율적으로 수행하여 더욱 품질 높은 코드를 작성하는 데 도움이 될 것입니다.

자주 찾는 질문 Q&A