배열에서 특정 조건만 주어 조건에 해당하는 값들만 걸러내려면 어떻게 해야할까?
이러한 상황에서 주로 사용하는 것이 filter() 함수, find() 함수이다.
arr.filter(callback(element[, index[, array]])[, thisArg])
문자 그대로 배열의 값들 중 특정 조건이 true인 값들을 걸러준다.
true
를 반환하면 요소를 유지하고, false
를 반환하면 버립니다.const arr1 = [10, 20, 30, 40, 50];
//값이 30 이상인 값 구하기
const result1 = arr1.filter(item => item>30);
console.log("값이 30 이상인 값 구하기");
console.log(result1); // [40, 50]
//값이 40 인 값 구하기
const result2 = arr1.filter(item => item === 40);
console.log("\n값이 40 인 값 구하기");
console.log(result2); // [40]
//값이 30 이 아닌 값들 구하기
const result3 = arr1.filter(item => item !== 30);
console.log("\n값이 30 이 아닌 값들 구하기");
console.log(result3); // [10, 20, 40, 50]
item 인자에는 arr1 배열의 값이 하나씩 들어오고 이를 조건문으로 검증해 걸러낸다.
filter() 함수는 특정 조건에 맞는 값들을 모두 걸러준다면,
find() 함수는 특정 조건에 맞는 값이 나오는 첫번째 요소 값만 걸러내준다.
arr.find(callback[, thisArg])
const arr1 = [10, 20, 30, 40, 50];
//30 이상인 값 - find() 사용
const result1 = arr1.find(item => item>30);
console.log("find() 사용");
console.log(result1); // 40
//30 이상인 값 - filter() 사용
const result2 = arr1.filter(item => item>30);
console.log("\nfilter() 사용");
console.log(result2); // [40, 50]
위 두 메소드의 조건을 만족하는 값은 40, 50 두 가지인데, filter()는 40, 50을 뽑아냈지만, find()는 조건을 만족하는 40만 뽑아내고 종료했다.