JavaScript Array.filter() 메소드란?
Array.filter() 메소드는 주어진 테스트 함수(콜백 함수)를 통과한 요소들만 모아 새로운 배열을 생성하는 JavaScript 배열 메소드입니다. 원본 배열은 변경되지 않으며, 조건을 만족하는 요소만 걸러내고 싶을 때 매우 유용하게 사용됩니다.
예를 들어, 사용자가 지정한 특정 값(19000)보다 큰 급여 요소만 추출하는 경우에 filter() 메소드를 활용할 수 있습니다.
예제 1: 특정 급여 이상의 값 필터링하기
다음 예제에서는 배열에 담긴 급여 중 19,000 이상인 값만 골라내어 새로운 배열로 반환합니다.
<html>
<body>
<p id="filter"></p>
<script>
var salary = [2000, 30000, 69000, 70000, 78000];
function checkSal(sal) {
return sal >= 19000;
}
document.getElementById("filter").innerHTML = salary.filter(checkSal);
</script>
</body>
</html>출력 결과
30000,69000,70000,78000
위 코드에서 checkSal 함수는 각 급여 요소가 19,000 이상인지 검사합니다. 조건을 만족하는 2000을 제외한 나머지 요소들만 새 배열에 담겨 반환된 것을 확인할 수 있습니다.
예제 2: 양수만 추출하기
다음은 정수 배열에서 양수 값만 필터링하는 예제입니다.
<html>
<body>
<script>
var numbers = [2, 3, 4, 5, -9, 0, -2, -5];
function Positive(value) {
return value > 0;
}
var posnum = numbers.filter(Positive);
document.write(posnum);
</script>
</body>
</html>출력 결과
2,3,4,5
Positive 함수는 각 요소가 0보다 큰지 판별하며, 음수와 0은 제외되고 양수만 새로운 배열에 담깁니다.
Array.filter() 메소드의 핵심 특징
- 새 배열 반환: 원본 배열은 그대로 유지되며, 조건을 통과한 요소들로 구성된 새로운 배열이 생성됩니다.
- 콜백 함수 기반: 각 요소에 대해 콜백 함수가 실행되며,
true를 반환하면 해당 요소가 결과 배열에 포함됩니다. - 조건 불일치 시 빈 배열: 어떤 요소도 조건을 통과하지 못하면 빈 배열(
[])이 반환됩니다. - 체이닝 가능:
map(),reduce()등 다른 배열 메소드와 함께 연결하여 사용할 수 있어 코드 가독성과 생산성이 높아집니다.
이처럼 Array.filter()는 데이터 검색, 유효성 검사, 목록 정리 등 다양한 상황에서 배열 데이터를 손쉽게 다룰 수 있게 해주는 JavaScript의 필수 메소드입니다.