정의
배열의 요소를 순차적으로 순회하면서 조건에 일치하는 요소를 모아 새로운 배열을 반환함.
ECMA에는 "주어진 배열의 값들을 오름차순으로 접근해 callbackfn을 통해 true를 반환하는 요소를 기준으로 신규 배열을 만들어 반환한다"라고 정의
true값이 나오는 요소만 반환함!
사용법
배열.filter(callback(element, index, array), thisArg)
-
arr : 순회하고자 하는 배열
-
element : 현재 배열의 요소
-
index(생략 가능) : 현재 배열 요소의 index
-
array(생략 가능) : filter 함수를 호출한 배열
-
thisArg(생략 가능) : callback을 실행할 때 this로 사용되는 값(= map 함수에서 사용될 this값)
특징
값이 존재하는 인덱스에 대해서만 호출됩니다.
삭제 또는 값이 없는 배열은 filter 함수가 실행되지 않습니다.
기존 배열의 값을 변경하지 않습니다.
처리되는 범위는 callback의 첫 호출 전에 설정됩니다. callback 호출 후 기존 배열을 추가해도 추가된 요소는 filter 함수에서 반영되지 않습니다.
예시
배열 속 숫자 중 홀수만 갖는 배열 만들기
const numbers = [1, 2, 3, 4, 5]; // 기존 배열
// filter1 - callback함수를 직접 작성
// 현재 요소를 2로 나눈 나머지가 1일 경우 홀수
const filter1 = numbers.filter(currentNumber => currentNumber % 2 === 1);
console.log('filter1 =', filter1);
//또는,
// filter2 - callback함수 선언 후 이용
function isOdd(currentNumber) {
return currentNumber % 2 === 1;
}
const filter2 = numbers.filter(isOdd);
console.log('filter2 =', filter2);const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter(number => number > 3);
//numbers 배열에 필터를 하는데 숫자가 3 이상인 것만 필터하고, 그 값을 result에 저장한다
console.log(numbers);
// [1, 2, 3, 4, 5];
console.log(result);
// [4, 5]for문을 사용해서도 이와 같은 작업을 할 수는 있지만 권장하지는 않음. map, filter, reduce와 같은 함수는 기본적으로 순차적으로 값을 접근한다라는 개념을 내포하고 있기 때문에 for문이 가진 순회를 별다른 코드를 작성하지 않고도 사용할 수 있게 해 주기 때문입니다.
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;
});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}]map함수와의 조합
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(richNames);
// ["YD", "Bill"]두 배열 비교하기 (filter() / include() 같이 이용하기)
배열의 대한 제일 간단한 비교는 JSON.stringify를 통해 문자열로 변경해 준 뒤 비교하는 방법.
includes()
arr.includes(valueToFind[, fromIndex])
배열.Includes(x)
배열에 x가 있으면 true를 반환한다
교집합 (Intersection)
// 배열 선언
const arr1 = ['1','2','3','4','5'];
const arr2 = ['1','2'];
// 교집합(Intersection)
console.log(arr1.filter(x => arr2.includes(x)));arr2에 includes 함수를 통해서 arr1의 값(x)이 있으면 true, 아니면 false를 반환하여
arr1의 filter 함수를 통해 true 값만 걸러내 새로운 배열을 만든다.
차집합 (Difference)
// 배열 선언
const arr1 = ['1','2','3','4','5'];
const arr2 = ['1','2'];
// 차집합(Difference)
console.log(arr1.filter(x => !arr2.includes(x)));
arr2에 includes 함수를 통해서 arr1의 값(x)이 있으면 false, 아니면 true를 반환하여
arr1의 filter 함수를 통해 true 값만 걸러내 새로운 배열을 만든다.
참고자료
