자바스크립트에서 Array.filter()는 배열의 요소들 중에 특정 조건을 만족하는 요소들을 모아서 새로운 배열로 리턴한다.
아래 예제를 통해 filter()의 사용 방법에 대해서 알아보자!
<예제 1>
배열 words의 요소 중에 문자열의 길이가 6보다 큰 것들만 찾아서 새로운 배열에 추가하고 리턴해보자
const words = ['lemon','banana', 'tomato', 'apple', 'strawberry', 'cherry', 'watermelon'];
const result = words.filter(word => word.length > 6);
console.log(result); // ['strawberry', 'watermelon']
<예제 2>
배열의 Number 요소 중에 value가 10보다 크거나 같은 값을 찾아 새로운 배열에 추가하고 리턴해보자.
function isBigEnough(value) {
return value >= 10;
}
const numbersInArray = [12, 5, 8, 130, 44, 10]
const filtered = numbersInArray.filter(isBigEnough); // filter()안에 function의 이름을 넣어 해당 조건에 맞는 값 찾아낼 수 있다.
console.log(filtered) // [ 12, 130, 44, 10]
<예제3> 배열의 넘버 요소중에 짝수를 찾아 새로운 배열에 추가하고 리턴해보자.
const num = [1,2,3,4,5,6,7,8];
function isEven(num) {
return num % 2 === 0;
}
// num.filter(isEven)
num.filter(isEven) // [ 2, 4, 6, 8 ]
<예제 4> 오브젝트 배열 속 원하는 요소만 갖는 배열 만들어보자.
const friends = [
{
name: '조아랑',
age: 30,
job: '사운드 디렉터',
married: false,
},
{
name: '고다소미',
age: 30,
job: '의류브랜드 MD',
married: true,
},
{
name: '우호성',
age: 29,
job: '회사원',
married: false,
},
{
name: '서진아',
age: 32,
job: '해외영업사원',
married: true}
];
// 현재 싱글이면서 나이가 30살 이상인 친구를 뽑아봅시다.
const single = friends.filter((friend) => {
return friend.married === false && friend.age >= 30 ;
})
console.log('현재 자유의 몸.. ', single);
( 결과 )
'현재 자유의 몸.. ' [
{
name: '주아랑',
age: 30,
job: '사운드 디렉터',
married: false
}
]