[TIL] filter와 find의 차이점

배열 안에 내가 원하는 객체를 찾고 싶어 나는 filter를 사용해서 찾아줬다.

여기서 find로도 찾을 수 있지 않나? 하는 생각이 들어 둘이 뭐가 다른 건지 차이점이 궁금했다.

 

결론부터 말하자면 filter()는 만족하는 모든 요소들을 모아 새로운 배열로 반환한다. find()는 만족하는 첫 번째 요소의 값을 반환하고 그 요소가 없다면 undefined를 반환한다.

 

filter()

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

• 콜백 함수가 만족하는 모든 값을 새로운 배열로 반환한다. 값이 1개라도 배열로 반환한다!

find()

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

• 콜백 함수가 true값을 반환할 때까지 실행하고 true일 경우 그 값을 반환하고 즉시 종료시킨다.(뒤에 만족하는 요소가 더 있더라도 바로 종료) 만족하는 요소가 없다면 undefined를 반환한다.

 

지금 생각해보니 내가 작성한 코드는 하나의 값만을 반환하는 경우였기 때문에 find()를 이용하는 게 더 적절했다! 과거의 나는 filter()로 원하는 값을 찾은 후 그 값에 접근하기 위해 [0]을 붙여줬다...(그렇다 나는 바보였다)