자바스크립트 filter() 메서드 완벽 가이드: 개념부터 실전 예제까지

JavaScript의 filter() 메서드는 기존 배열을 바탕으로 조건에 맞는 요소들만 모아 새로운 배열을 만들어 주는 기능입니다. 이 메서드는 콜백 함수(callback function)를 인수로 받으며, 콜백 함수는 각 요소가 새 배열에 추가될지 여부를 판단합니다.

JavaScript를 막 배우기 시작했다면 filter()나 reduce() 같은 고차 함수를 아직 접해 보지 못했을 수 있습니다. 하지만 객체 목록, 즉 배열(array)을 다룰 때 이 함수들은 매우 강력한 도구가 됩니다.

배열에서 특정 값만 골라내고 싶은 적이 있다면 JavaScript의 filter() 함수가 정답입니다. 이번 튜토리얼에서는 다양한 예제와 함께 filter() 함수의 사용법을 단계별로 자세히 살펴보겠습니다.

배열 기초 복습

JavaScript 배열은 0개 이상의 항목을 저장할 수 있는 자료구조입니다. 항목으로는 숫자, 문자열, 다른 배열 등 다양한 데이터 타입이 가능하며, 각 항목에는 "0"부터 시작하는 번호형 인덱스(index)가 부여되어 특정 항목에 쉽게 접근할 수 있습니다.

배열을 사용하면 하나의 변수에 여러 값을 담을 수 있습니다. 덕분에 값을 저장하기 위해 변수를 일일이 선언할 필요 없이, 더 깔끔하고 효율적인 코드를 작성할 수 있습니다.

다음은 JavaScript 배열의 간단한 예시입니다:

let names = ["Alex", "Bill", "Connor", "Daniel", "Edna"];

자바스크립트 filter() 메서드란?

JavaScript의 배열 filter() 메서드는 기존 배열의 내용을 바탕으로 새로운 배열을 생성합니다. filter() 메서드는 기존 배열의 각 항목에 대해 콜백 함수를 실행하며, 콜백 함수의 조건을 충족하는 항목만 새로운 목록에 추가됩니다.

filter() 메서드를 활용하면 특정 기준을 만족하는 값만 손쉽게 추출하여 새로운 배열에 담을 수 있습니다.

filter() 메서드 문법

filter() 메서드는 다음과 같은 문법 구조를 가집니다:

var newArr = oldArr.filter(function(item) {
	return yourCondition;
});

위 코드는 "oldArr" 배열의 내용을 기반으로 "newArr"라는 새로운 배열을 만듭니다. 콜백 함수는 조건이 참(true)일 때 해당 값을 새 배열에 포함시킵니다. 대표적인 조건식의 예는 다음과 같습니다:

item > 5
item == "Jessie"
item < 3

조건식을 작성할 때는 JavaScript 비교 연산자를 사용할 수도 있고, if문을 활용할 수도 있습니다. 특히 if문을 사용하면 여러 조건 중 어떤 값이 새 목록에 추가될지 세밀하게 제어할 수 있다는 장점이 있습니다.

filter() 활용 예제

숫자 목록 필터링하기

먼저 간단한 예제부터 시작해 보겠습니다. 커피숍의 구매 내역 목록이 있고, 여기서 10달러가 넘는 구매액만 담은 새로운 목록을 만들고 싶다고 가정해 봅시다.

구매 내역 목록은 다음과 같습니다:

var purchases = [2.50, 2.70, 10.50, 12.30, 9.60, 2.30, 3.40];

filter() 메서드를 사용하면 10달러를 초과하는 구매 내역만 추출할 수 있습니다:

var big_purchases = purchases.filter(function(purchase) {
	return purchase > 10;
});

프로그램은 각 구매 금액이 10달러보다 큰지 하나씩 확인합니다. 10달러를 초과하는 구매는 big_purchases 목록에 추가되고, 그렇지 않은 구매는 제외됩니다.

변수 big_purchases의 값은 다음과 같습니다:

[10.5, 12.3]

filter() 메서드는 우리가 정의한 조건("item > 10")을 통과한 모든 요소를 반환합니다. 전체 구매 내역이 필요하다면 언제든 원본인 "purchases" 배열을 다시 참조하면 됩니다. 즉, filter() 메서드는 원본 배열을 변경하지 않으면서 조건을 만족하는 값들로 이루어진 새 배열을 반환한다는 점이 핵심입니다.

객체 배열 필터링하기

이번에는 학교에 재학 중인 모든 학생의 정보를 담은 배열이 있다고 가정해 봅시다:

var students = [
	{
		id: 1,
		name: "Alex",
		class: "First Grade",
		age: 5
	},
	{
		id: 2,
		name: "Bill",
		class: "First Grade",
		age: 5
	},
	{
		id: 3,
		name: "Connor",
		class: "Second Grade",
		age: 6
	}
];

그렇다면 1학년 학생들만 골라내려면 어떻게 해야 할까요? filter()를 사용하면 이런 작업도 아주 간단하게 처리할 수 있습니다. "students" 배열에서 1학년 학생만 모두 반환하는 코드를 작성해 보겠습니다:

var firstGradeStudents = students.filter(function(student) {
	return student.class === "First Grade";
});

filter() 메서드는 하나의 매개변수를 받습니다. 이 매개변수는 데이터에 어떤 동작을 실행할지 결정하는 함수입니다.

filter() 함수는 "students" 배열의 모든 객체를 순회하며, 학급(class) 속성이 "First Grade"와 일치하는 학생만 반환합니다. 여기서 "===" 연산자는 값과 데이터 타입까지 모두 비교하는 엄격한 동등(strict equality) 연산자를 의미합니다.

filter 함수는 이렇게 걸러낸 값들로 새로운 배열을 생성하며, 그 결과는 "firstGradeStudents" 변수를 통해 확인할 수 있습니다.

마무리

filter() 배열 메서드를 사용하면 기존 배열의 내용을 바탕으로 새로운 배열을 만들 수 있습니다. 이름 그대로, filter()는 기존 배열에서 원하는 요소만 필터링(걸러내)해 주는 메서드입니다.

이상으로 filter() 메서드에 대한 설명을 마치겠습니다! 이제 JavaScript에서 filter()를 한층 자신 있게 활용할 수 있을 것입니다. JavaScript 코딩 실력을 더 키우고 싶다면, 초보자를 위한 최고의 JavaScript 튜토리얼을 다룬 글도 함께 읽어보시길 추천합니다.