Array filter 사용법

filter

주로 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용한다.

주어진 배열의 값들을 오름차순으로 접근해 callbackfn을 통해 true를 반환하는 요소를 기준으로 신규 배열을 만들어 반환한다.

 

예제1

json과 같은 객체를 사용해 true를 판별 할 수 있다.

const guys = [
    { name: 'YD', money: 5000 },
    { name: 'Bill', money: 4000 },
    { name: 'Andy', money: 3000 },
    { name: 'Roky', money: 2000 }
];

const rich = guys.filter(man => man.money > 3000)

console.log(rich)

예제2

array에 주어진 값들을 filter를 통해 3보다 큰 수를 가진 값들을 걸러낸다.

filter를 통해 걸러서 true로 반환된 값을 result에 담는다.

const numbers = [1, 2, 3, 4, 5]; 
const result = numbers.filter(number => number > 3); 

console.log(numbers); // [1, 2, 3, 4, 5]; 

console.log(result); // [4, 5]

for문을 이용해서도 사용할 수 있지만 권장하지 않는다.

map, filter, reduce와 같은 함수는 기본적으로 순차적으로 값을 접근한다는 개념을 내포하고 있기 때문에 for문이 가진 순회를 별다른 코드를 작성하지 않고도 사용할 수 있게 해주기 때문이다.

for 문을 사용해 배열에서 3보다 큰 숫자를 반환할 경우

const numbers = [1, 2, 3, 4, 5];
const result = []; 

for (i = 0; i < numbers.length; i++) { 
	const number = numbers[i]; 
    if (number > 3) { 
    	result.push(number); 
    } 
} 

console.log(result); // [4, 5]

 

filter는 filter 자체 만으로도 쓰임새가 좋지만 다른 함수와 조합성도 좋아 map, reduce와 같은 다른 함수와 함께 자주 쓰인다.

예를 들어 위의 코드는 "3000 이상을 가진 사람들은?" 이지만 map을 활용하면 "3000 이상을 가진 사람들의 이름은?"도 만들 수 있다.

const guys = [
    { name: 'YD', money: 5000 },
    { name: 'Bill', money: 4000 },
    { name: 'Andy', money: 3000 },
    { name: 'Roky', money: 2000 }
];

const richNames = guys.filter(man => man.money > 3000)
                        .map(man => man.name)

console.log(richNames)  // ['YD', 'Bill']

 

주의사항

• filter 함수는 객체를 직접 사용하거나 변형시키지 않지만 callbackfn을 통해 수정할 수 있으며 이는 문제를 발생시키는 원인이 된다.
• callbackfn이 호출되는 범위는 callbackfn이 처음 호출되기  이전이며, filter는 순회하는 도중에 추가된 요소는 접근하지 않는다.
• 반대로 순회하는 도중 수정이 일어나면 변경된 값이 callbackfn에 전달되고 삭제된 요소는 접근하지 않는다.

 

요소가 추가되는 경우

const numbers = [1, 2, 3, 4, 5];

const result = numbers.filter(number => {
    numbers.push(number);
    return number > 3;
});

console.log(result); // [4, 5]

요소가 수정되는 경우

const numbers = [1, 2, 3, 4, 5];

const result = numbers.filter(number => {
    numbers.pop();
    return number > 3;
});

console.log(result); // []

 

활용하기

다중 조건 사용하기

- 1보다 크고 5보다 작은 수를 찾는다.

const numbers = [1, 2, 3, 4, 5];

const newNumbers = numbers.filter(number => {
    if (nuber > 1 && number < 5) {
        return true;
    }
    return false;
});

console.log(newNumbers); // [2, 3, 4]

 

- money를 3000 이상 가진 name이 YD인 사람을 찾는다.

const guys = [
    { name: 'YD', money: 5000 },
    { name: 'Bill', money: 4000 },
    { name: 'Andy', money: 3000 },
    { name: 'Roky', money: 2000 }
];

const rich = guys.filter(man => {
    if (man.money > 3000) {
        if (man.name === 'YD')  {
            return true;
        }
    }
    return false;
});
console.log(rich);  // [{ name: 'YD', money: 5000 }]

 

고차 함수 사용하기

고차함수를 사용해서 미리 정의한 식이나 정의되어 있는 식을 사용할 수 있다.

- 3보다 큰 함수 구하기

const numbers = [1, 2, 3, 4, 5];

const greaterThanThree = value => value > 3;

const newNumbers = numbers.filter(greaterThanThree)

console.log(newNumbers); // [4, 5]

 

배열의 최고값(Max), 최소값(Min) 기준으로 분류하기

thisArg를 통해 전달받은 인자 중 순회하는 대상을 사용하면 많은 돈(Max) 또는 적은 돈(Min) 값을 식별할 수 있고, 그 값을 필터의 판별 조건으로 사용하면 쉽게 많은 돈을 가진 사람이나 적은 돈을 가진 사람을 반환하는 기능을 만들 수 있다.

const guys = [
    { name: 'YD', money: 5000 },
    { name: 'Bill', money: 5000 },
    { name: 'Mark', money: 4000 },
    { name: 'Andy', money: 3000 },
    { name: 'Roky', money: 2000 },
    { name: 'Kan', money: 1000 },
    { name: 'Sam', money: 1000 },
];

const rich = guys.filter((man, index, target) => {
   const maxOfMoney = Math.max(...target.map(person => person.money));
   return man.money === maxOfMoney;
});

console.log(rich);  // [{ name: 'YD', money: 5000 }, { name: 'Bill', money: 5000 }]

const poor = guys.filter((man, index, target) => {
    const minOfMoney = Math.min(...target.map(person => person.moeny));
    return man.money === minOfMoney;
})

console.log(poor);  // [{ name: 'Kan', money: 1000 }, { name: 'Sam', money: 1000 }]

 

중복 제거하기

수정하지 않는 이상 순회하는 대상(target)은 변경되지 않는다는 속성을 이용하여 filter와 indexOf를 조합하면 배열에 있는 중복을 제거할 수 있다.

const numbers = [1, 1, 2, 2, 3, 4, 5];

const newNumbers = numbers.filter((number, index, target) => {
    return target.indexOf(number) === index;
})

console.log(newNumbers); // [1, 2, 3, 4, 5]

 

 

 

 출처/참고

Javascript - Array filter 사용법