ES6 find(), findIndex() 사용법을 알아보자!

Find()

find()
 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.

이전 글(ES6 Map, Filter, Reduce 기능을 알아보자)에서 사용한 filter()는 조건에 부합하는 모든 요소들을 가져왔다.

그러면 fin()는 어떻게 다를까?

MDN설명에서 주목해야할 부분은 첫 번째 요소의 값을 반환한다는 것이다.

글로 설명보다는 코드를 한번 봐보자잉

먼저 이전 글처럼 numbers 배열을 만들어 주었다.

var numbers = [3, 56, 2, 48, 5];

그리고 numbers에서 10보다 큰 요소를 find 메서드를 통해서 찾아보았다.

const newNumbers = numbers.find(function(num){
  return num > 10;
})
console.log(newNumbers);

//결과
56

filter()를 사용하면 10보다 큰 모든 요소를 가져오겠지만, MDN 설명처럼 첫번째 값인 56만 가져왔다.

그렇다면 반대로 10보다 작은 값을 가져오면 numbers 배열에서 10보다 작은 첫번째 요소인 3이 출력될것이다.

const newNumbers = numbers.find(function (num) {
  return num < 10;
});
console.log(newNumbers);

//결과
3

 

---

 

FindIndex()

findIndex()
 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.

 

findIndex()는 이름에서도 알 수 있지만 결과값의 위치정보를 반환한다.

const newNumbers = numbers.findIndex(function (num) {
  return num < 10;
});
console.log(newNumbers);

//결과
0

10보다 작은 요소를 찾는 상황에서 find() 메서드는 요소의 값인 3을 반환했다.

findIndex()는 요소의 위치인 0을 반환한다.