Javascript_filter, find 기초 정리

1. helpermethod

자바스크립트에서 helpermethod인 filter와 find에 대해 알아보자. 가장 기초적인 예시부터 다양한 예시를 적어보겠다. 

 

 

 

2. filter

리스트 안에서 홀수만 뽑고 싶거나, 만약 todoList를 만들었을 때, 할 일이 끝난 것만 뽑아내고 싶을 때 사용하면 된다. 즉, 특정 조건을 만족하는 것만 모아서 배열을 리턴한다.

일반 사용

const arr = [1, 2, 3, 4, 5]
const newArr = arr.filter(num => num % 2)

console.log(newArr)

전체를 순회하며 조건을 만족하는 요소를 찾아낸다.

 

 

3. find

filter와 가장 비슷하지만 가장 큰 차이점은 filter는 배열을 리턴하지만, find는 특정 값(요소)을 리턴한다. 그리고 filter는 전체 순회를 하지만, find는 특정 값을 찾으면 더이상 순회하지 않고 리턴(break)한다. 따라서 find를 사용하는 구문은 filter로도 구현이 가능한 경우가 있다. 그러나 성능적으로는 전체를 순회하지 않는 find가 더 좋다.

const arr3 = [1, 2, 3, 4, 5]
const number = arr3.find(num => num % 2)
console.log(number)

// 1

const arr3 = [1, 2, 3, 4, 5]
const number = arr3.find(num => num === 3)
console.log(number)

// 3