path: root/files/nl/web/javascript/reference/global_objects/array/find/index.html

---
title: Array.prototype.find()
slug: Web/JavaScript/Reference/Global_Objects/Array/find
tags:
  - Array
  - ECMAScript 2015
  - ECMAScript6
  - JavaScript
  - Method
  - Prototype
  - polyfill
translation_of: Web/JavaScript/Reference/Global_Objects/Array/find
---
<div>{{JSRef}}</div>

<p>De <code><strong>find()</strong></code>-methode geeft de <strong>waarde</strong> van het <strong>eerste array element </strong>dat aan de testfunctie voldoet terug. Als geen van de elementen uit het array aan de testfunctie voldoen, dan wordt {{jsxref("undefined")}} teruggegeven.</p>

<p>Zie ook de {{jsxref("Array.findIndex", "findIndex()")}}-methode, die de <strong>index</strong> van het gevonden element in de array teruggeeft in plaats van de waarde zelf.</p>

<h2 id="Syntaxis">Syntaxis</h2>

<pre class="syntaxbox"><code><var>arr</var>.find(<var>callback</var>[, <var>thisArg</var>])</code></pre>

<h3 id="Parameters">Parameters</h3>

<dl>
 <dt><code>callback</code></dt>
 <dd>Functie om voor alle waarden in de array uit te voeren, die drie argumenten accepteert:
 <dl>
  <dt><code>element</code></dt>
  <dd>Het huidige element uit de array dat wordt verwerkt.</dd>
  <dt><code>index</code></dt>
  <dd>De index van het huidige element uit de array dat wordt verwerkt.</dd>
  <dt><code>array</code></dt>
  <dd>De array waarop <code>find</code> werd aangeroepen.</dd>
 </dl>
 </dd>
 <dt><code>thisArg</code></dt>
 <dd>Optioneel. Object om voor <code>this</code> te gebruiken tijdens het uitvoeren van <code>callback</code>.</dd>
</dl>

<h3 id="Retourwaarde">Retourwaarde</h3>

<p>Een waarde in de array als een element aan de testfunctie voldoet, anders {{jsxref("undefined")}}.</p>

<h2 id="Beschrijving">Beschrijving</h2>

<p>De <code>find</code>-methode voert de <code>callback</code>-functie eenmaal per aanwezig element in de array uit, totdat er één wordt gevonden waarvoor <code>callback</code> een waarde true teruggeeft. Als een dergelijk element wordt gevonden, geeft <code>find</code> direct de waarde van dat element terug. In andere gevallen geeft <code>find</code> {{jsxref("undefined")}} terug nadat alle elementen uit de array zijn doorlopen. <code>callback</code> wordt alleen aangeroepen voor indexen van de array waaraan een waarde is toegekend; de functie wordt niet aangeroepen voor indexen die zijn verwijderd of waaraan nooit een waarde is toegekend.</p>

<p><code>callback</code> wordt aangeroepen met drie argumenten: de waarde van het element, de index van het element en het Array-object waarover wordt geïtereerd.</p>

<p>Als een <code>thisArg</code>-parameter aan <code>find</code> wordt meegegeven, wordt deze voor elke aanroep van <code>callback</code> gebruikt als de waarde voor <code>this</code>. Als er geen waarde voor is opgegeven, wordt {{jsxref("undefined")}} gebruikt.</p>

<p><code>find</code> wijzigt de array waarop de methode wordt aangeroepen niet.</p>

<p>Het bereik van de elementen die door <code>find</code> worden verwerkt, wordt ingesteld voor de eerste aanroep van <code>callback</code>. Elementen die aan de array worden toegevoegd nadat de aanroep naar <code>find</code> begint, worden niet door <code>callback</code> bezocht. Als een bestaand, maar nog niet bezocht element van de array door <code>callback</code> wordt gewijzigd, zal de waarde van dit element die aan <code>callback</code> wordt meegegeven de waarde worden die eraan was toegekend op het moment dat <code>find</code> de index van dat element bereikte; verwijderde elementen worden niet bezocht.</p>

<h2 id="Voorbeelden">Voorbeelden</h2>

<h3 id="Een_object_in_een_array_zoeken_via_een_van_zijn_eigenschappen">Een object in een array zoeken via een van zijn eigenschappen</h3>

<pre class="brush: js">var voorraad = [
    {naam: 'appels', aantal: 2},
    {naam: 'bananen', aantal: 0},
    {naam: 'kersen', aantal: 5}
];

function zoekKersen(fruit) {
    return fruit.naam === 'kersen';
}

console.log(voorraad.find(zoekKersen)); // { naam: 'kersen', aantal: 5 }</pre>

<h3 id="Een_priemgetal_in_een_array_zoeken">Een priemgetal in een array zoeken</h3>

<p>Het volgende voorbeeld zoekt een element in de array dat een priemgetal is (of geeft {{jsxref("undefined")}} terug als er geen priemgetal is).</p>

<pre class="brush: js">function isPriem(element) {
  var start = 2;
  while (start &lt;= Math.sqrt(element)) {
    if (element % start++ &lt; 1) {
      return false;
    }
  }
  return element &gt; 1;
}

console.log([4, 6, 8, 12].find(isPriem)); // niet gedefinieerd, niet gevonden
console.log([4, 5, 8, 12].find(isPriem)); // 5
</pre>

<h2 id="Polyfill">Polyfill</h2>

<p>Deze methode is aan de ECMAScript 2015-specificatie toegevoegd en is mogelijk nog niet in alle JavaScript-implementaties beschikbaar. Met de volgende snippet kan <code>Array.prototype.find</code> echter worden ‘gepolyfilled’:</p>

<pre class="brush: js">// 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 &gt;&gt;&gt; 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 &lt; len
      while (k &lt; 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;
    }
  });
}</pre>

<h2 id="Specificaties">Specificaties</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specificatie</th>
   <th scope="col">Status</th>
   <th scope="col">Opmerking</th>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>Eerste definitie.</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browsercompatibiliteit">Browsercompatibiliteit</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Functie</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Edge</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basisondersteuning</td>
   <td>{{CompatChrome(45.0)}}</td>
   <td>{{CompatGeckoDesktop("25.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>12</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatSafari("7.1")}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Functie</th>
   <th>Android</th>
   <th>Chrome voor Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Edge</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basisondersteuning</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile("25.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>12</td>
   <td>{{CompatNo}}</td>
   <td>8.0</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Zie_ook">Zie ook</h2>

<ul>
 <li>{{jsxref("Array.prototype.findIndex()")}}</li>
 <li>{{jsxref("Array.prototype.every()")}}</li>
</ul>