filter() 함수
Array.prototype.filter(callbackfn [, thisArg]);
JavaScript
복사
•
filter 메소드는 해석 그대로 걸러주는 역할을 하는 함수이다.
•
주로 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용하는 편이다
•
EMCA에는 “주어진 배열의 값들을 오름차순으로 접근해 call backfn을 통해 true를 반환하는 요소를 기준으로 신규 배열을 만들어 반환한다” 라고 정의되어있다
const number = [1, 2, 3, 4, 5];
const result = number.filter(number => number > 3);
// filter를 통해 3보다 큰 수를 가진 값들을 걸러내는 방법
console.log(number);
// [1, 2, 3, 4, 5]
console.log(result);
// [4, 5]
JavaScript
복사
filter() 사용법
•
callbackfn을 통해 주어진 3개의 인자(요소 값, index, 순회하는 대상 객체)를 사용해 Boolean값인 true, false 값을 반환하는 함수를 등록
const numbers = [1];
numbers.filter((number, index, source) => {
// number : 요소값
// index : source에서 요소의 index
// source : 순회하는 대상
console.log(number);
// 1
console.log(index);
// 0
console.log(source);
// [1]
return number > 3;
});
JavaScript
복사
실무)
const guys = [
{ name: 'YD', money: 500000 },
{ name: 'Bill', money: 400000 },
{ name: 'Andy', money: 300000 },
{ name: 'Roky', money: 200000 }
];
const rich = guys.filter(man => man.money > 300000);
console.log(rich);
// [{ name: "YD", money: 500000 }]
JavaScript
복사
•
filter는 원시적인 값만 사용할 수 있는 것이 아니라, json과 같은 객체를 사용해 true를 판별할 수 있다
•
즉, filter는 js에서 사용할 수 있는 모든 형태의 값을 true 또는 false로 분류해 원하는 조건을 만족하는 새로운 배열을 반환할 수 있다
•
다른 함수와의 조합성도 좋아 map, reduce 같은 다른 함수와도 자주 쓰인다
ex) “300000 이상을 가진 사람들의 이름은?”
const guys = [
{ name: 'YD', money: 500000 },
{ name: 'Bill', money: 400000 },
{ name: 'Andy', money: 300000 },
{ name: 'Roky', money: 200000 }
];
const richNames = guys.filter(man => man.money > 300000)
.map(man => man.name)
console.log(richName);
// ["YD", "Bill"]
JavaScript
복사
주의사항
•
filter 함수는 객체를 직접 사용하거나 변형시키지 않지만, callbackfn을 통해 수정할 수 있으며, 이는 문제를 발생시키는 원인이 된다
•
callbackfn이 호출되는 범위는 callbackfn이 처음 호출되기 전이며, filter는 순회하는 도중에 추가된 요소는 접근하지 않는다
•
반대로 순회하는 도중 수정이 일어나면 변경된 값이 callbackfn에 전달되고, 삭제된 요소는 접근하지 않는다
// array 요소가 추가되는 경우
const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter(number => {
numbers.push(number);
return number > 3;
});
console.log(result); // [4, 5]
// array 요소가 수정되는 경우
const numbers = [1, 2, 3, 4, 5];
const result = number.filter(number => {
numbers.pop();
return number > 3;
});
console.log(result); // []
JavaScript
복사
