[코딩테스트] JavaScript 배열 filter 메소드 알아보기

JavaScript 배열 filter 메소드에 대해 깊이 있게 알아보고, 코딩 테스트 준비에 필요한 팁과 예제를 통해 효율적인 필터링 기술을 살펴보겠습니다.

JavaScript 배열 Filter 메소드란?

JavaScript 배열의 filter 메소드는 배열 내의 모든 요소를 검사하여 조건에 맞는 요소들만을 새로운 배열로 반환하는 강력한 도구입니다. 이 메소드는 특히 데이터 처리와 코딩 테스트에서 자주 사용되며, 코드의 가독성과 효율성을 높이는 데 큰 역할을 합니다.

기본 개념과 사용법

filter 메소드는 다음과 같은 기본 구조를 가지고 있습니다.

const newArray = originalArray.filter((element, index, array) => {
	// 조건을 반환
});

예를 들어, 숫자 배열에서 짝수만을 추출하고 싶다면..

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

Filter 메소드의 장점

가독성 향상: 복잡한 조건을 간결하게 표현할 수 있습니다.
불변성 유지: 원본 배열을 변경하지 않고 새로운 배열을 생성합니다.
체이닝 가능: 다른 배열 메소드와 함께 사용하여 복잡한 데이터 처리가 가능합니다.

Filter 메소드 사용 사례

조건에 맞는 데이터 추출

실제 개발에서는 특정 조건에 맞는 데이터를 추출하는 일이 빈번합니다. 예를 들어, 사용자 목록에서 활성화된 사용자만을 필터링할 때 유용합니다.

const users = [
	{ name: 'Alice', active: true },
	{ name: 'Bob', active: false },
	{ name: 'Charlie', active: true }
];

const activeUsers = users.filter(user => user.active);
console.log(activeUsers);
// [{ name: 'Alice', active: true }, { name: 'Charlie', active: true }]

중첩된 배열 필터링

복잡한 데이터 구조에서도 filter 메소드는 유용하게 사용될 수 있습니다. 예를 들어, 여러 카테고리의 제품 중 특정 가격대에 속하는 제품을 추출할 때 활용할 수 있습니다.

const products = [
	{ category: 'Electronics', price: 299 },
	{ category: 'Books', price: 19 },
	{ category: 'Clothing', price: 49 },
	{ category: 'Electronics', price: 99 }
];

const affordableElectronics = products.filter(
	product => product.category === 'Electronics' && product.price < 200
);
console.log(affordableElectronics);
// [{ category: 'Electronics', price: 99 }]

Filter 메소드와 다른 배열 메소드 비교

map vs filter

map과 filter는 모두 배열을 다루는 데 사용되지만, 목적이 다릅니다. map은 배열의 각 요소를 변환하여 새로운 배열을 생성하는 반면, filter는 특정 조건에 맞는 요소만을 추출합니다.

forEach vs filter

forEach는 배열의 각 요소에 대해 함수를 실행하지만, 반환값이 없습니다. 반면, filter는 조건에 맞는 새로운 배열을 반환합니다. 데이터 추출이 필요한 경우 filter가 더 적합합니다.

자바스크립트 코딩 테스트에서의 Filter 메소드 활용

자주 출제되는 문제 유형

코딩 테스트에서는 배열에서 특정 조건을 만족하는 요소를 추출하거나, 중복된 데이터를 제거하는 문제 등이 자주 출제됩니다. filter 메소드를 활용하면 이러한 문제를 효율적으로 해결할 수 있습니다.

효율적인 문제 해결 전략

문제를 해결할 때는 먼저 조건을 명확히 정의한 후, filter 메소드를 사용하여 해당 조건을 코드로 구현하는 것이 좋습니다. 예를 들어, 주어진 숫자 배열에서 10보다 큰 수만을 추출하는 문제는 다음과 같이 해결할 수 있습니다.

const numbers = [5, 12, 8, 130, 44];
const filteredNumbers = numbers.filter(number => number > 10);
console.log(filteredNumbers); // [12, 130, 44]

재미있는 퀴즈: Filter 메소드로 풀어보기

퀴즈: 다음 배열에서 문자열의 길이가 5 이상인 단어만을 추출하려면 어떻게 해야 할까요?

const words = ['apple', 'bat', 'carrot', 'dog', 'elephant'];

정답:

const longWords = words.filter(word => word.length >= 5);
console.log(longWords); // ['apple', 'carrot', 'elephant']

마무리하며

JavaScript 배열 filter 메소드는 데이터 필터링 작업을 간편하고 효율적으로 만들어주는 강력한 도구입니다. 코딩 테스트 준비는 물론 실제 개발에서도 유용하게 활용할 수 있으므로, 다양한 예제를 통해 숙련도를 높이는 것이 중요합니다. JavaScript 배열 filter 메소드를 통해 더욱 효과적인 코딩하는데 도움이 되길 바랍니다.

Joyous Garage