자바스크립의 배열에서 특정 값을 가공하거 추출하는 것은 자주 사용된다. 이 때 filter 메서드를 사용하면 조건에 부합되는 값들만 추출하여 새로운 배열을 만들 수 있다. 특정 조건을 다시 코딩하여 코드의 길이를 늘릴 필요가 없다. 단순명료하게 사용이 가능하다. 이미 알고 있는 것들을 콜백메서드에 넣어주면 된다.
자바스크립트 배열 반복 filter 메서드 사용
Using javascript iteration filter method
자바스크립트에서 배열을 반복하면서 특정값을 추출하는 것은 난해할 수 있다.
배열의 filter 메서드는 그러한 번거로운 작업을 줄여준다.
자바스크립트 배열에서 특정한 값을 추출하기 위해 사용하는 filter 메서드는 foreach 메서드와 사용법이 비슷하다.
당연히 기본적으로 제공하는 인자값 또한 같다.
특정값 추출하기
filter 메서드는 자바스크립트 배열에서 필요한 값을 추출할 수 있다.
숫자형태의 것이나, 문자열이나 동일하다.
결과값은 배열의 형태이다.
기본적인 인자값은 value, index, array 3가지 요소를 갖는다.
vFilterText = Array.filter(CallbackFuncion);
function CallbackFuncion(value, index, array) {
// 조건
}샘플코드
위의 기본적인 코드를 가지고 자바스크립트 예제를 만들어 본다.
filter 메서드와 기본적으로 제공하는 인자값 3가지를 가지고 값을 추출한 배열 값을 확인해 본다.
첫번째는 숫자 배열을 기준으로 filter 메서드를 사용하였다.
두번째는 문자 배열을 기준으로 filter 메서드를 사용하였다.
<!DOCTYPE html>
<html>
<body>
<script>
console.log('----------')
let vNumbers = [45, 4, 9, 16, 25];
let vFilterNumber = vNumbers.filter(FilterFuncNumber);
function FilterFuncNumber(value, index, array) {
return value > 18;
}
console.log("원본", vNumbers);
console.log("숫자18 이상", vFilterNumber);
console.log('----------')
let vComps = ["현대자동차", "기아자동차", "쌍용자동차"];
let vFilterText = vComps.filter(FuilterTextFunc);
function FuilterTextFunc(value, index, array) {
return value.includes('기아');
}
console.log("원본", vComps);
console.log("문자열 기아 포함", vFilterText);
console.log('----------')
</script>
</body>
</html>콜백메서드로 지정된 함수는 우리가 이미 자주 사용하는 키워드나 명령어를 사용하여 조건을 설정하면 된다.
조건이 맞다면 새로운 배열을 만들면서 값을 보여줄 것이다.
결과 화면을 보자.
첫번째 조건은 숫자 배열에서 숫자가 18 이상인 것만 추출하였다.
두번째 조건은 문자열 배열에서 기아 란 문자가 들어간 것만 추출하였다.
제대로 출력되는 것을 볼 수 있다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 배열 반복 reduceRight 메서드 사용 (0) | 2022.01.17 |
|---|---|
| 자바스크립트 배열 반복 초기값 지정 reduce 메서드 사용 (0) | 2022.01.13 |
| 자바스크립트 배열 반복 map 메서드 사용 Using javascript iteration map method (0) | 2022.01.08 |
| 자바스크립트 배열 반복 foreach 메서드 사용 Using javascript iteration foreach method (0) | 2022.01.06 |
| 자바스크립트 배열 최대값 최소값 구하기 Find Max and Min value in Javascript Array (0) | 2022.01.04 |
댓글