현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

find()메서드는 해당 배열 안의 값을 하나 반환합니다. 이 때, 콜벡으로 전달받은 테스트 함수가 요구하는 조건을 만족하는 값을 반환합니다. 그렇지 않으면 undefined를 반환합니다.

findIndex() 메서드도 살펴보십시오. 이 메서드는 만족하는 값 대신, 만족하는 값의 인덱스를 반환합니다.

배열 요소의 위치를 찾고자 하는 경우에는 Array.prototype.indexOf()를 사용하십시오. 

배열 요소가 해당 배열에 존재하는지 확인하고자 하는 경우에는 Array.prototype.includes()를 사용하십시오.

구문

arr.find(callback[, thisArg])

인수

callback
배열의 각 값에 대해서 실행시킬 함수입니다. 아래의 세 인자 값을 받습니다:
element
콜백함수 안에서 현재 프로세스가 될 요소.
index
콜백함수 안에서 현재 프로세스가 될 요소의 인덱스.
array
find 함수의 대상이 되는 배열.
thisArg
선택 항목. 콜백이 호출될 때 this로 사용될 객체.

반환 값

element가 테스트를 통과하면 배열 안의 값을 반환, 그외 undefined 를 반환.

설명

find 메서드는 callback 함수가 true를 반환 할 때까지 해당 배열의 각 요소에 대해서 callback 함수를 실행시킵니다. 만약 어떤 값에서 true를 반환했다면 find 메서드는 해당 요소의 값을 즉시 반환하고, 그렇지 않았다면 undefined를 반환합니다. callback0 부터 length - 1 까지 배열의 모든 인덱스에 대해 호출되며, 값이 지정되지 않은 요소도 포함하여 모든 인덱스에 대해 호출됩니다. 따라서, 희소 배열 (sparse arrays)의 경우에는 값이 지정된 요소만 탐색하는 다른 메소드에 비해 더 비효율적입니다.

callback은 다음의 세가지 인자를 가지고 호출됩니다: 요소의 값, 요소의 인덱스, 순회의 대상이 되는 배열. 

thisArg 파라미터가 주어진 경우에는 제공되었다면  thisArgcallback안에서 this로 사용되고, 그렇지 않은 경우 undefinedthis로 사용됩니다. 

find는 호출의 대상이 된 배열을 변경(mutate)하지 않습니다.

find가 처리할 배열 요소의 범위는 첫 callback이 호출되기 전에 먼저 결정됩니다. find메서드가 실행 된 이후에 배열에 추가된 요소들에 대해서는 callback이 호출되지 않습니다. 아직 callback이 호출되지 않았던 배열 요소가 callback에 의해서 변경된 경우, find가 해당 요소의 인덱스를 방문할 때의 값으로 callback함수에 전달될 것입니다. 즉, 삭제된 요소에도callback이 호출됩니다.

예제

속성 중 하나를 사용하여 배열에서 객체 찾기

var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

function findCherries(fruit) { 
    return fruit.name === 'cherries';
}

console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

배열에서 소수 찾기

다음 예제에서는 배열의 요소 중 소수인 요소를 찾습니다 (소수가 없는 경우에는 undefined를 반환).

function isPrime(element, index, array) {
  var start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
console.log([4, 5, 8, 12].find(isPrime)); // 5

탐색 중 삭제된 배열 요소

다음 예제에서는 삭제되어 존재하지 않는 배열의 요소에도 callback이 호출되어 해당 시점의 값이 callback에 전달되는 것을 보여줍니다.

// Declare array with no element at index 2, 3 and 4
var a = [0,1,,,,5,6];

// Shows all indexes, not just those that have been assigned values
a.find(function(value, index) {
  console.log('Visited index ' + index + ' with value ' + value); 
}); 
// Shows all indexes, including deleted 
  a.find(function(value, index) { 
  // Delete element 5 on first iteration 
  if (index == 0) { 
    console.log('Deleting a[5] with value ' + a[5]); 
    delete a[5]; 
  } 
  // Element 5 is still visited even though deleted 
  console.log('Visited index ' + index + ' with value ' + value); 
});

폴리필Polyfill

이 메서드는 ECMAScript 2015 스펙에 추가되었으며 아직 모든 JavaScript 구현에 사용되지 않았을 수 있습니다. 필요한 경우 다음 스니펫을 이용하여 Array.prototype.find를 배치할 수 있습니다.

// https://tc39.github.io/ecma262/#sec-array.prototype.find
if (!Array.prototype.find) {
  Object.defineProperty(Array.prototype, 'find', {
    value: function(predicate) {
     // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
      if (typeof predicate !== 'function') {
        throw new TypeError('predicate must be a function');
      }

      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
      var thisArg = arguments[1];

      // 5. Let k be 0.
      var k = 0;

      // 6. Repeat, while k < len
      while (k < len) {
        // a. Let Pk be ! ToString(k).
        // b. Let kValue be ? Get(O, Pk).
        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
        // d. If testResult is true, return kValue.
        var kValue = o[k];
        if (predicate.call(thisArg, kValue, k, o)) {
          return kValue;
        }
        // e. Increase k by 1.
        k++;
      }

      // 7. Return undefined.
      return undefined;
    }
  });
}

Object.defineProperty 를 지원하지 않는 JavaScript 엔진을 사용해야 할 경우, Array.prototype에 폴리필한 메서드를 열거 불가능하도록 할 수 없으므로 폴리필 하지 않는것이 좋습니다.

명세

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Array.prototype.find' in that specification.
Standard Initial definition.
ECMAScript Latest Draft (ECMA-262)
The definition of 'Array.prototype.find' in that specification.
Draft  

브라우저 호환

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support45 Yes25 No328
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes4 Yes8 ?
 

참고

문서 태그 및 공헌자

 이 페이지의 공헌자: sonjh02, meganson, yuntaek, Jaysok
 최종 변경: sonjh02,