[Javascript] .find()

---

목차

 

1. find()

2. 예제

3. filter()와의 차이

---

 

1. find()

---

ES5에서 배열의 요소를 찾으려면 indexOf() 또는 lastIndexOf() 메서드를 사용한다. 그러나 이러한 메서드는 일치하는 첫 번째 요소의 인덱스만 반환하기 때문에 매우 제한적이다.

ES6에서는 Array.prototype 객체에 find()라는 새로운 메서드가 추가되었다.

 

find() 메서드는 제공된 함수를 충족하는 배열의 첫 번째 요소를 반환한다.

 

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

 

 

구문

find(callback(element[, index[, array]])[, thisArg])

 

 

 

2. 예제

---

1. 숫자 배열에서 첫 번째 짝수를 검새하고 싶은 경우 find() 메서드를 사용해보자.

let numbers = [1, 2, 3, 4, 5];

console.log(numbers.find(e => e % 2 == 0)); // 2

 

 

 

2. 다음과 같이 이름 및 신용 속성이 있는 고객 개체 목록이 있다고 가정해보자.

let customers = [{
    name: 'ABC Inc',
    credit: 100
}, {
    name: 'ACME Corp',
    credit: 200
}, {
    name: 'IoT AG',
    credit: 300
}];

console.log(customers.find(c => c.credit > 100)); // { name: 'ACME Corp', credit: 200 }

 

 

 

 

3. filter()와의 차이점

---

.find() .filter() 둘 다 배열에서 특정 조건만 주어 조건에 해당하는 값들만 걸러내주는 함수이다.

 

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

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

 

 

 

find() 함수는 특정 조건에 맞는 값이 나오는 첫번째 요소 값만 걸러내준다.따라서 filter()함수는 값이 배열로 나오지만 find() 함수는 값이 배열로 나오지 않는다.