JavaScript Array find() 함수 사용법

1. Array find() 란 무엇인가?

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

 

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

 

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

 

다음은 find() 메서드의 구문을 보여줍니다.

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

 

2. Arguments

find()는 콜백 함수와 콜백 함수 내에서 this에 사용할 선택적 값의 두 인수를 허용합니다.

 

1) callback

콜백은 배열의 각 요소에서 실행되는 함수입니다. 세 가지 인수가 필요합니다.

• 요소는 현재 요소입니다.
• 현재 요소의 인덱스를 지정합니다.
• find()가 호출된 배열.

2) thisArg

thisArg는 콜백 내에서 this로 사용되는 객체입니다.

 

3. Return value

find()는 콜백이 진실 값을 반환할 때까지 배열의 각 요소에 대해 콜백 함수를 실행합니다.

콜백이 참 값을 반환하면 find()는 즉시 요소를 반환하고 검색을 중지합니다. 그렇지 않으면 undefined를 반환합니다.

찾은 요소의 인덱스를 찾으려면 findIndex() 메서드를 사용할 수 있습니다.

 

4. JavaScript find() examples

다음 예제에서는 find() 메서드를 사용하여 숫자 배열에서 첫 번째 짝수를 검색합니다.

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

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

Output:

2

다음과 같이 이름 및 신용 속성이 있는 고객 개체 목록이 있다고 가정합니다.

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

다음 코드는 find() 메서드를 사용하여 크레딧이 100보다 큰 첫 번째 고객을 찾습니다.

console.log(customers.find(c => c.credit > 100));

Output:

{ name: 'ACME Corp', credit: 200 }

이 자습서에서는 JavaScript 배열 find() 메서드를 사용하여 테스트를 충족하는 요소의 첫 번째 항목을 검색하는 방법을 배웠습니다.

 

 

 

Refereance: https://www.javascripttutorial.net/es6/javascript-array-find/