배열의 요소들이 주어진 테스트 조건을 통과했는지 확인하는 방법에는 크게 두 가지가 있습니다. 바로 Array.filter() 메서드와 _.filter() 메서드입니다. 전자는 자바스크립트의 기본 내장 메서드인 반면, 후자는 자바스크립트 라이브러리인 underscore.js에서 제공하는 메서드입니다.
_.filter() 메서드
문법
_.filter( list, conditions);
이 메서드는 두 개의 매개변수를 받습니다. 하나는 검사 대상 요소들이 담긴 리스트(list)이고, 다른 하나는 테스트 기준이 되는 조건(conditions), 즉 콜백 함수 코드입니다.
예제
다음 예제에서는 _.filter() 메서드를 사용하여 배열에서 3의 배수만 골라 출력합니다. 여기서 _.filter()는 첫 번째 매개변수로 배열을, 두 번째 매개변수로 조건을 담은 함수를 받습니다.
<html>
<body>
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">
</script>
</head>
<body>
<script>
var arr = [3,4,5,6,9,77,36,42]
var threeMul = _.filter(arr,
function(num){
return num % 3 == 0;
});
document.write(threeMul);
</script>
</body>
</html>출력 결과
3,6,9,36,42
위 코드에서 각 숫자를 3으로 나눈 나머지가 0인 경우에만 true를 반환하므로, 배열에서 3의 배수에 해당하는 값들만 필터링되어 새로운 배열로 반환됩니다.
Array.filter() 메서드
Array.filter()는 별도의 라이브러리 없이 사용할 수 있는 자바스크립트 기본 메서드입니다. 이 메서드는 제공된 테스트 함수를 통과하는 요소들만 모아 새로운 배열을 만들어 반환합니다. 원본 배열은 변경되지 않는다는 점이 특징입니다.
예제
다음 예제에서는 급여 배열에서 특정 금액보다 큰 값들만 골라 화면에 출력합니다.
<html>
<body>
<p id="filter"></p>
<script>
var salary = [12000, 13000, 15000, 78000, 43000];
var specSal = salary.filter(myFunction);
document.getElementById("filter").innerHTML = specSal;
function myFunction(value, index, array) {
return value > 20000;
}
</script>
</body>
</html>출력 결과
78000,43000
콜백 함수 myFunction은 배열의 각 요소를 검사하여 20000보다 큰 값에 대해 true를 반환합니다. 그 결과 78000과 43000만 통과하여 새로운 배열에 포함됩니다. 참고로 콜백 함수는 value(요소 값), index(인덱스), array(원본 배열) 세 가지 매개변수를 받을 수 있습니다.