[자바스크립트] filter

 

 

 

 

 

 

자바스크립트의 'filter()' 함수는 배열을 순회하면서 주어진 조건에 따라 요소를 걸러내는 메서드이다.

이 함수를 사용하면 배열을 필터링하여 새로운 배열을 만들 수 있다.

 

 

 

 

 

Array. 인스턴스의 filter() 메서드는 주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링 합니다.
- mdn

 

 

 

 

 

 

👉 얕은 복사 생성?

 

인스턴스의 filter() 메서드는 배열에서 특정한 조건을 만족하는 요소들을 선택하여 그 요소들로 이루어진 새로운 배열을 반환한다. 여기서 얕은 복사(shallow copy)한 개념이 사용된다.

 

 

얕은 복사는 원본 배열의 요소들을 복사하여 새로운 배열을 생성하지만, 그 요소들은 참조만을 복사한다는 뜻이다.

이 말은, 만약 원본 배열의 요소가 객체나 배열 같은 참조 타입이라면, 새 배열의 요소는 원본 배열의 요소를 가리키는 것일 뿐, 새로운 복사본이 생성되는 것이 아니다.

 

 

 

예를 들어,

const originalArray = [{name: "Alice"}, {name: 'Bob'}, {name: 'Charlie'}];

//filter 메서드를 사용하여 원본 배열에서 name이 'Bob'인 요소를 찾음
const filteredArray = originalArray.filter(item => item.name === 'Bob');

console.log(filteredArray); // [{name: 'Bob'}];

//filteredArray의 첫 번째 요소를 변경
filteredArray[0].name = 'Bobby';

console.log(originalArray); // [{name: 'Alice'}, {name: 'Bobby'}, {name: 'charlie'}];

 

여기서 볼 수 있듯이, filter()를 통해 만들어진 filteredArray의 요소를 변경하면 원본 배열인 originalArray의 해당 요소도 변경되는 걸 확인할 수 있다. 이것이 얕은 복사의 특징이다.

요소들은 독립적인 복사본이 아니라 원본과 같은 참조를 공유하기 때문에 하나를 변경하면 다른 하나도 영향을 받는다.

 

 

 

 

 

---

 

 

 

문자열 길이에 따라 필터링하기

const words = ['apple', 'banana', 'orange', 'grapefruit', 'kiwi'];

const londwords = words.filter(function(word){
	return word.length > 6;
});

console.log(longwords); //['banana', 'orange', 'grapefruit']

 

 

 

객체의 특정 속성을 기준으로 필터링하기

const people = [
  {name: 'Alice', age: 25},
  {name: 'Bob', age: 30},
  {name: 'Charlie', age: 20},
  {name: 'David', age: 35}
];

const overThirty = people.filter(function(person){
	return person.age > 30;
});

console.log(overThirty); // [{name: 'Bob', age: 30}, {name: 'David', age: 35}];

 

 

 

조건을 함수로 분리하기

function isPrime(num){
    if(num <= 1) return false;
    
    for(let i = 2; i <= Math.sqrt(num); i++){
    	if(num % i === 0) return false;    
    }
    
    return false;
}

const numbers = [7,14,23,30,37,42,47];
const primes = numbers.filter(isPrime);

console.log(primes); // [7,23,37,47];

 

 

 

 

---

 

 

 

 

 

+ filter() 를 reduce(), map()과 함께 사용하면 강력한 배열 조작이 가능하다.

 

 

filter()와 map() 함께 쓰기

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

//짝수를 걸러내고 해당 숫자들을 두 배로 만들기
const doubledEvenNumbers = numbers
    .filter(function(number){
      return number % 2 === 0;
    })
    .map(function(evenNumber){
      return evenNumber * 2;
    });
    

console.log(doubledEvenNumbers); // [4, 8]

 

위 예시에서 numbers 배열에서 먼저 filter() 함수를 사용해 짝수만 걸러낸 뒤, map() 함수를 이용해 걸러진 짝수들을 두 배로 만들었다.

 

 

 

filter()와 reduce() 함께 사용하기

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

//홀수의 합 구하기
const sumOfOddNumbers = numbers
    .filter(function(number){
      return number % 2 !== 0;
    })
    .reduce(function(sum, oddNumber){
      return sum + oddNumber;
    }, 0);
    
 
console.log(sumOfOddNumbers); // 9

 

이 경우에는 filter() 함수로 홀수를 걸러내고, 그 후에 reduce() 함수를 사용하여 걸러진 홀수들의 합을 계산했다.

 

 

 

 

filter(), reduce(), map()을 함께 사용하기

 

 

짝수를 걸러내고 해당 숫자들을 제곱한 합 구하기

const numbers = [1,2,3,4,5,6];
const sumOfSquaresOfEvenNumbers = numbers
	.filter(number => number % 2 === 0) //짝수만 걸러냄
    .map(evenNumber => evenNumber ** 2) //각 숫자를 제곱함
    .reduce((sum, squredNumber) => sum + squaredNumber, 0); //제곱한 숫자들의 합을 구함
    
    
console.log(sumOfEvenNumbers); //56

 

 

 

문자열 배열에서 길이가 5 이상인 단어들을 대문자로 변경하여 연결하기

const words = ['apple', 'banana', 'orange', 'grapefruit', 'kiwi'];

const resultString = words
	.filter(word => word.length >=5) //길이가 5 이상인 단어만 걸러냄
    .map(word => word.toUpperCase()) //각 단어를 대문자로 변경
    .reduce((result, uppercaseWord) => result + uppercaseWord, ''); //대문자로 변경된 단어들을 연결
    
console.log(resultString); //BANANAORANGEGRAPEFRUIT

 

 

 

 

 

 

 

 

---

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Array.prototype.filter() - JavaScript | MDN