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

---
title: Array.prototype.map()
slug: Web/JavaScript/Reference/Global_Objects/Array/map
tags:
  - ECMAScript6
  - JavaScript
  - Méthode
  - Prototype
  - Referentie
  - polyfill
  - reeks
translation_of: Web/JavaScript/Reference/Global_Objects/Array/map
---
<div>{{JSRef}}</div>

<p>De <code><strong>map()</strong></code> methode <strong>maakt een nieuwe array aan</strong> met als inhoud het resultaat van het aanroepen van de meegegeven functie op elk van de elementen uit de originele array.</p>

<div>{{EmbedInteractiveExample("pages/js/array-map.html")}}</div>

<p class="hidden">De broncode voor dit interactieve voorbeeld is opgeslagen in een GitHub-repository. Als u wilt bijdragen aan het interactieve voorbeeldproject, kunt u <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> klonen en ons een pull-verzoek sturen. </p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox notranslate"><var>var new_array = arr</var>.map(function <var>callback(currentValue[, index[, array]]) {
    </var>// Return element for new_array<var>
}</var>[, <var>thisArg</var>])</pre>

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

<dl>
 <dt><code>callback</code></dt>
 <dd>Functie die een element voor de nieuwe Array produceert en de volgende argumenten aanvaardt:
 <dl>
  <dt></dt>
  <dt><code>currentValue</code></dt>
  <dd>Het huidige te verwerken element uit de array.</dd>
  <dt><code>index</code>{{optional_inline}}</dt>
  <dd>De index van het huidige te verwerken element in die array.</dd>
  <dt><code>array</code>{{optional_inline}}</dt>
  <dd>De array waarop <code>map</code> werd opgeroepen.</dd>
 </dl>
 </dd>
 <dt><code>thisArg</code>{{optional_inline}}</dt>
 <dd>Waarde die moet gebruikt worden voor <code>this</code> bij het uitvoeren van <code>callback</code>.</dd>
</dl>

<h3 id="Return_value">Return value</h3>

<p>Een nieuwe array waarbij elk element het resultaat is van het oproepen van de functie op het overeenkomstige element uit de originele array.</p>

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

<p><code>map</code> roept de meegegeven <code>callback</code> functie <strong>één keer op voor elk element</strong> in een array, in volgorde, en maakt een nieuwe array met de resultaten. <code>callback</code> wordt enkel opgeroepen voor indices van de array die een waarde hebben, inclusief <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>. Het wordt niet opgeroepen voor element die niet (meer) in de array zitten (indices die nog nooit gezet zijn, die werden verwijderd of die nog nooit een waarde hebben gekregen).</p>

<p>Aangezien <code>map</code> een nieuwe array aanmaakt, heeft het geen zin deze methode aan te roepen als je de geretourneerde array niet gebruikt; gebruik dan eerder <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code>forEach</code></a> of <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for-of</code></a>. Gebruik <code>map</code> niet als: A) je de geretourneerde array niet gebruikt, en/of B) de <code>callback</code> functie geen waarde retourneert.</p>

<p><code>callback</code> wordt aangeroepen met drie argumenten: de waarde van het element, de index van het element en het Array object zelf dat wordt doorlopen.</p>

<p>Als een <code>thisArg</code> parameter wordt meegegeven aan <code>map</code>, zal het gebruikt worden als <code>this</code> waarde voor de <code>callback</code> functie. Indien niet, wordt {{jsxref("undefined")}} gebruikt als zijn <code>this</code> waarde. De <code>this</code> waarde zoals <code>callback</code> ze uiteindelijk waarneemt, wordt bepaald volgens <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">de gewone regels voor het bepalen van <code>this</code> zoals waargenomen door een functie</a>.</p>

<p><code>map</code> wijzigt de array waarop het wordt aangeroepen niet (ofschoon <code>callback</code>, indien aangeroepen, dat wél kan doen).</p>

<p>Het aantal elementen dat wordt verwerkt door <code>map</code> wordt bepaald vooraleer de eerste aanroep van <code>callback</code> plaatsvindt. Elementen die worden toegevoegd aan de array nadat de aanroep van <code>map</code> is gebeurd zullen door <code>callback</code> niet worden behandeld. Als bestaande elementen van de array worden gewijzigd, dan zijn de waarden die worden doorgegeven aan <code>callback</code> de waarden op het moment dat <code>map</code> ze beschouwt. Elementen die worden verwijderd na het aanroepen van <code>map</code> en vóór ze werden beschouwd worden niet verwerkt.<br>
 <br>
 Voor de indices waarop de originele array lege plaatsen bevat, zal ook de resulterende array lege plaatsen bevatten.</p>

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

<h3 id="Een_array_van_getallen_mappen_op_een_array_van_vierkantswortels">Een array van getallen mappen op een array van vierkantswortels</h3>

<p>De volgende code neemt een array van getallen en creëert een nieuwe array die de vierkantswortels van die getallen bevat.</p>

<pre class="brush: js notranslate">var getallen = [1, 4, 9];
var vierkantsWortels = getallen.map(function(getal) {
return Math.sqrt(getal)
});
// vierkantsWortels is nu [1, 2, 3]
// getallen is nog steeds [1, 4, 9]
</pre>

<h3 id="Gebruik_van_map_om_objecten_te_herformateren_in_een_array">Gebruik van map om objecten te herformateren in een array</h3>

<p>De volgende code neemt een array van objecten en creëert een nieuwe array die de geherformatteerde objecten bevat.</p>

<pre class="brush: js notranslate">var kvArray = [{key: 1, value: 10},
               {key: 2, value: 20},
               {key: 3, value: 30}];

var reformattedArray = kvArray.map(obj =&gt;{
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
// reformattedArray is now [{1: 10}, {2: 20}, {3: 30}],

// kvArray is still:
// [{key: 1, value: 10},
//  {key: 2, value: 20},
//  {key: 3, value: 30}]
</pre>

<h3 id="Mapping_an_array_of_numbers_using_a_function_containing_an_argument">Mapping an array of numbers using a function containing an argument</h3>

<p>The following code shows how map works when a function requiring one argument is used with it. The argument will automatically be assigned from each element of the array as map loops through the original array.</p>

<pre class="brush: js notranslate">var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});

// doubles is now [2, 8, 18]
// numbers is still [1, 4, 9]
</pre>

<h3 id="Using_map_generically">Using <code>map</code> generically</h3>

<p>This example shows how to use map on a {{jsxref("String")}} to get an array of bytes in the ASCII encoding representing the character values:</p>

<pre class="brush: js notranslate">var map = Array.prototype.map;
var a = map.call('Hello World', function(x) {
  return x.charCodeAt(0);
});
// a now equals [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
</pre>

<h3 id="Using_map_generically_querySelectorAll">Using <code>map</code> generically <code>querySelectorAll</code></h3>

<p>This example shows how to iterate through a collection of objects collected by <code>querySelectorAll</code>. This is because <code>querySelectorAll</code> returns a <strong><em>NodeList</em> </strong>which is a collection of objects.<br>
 In this case we return all the selected options' values on the screen:</p>

<pre class="brush: js notranslate">var elems = document.querySelectorAll('select option:checked');
var values = Array.prototype.map.call(elems, function(obj) {
  return obj.value;
});
</pre>

<p>Easier way would be using {{jsxref("Array.from()")}} method.</p>

<h3 id="Tricky_use_case">Tricky use case</h3>

<p><a href="http://www.wirfs-brock.com/allen/posts/166">(inspired by this blog post)</a></p>

<p>It is common to use the callback with one argument (the element being traversed). Certain functions are also commonly used with one argument, even though they take additional optional arguments. These habits may lead to confusing behaviors.</p>

<pre class="brush: js notranslate" dir="rtl">// Consider:
['1', '2', '3'].map(parseInt);
// While one could expect [1, 2, 3]
// The actual result is [1, NaN, NaN]

// parseInt is often used with one argument, but takes two.
// The first is an expression and the second is the radix.
// To the callback function, Array.prototype.map passes 3 arguments:
// the element, the index, the array
// The third argument is ignored by parseInt, but not the second one,
// hence the possible confusion. See the blog post for more details
// If the link doesn't work
// here is concise example of the iteration steps:
// parseInt(string, radix) -&gt; map(parseInt(value, index))
// first iteration (index is 0): parseInt('1', 0) // results in parseInt('1', 0) -&gt; 1
// second iteration (index is 1): parseInt('2', 1) // results in parseInt('2', 1) -&gt; NaN
// third iteration (index is 2): parseInt('3', 2) // results in parseInt('3', 2) -&gt; NaN

function returnInt(element) {
  return parseInt(element, 10);
}

['1', '2', '3'].map(returnInt); // [1, 2, 3]
// Actual result is an array of numbers (as expected)

// Same as above, but using the concise arrow function syntax
['1', '2', '3'].map( str =&gt; parseInt(str) );

// A simpler way to achieve the above, while avoiding the "gotcha":
['1', '2', '3'].map(Number); // [1, 2, 3]
// but unlike `parseInt` will also return a float or (resolved) exponential notation:
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
</pre>

<p>One alternative output of the map method being called with parseInt as a parameter runs as follows:</p>

<pre class="brush: js notranslate">var xs = ['10', '10', '10'];

xs = xs.map(parseInt);

console.log(xs);
// Actual result of 10,NaN,2 may be unexpected based on the above description.</pre>

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

<p><code>map</code> was added to the ECMA-262 standard in the 5th edition; as such it may not be present in all implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>map</code> in implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming {{jsxref("Object")}}, {{jsxref("TypeError")}}, and {{jsxref("Array")}} have their original values and that <code>callback.call</code> evaluates to the original value of <code>{{jsxref("Function.prototype.call")}}</code>.</p>

<pre class="brush: js notranslate">// Production steps of ECMA-262, Edition 5, 15.4.4.19
// Reference: http://es5.github.io/#x15.4.4.19
if (!Array.prototype.map) {

  Array.prototype.map = function(callback/*, thisArg*/) {

    var T, A, k;

    if (this == null) {
      throw new TypeError('this is null or not defined');
    }

    // 1. Let O be the result of calling ToObject passing the |this|
    //    value as the argument.
    var O = Object(this);

    // 2. Let lenValue be the result of calling the Get internal
    //    method of O with the argument "length".
    // 3. Let len be ToUint32(lenValue).
    var len = O.length &gt;&gt;&gt; 0;

    // 4. If IsCallable(callback) is false, throw a TypeError exception.
    // See: http://es5.github.com/#x9.11
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }

    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
    if (arguments.length &gt; 1) {
      T = arguments[1];
    }

    // 6. Let A be a new array created as if by the expression new Array(len)
    //    where Array is the standard built-in constructor with that name and
    //    len is the value of len.
    A = new Array(len);

    // 7. Let k be 0
    k = 0;

    // 8. Repeat, while k &lt; len
    while (k &lt; len) {

      var kValue, mappedValue;

      // a. Let Pk be ToString(k).
      //   This is implicit for LHS operands of the in operator
      // b. Let kPresent be the result of calling the HasProperty internal
      //    method of O with argument Pk.
      //   This step can be combined with c
      // c. If kPresent is true, then
      if (k in O) {

        // i. Let kValue be the result of calling the Get internal
        //    method of O with argument Pk.
        kValue = O[k];

        // ii. Let mappedValue be the result of calling the Call internal
        //     method of callback with T as the this value and argument
        //     list containing kValue, k, and O.
        mappedValue = callback.call(T, kValue, k, O);

        // iii. Call the DefineOwnProperty internal method of A with arguments
        // Pk, Property Descriptor
        // { Value: mappedValue,
        //   Writable: true,
        //   Enumerable: true,
        //   Configurable: true },
        // and false.

        // In browsers that support Object.defineProperty, use the following:
        // Object.defineProperty(A, k, {
        //   value: mappedValue,
        //   writable: true,
        //   enumerable: true,
        //   configurable: true
        // });

        // For best browser support, use the following:
        A[k] = mappedValue;
      }
      // d. Increase k by 1.
      k++;
    }

    // 9. return A
    return A;
  };
}
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>Initial definition. Implemented in JavaScript 1.6.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>
<div class="hidden">De compatibiliteitstabel op deze pagina wordt gegenereerd op basis van gestructureerde gegevens. Als u wilt bijdragen aan de gegevens, kijk dan op <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> en stuur ons een pull-aanvraag.</div>

<p>{{Compat("javascript.builtins.Array.map")}}</p>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{jsxref("Array.prototype.forEach()")}}</li>
 <li>{{jsxref("Map")}} object</li>
 <li>{{jsxref("Array.from()")}}</li>
</ul>