[JavaScript] filter() & find()

배열에서 특정 조건만 주어 조건에 해당하는 값들만 걸러내려면 어떻게 해야할까?

이러한 상황에서 주로 사용하는 것이 filter() 함수, find() 함수이다.

fiter() 함수

arr.filter(callback(element[, index[, array]])[, thisArg])

문자 그대로 배열의 값들 중 특정 조건이 true인 값들을 걸러준다.

• callback
  각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다.
• 매개변수(optional) : element(처리할 현재 요소) / index(처리할 현재 요소의 인덱스) / thisArg(callback을 실행할 때 this로 사용하는 값)
  MDN 문서 살펴보기

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 배열의 값이 하나씩 들어오고 이를 조건문으로 검증해 걸러낸다.

find() 함수

filter() 함수는 특정 조건에 맞는 값들을 모두 걸러준다면,
find() 함수는 특정 조건에 맞는 값이 나오는 첫번째 요소 값만 걸러내준다.

arr.find(callback[, thisArg])

• 파라미터 : element(콜백함수에서 처리할 현재요소) / index(optional, 처리할 요소의 인덱스 / array(optional, find 함수를 호출한 배열) / thisArg(callback을 실행할 때 this로 사용하는 값)

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만 뽑아내고 종료했다.