---
title: Array
slug: Web/JavaScript/Reference/Global_Objects/Array
tags:
  - Array
  - JavaScript
  - NeedsTranslation
  - TopicStub
translation_of: Web/JavaScript/Reference/Global_Objects/Array
---
<div>{{JSRef}}</div>

<p>De JavaScript <strong><code>Array</code></strong> klasse is een globaal object dat wordt gebruikt bij de constructie van arrays; <a href="https://developer.mozilla.org/en-US/docs/Glossary/High-level_programming_language">een hoog-geplaatst</a>, lijstachtig object.</p>

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

<p>Arrays zijn lijstachtige objecten waarvan het prototype methoden heeft om te iterereren, muteren en kopiëren. Noch de lengte van een Javascript-array, noch de typen elementen staan vast. Aangezien de lengte van een array op elk moment kan veranderen en gegevens kunnen worden opgeslagen op niet-aangrenzende locaties, is het niet gegarandeerd dat de gegevensplekken in de Javascript-array vast staan. Over het algemeen zijn dit handige kenmerken; maar als deze functies niet wenselijk zijn voor jouw specifieke gebruik, kun je overwegen om <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a> te gebruiken.</p>

<p>Arrays kunnen geen tekenreeksen gebruiken als elementindexen (zoals in een associatieve array), maar moeten hele getallen gebruiken. Een element instellen of ophalen met behulp van de haakjesnotatie <em>(of puntnotatie) </em>zal geen element uit de array ophalen of instellen. Maar zal proberen om een variabele uit de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Properties">object property collection</a> van de array op te halen of in te stellen. De objecteigenschappen van de array en de lijst met arrayelementen zijn namelijk gescheiden en de kopie- en mutatiebewerkingen van de array kunnen niet worden toegepast op deze benoemde eigenschappen</p>

<h3 id="Alledaagse_handelingen">Alledaagse handelingen</h3>

<p><strong>Maak een Array aan</strong></p>

<pre class="brush: js">let fruit = ["Appel", "Banaan"];

console.log(fruit.length);
// 2
</pre>

<p><strong>Toegang tot (indexeren van) een Array-item</strong></p>

<pre class="brush: js">let eerste = fruit[0];
// Appel

let laatste = fruit[fruit.length - 1];
// Banaan
</pre>

<p><strong>Itereer over een Array</strong></p>

<pre class="brush: js">fruit.forEach(function (item, index, array) {
  console.log(item, index);
});
// Appel 0
// Banaan 1
</pre>

<p><strong>Toevoegen op het eind van de Array</strong></p>

<pre class="brush: js">let nieuweLengte = fruit.push("Sinaasappel");
// ["Appel", "Banaan", "Sinaasappel"]
</pre>

<p><strong>Verwijder op het eind van de Array</strong></p>

<pre class="brush: js">let laatste = fruit.pop(); // verwijder de Sinaasappel op het eind
// ["Appel", "Banaan"];
</pre>

<p><strong>Verwijder van de eerste plaats van een array</strong></p>

<pre class="brush: js">let eerste = fruit.shift(); // verwijder appel van de eerste plaats
// ["Banaan"];
</pre>

<p><strong>Voeg toe aan de eerste plaats van een Array</strong></p>

<pre class="brush: js">let nieuweLengte = fruit.unshift("Aardbei") // voeg de aarbei toe op de eerste plaats
// ["Aardbei", "Banaan"];
</pre>

<p><strong>Zoek de index van een item in de Array</strong></p>

<pre class="brush: js">fruit.push("Mango");
// ["Aardbei", "Banaan", "Mango"]

let positie = fruit.indexOf("Banaan");
// 1
</pre>

<p><strong>Verwijder een item van de indexpositie</strong></p>

<pre class="brush: js">let verwijderItem = fruit.splice(positie, 1); // hiermee kan je een item verwijderen
// ["Aardbei", "Mango"]
</pre>

<p><strong>Kopieer een array</strong></p>

<pre class="brush: js">let Kopie = fruit.slice(); // hiermee maak je een kopie van de matrix
// ["Aardbei", "Mango"]
</pre>

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

<pre class="syntaxbox"><code>[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>]
new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]])
new Array(<var>arrayLength</var>)</code></pre>

<dl>
 <dt><code>element<em>N</em></code></dt>
 <dd>Een JavaScript-array wordt geïnitialiseerd met de gegeven elementen, behalve in het geval dat een enkel argument wordt doorgegeven aan de Array-constructor en dat argument een getal is. (Zie hieronder.) Merk op dat dit speciale geval alleen van toepassing is op JavaScript-arrays die zijn gemaakt met de Array-constructor, niet op array-literals die zijn gemaakt met de haakjesyntaxis.</dd>
 <dt><code>arrayLengte</code></dt>
 <dd>Als het enige argument dat aan de constructor Array is doorgegeven, een geheel getal tussen 0 en 232-1 (inclusief) is, geeft dit een nieuwe JavaScript-array terug waarvan de lengte is ingesteld op dat aantal. Als het argument een ander getal is, wordt er een uitzondering {{jsxref ("RangeError")}} gegenereerd.</dd>
 <dt></dt>
</dl>

<h3 id="Toegang_tot_array-elementen">Toegang tot array-elementen</h3>

<p>JavaScript-arrays zijn geïndexeerd vanaf nul: het eerste element van een array staat op index 0 en het laatste element staat op de index die gelijk is aan de waarde van de eigenschap {{jsxref ("Array.length", "length")}} van de array min 1.</p>

<pre class="brush: js">var arr = ['this is the first element', 'this is the second element'];
console.log(arr[0]);              // logs 'this is the first element'
console.log(arr[1]);              // logs 'this is the second element'
console.log(arr[arr.length - 1]); // logs 'this is the second element'
</pre>

<p>Array elements are object properties in the same way that <code>toString</code> is a property, but trying to access an element of an array as follows throws a syntax error, because the property name is not valid:</p>

<pre class="brush: js">console.log(arr.0); // a syntax error
</pre>

<p>There is nothing special about JavaScript arrays and the properties that cause this. JavaScript properties that begin with a digit cannot be referenced with dot notation; and must be accessed using bracket notation. For example, if you had an object with a property named <code>'3d'</code>, it can only be referenced using bracket notation. E.g.:</p>

<pre class="brush: js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
console.log(years.0);   // a syntax error
console.log(years[0]);  // works properly
</pre>

<pre class="brush: js">renderer.3d.setTexture(model, 'character.png');     // a syntax error
renderer['3d'].setTexture(model, 'character.png');  // works properly
</pre>

<p>Note that in the <code>3d</code> example, <code>'3d'</code> had to be quoted. It's possible to quote the JavaScript array indexes as well (e.g., <code>years['2']</code> instead of <code>years[2]</code>), although it's not necessary. The 2 in <code>years[2]</code> is coerced into a string by the JavaScript engine through an implicit <code>toString</code> conversion. It is for this reason that <code>'2'</code> and <code>'02'</code> would refer to two different slots on the <code>years</code> object and the following example could be <code>true</code>:</p>

<pre class="brush: js">console.log(years['2'] != years['02']);
</pre>

<p>Similarly, object properties which happen to be reserved words(!) can only be accessed as string literals in bracket notation(but it can be accessed by dot notation in firefox 40.0a2 at least):</p>

<pre class="brush: js">var promise = {
  'var'  : 'text',
  'array': [1, 2, 3, 4]
};

console.log(promise['array']);
</pre>

<h3 id="Relationship_between_length_and_numerical_properties">Relationship between <code>length</code> and numerical properties</h3>

<p>A JavaScript array's {{jsxref("Array.length", "length")}} property and numerical properties are connected. Several of the built-in array methods (e.g., {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}}, etc.) take into account the value of an array's {{jsxref("Array.length", "length")}} property when they're called. Other methods (e.g., {{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}}, etc.) also result in updates to an array's {{jsxref("Array.length", "length")}} property.</p>

<pre class="brush: js">var fruits = [];
fruits.push('banana', 'apple', 'peach');

console.log(fruits.length); // 3
</pre>

<p>When setting a property on a JavaScript array when the property is a valid array index and that index is outside the current bounds of the array, the engine will update the array's {{jsxref("Array.length", "length")}} property accordingly:</p>

<pre class="brush: js">fruits[5] = 'mango';
console.log(fruits[5]); // 'mango'
console.log(Object.keys(fruits));  // ['0', '1', '2', '5']
console.log(fruits.length); // 6
</pre>

<p>Increasing the {{jsxref("Array.length", "length")}}.</p>

<pre class="brush: js">fruits.length = 10;
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 10
</pre>

<p>Decreasing the {{jsxref("Array.length", "length")}} property does, however, delete elements.</p>

<pre class="brush: js">fruits.length = 2;
console.log(Object.keys(fruits)); // ['0', '1']
console.log(fruits.length); // 2
</pre>

<p>This is explained further on the {{jsxref("Array.length")}} page.</p>

<h3 id="Creating_an_array_using_the_result_of_a_match">Creating an array using the result of a match</h3>

<p>The result of a match between a regular expression and a string can create a JavaScript array. This array has properties and elements which provide information about the match. Such an array is returned by {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, and {{jsxref("String.replace")}}. To help explain these properties and elements, look at the following example and then refer to the table below:</p>

<pre class="brush: js">// Match one d followed by one or more b's followed by one d
// Remember matched b's and the following d
// Ignore case

var myRe = /d(b+)(d)/i;
var myArray = myRe.exec('cdbBdbsbz');
</pre>

<p>The properties and elements returned from this match are as follows:</p>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td class="header">Property/Element</td>
   <td class="header">Description</td>
   <td class="header">Example</td>
  </tr>
  <tr>
   <td><code>input</code></td>
   <td>A read-only property that reflects the original string against which the regular expression was matched.</td>
   <td>cdbBdbsbz</td>
  </tr>
  <tr>
   <td><code>index</code></td>
   <td>A read-only property that is the zero-based index of the match in the string.</td>
   <td>1</td>
  </tr>
  <tr>
   <td><code>[0]</code></td>
   <td>A read-only element that specifies the last matched characters.</td>
   <td>dbBd</td>
  </tr>
  <tr>
   <td><code>[1], ...[n]</code></td>
   <td>Read-only elements that specify the parenthesized substring matches, if included in the regular expression. The number of possible parenthesized substrings is unlimited.</td>
   <td>[1]: bB<br>
    [2]: d</td>
  </tr>
 </tbody>
</table>

<h2 id="Properties">Properties</h2>

<dl>
 <dt><code>Array.length</code></dt>
 <dd>The <code>Array</code> constructor's length property whose value is 1.</dd>
 <dt>{{jsxref("Array.prototype")}}</dt>
 <dd>Allows the addition of properties to all array objects.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<dl>
 <dt>{{jsxref("Array.from()")}}</dt>
 <dd>Creates a new <code>Array</code> instance from an array-like or iterable object.</dd>
 <dt>{{jsxref("Array.isArray()")}}</dt>
 <dd>Returns true if a variable is an array, if not false.</dd>
 <dt>{{jsxref("Array.observe()")}} {{non-standard_inline}}</dt>
 <dd>Asynchronously observes changes to Arrays, similar to {{jsxref("Object.observe()")}} for objects. It provides a stream of changes in order of occurrence.</dd>
 <dt>{{jsxref("Array.of()")}}</dt>
 <dd>Creates a new <code>Array</code> instance with a variable number of arguments, regardless of number or type of the arguments.</dd>
</dl>

<h2 id="Array_instances"><code>Array</code> instances</h2>

<p>All <code>Array</code> instances inherit from {{jsxref("Array.prototype")}}. The prototype object of the <code>Array</code> constructor can be modified to affect all <code>Array</code> instances.</p>

<h3 id="Properties_2">Properties</h3>

<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div>

<h3 id="Methods_2">Methods</h3>

<h4 id="Mutator_methods">Mutator methods</h4>

<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</div>

<h4 id="Accessor_methods">Accessor methods</h4>

<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</div>

<h4 id="Iteration_methods">Iteration methods</h4>

<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}</div>

<h2 id="Array_generic_methods"><code>Array</code> generic methods</h2>

<div class="warning">
<p><strong>Array generics are non-standard, deprecated and will get removed near future</strong>. Note that you can not rely on them cross-browser. However, there is a <a href="https://github.com/plusdude/array-generics">shim available on GitHub</a>.</p>
</div>

<p>Sometimes you would like to apply array methods to strings or other array-like objects (such as function {{jsxref("Functions/arguments", "arguments", "", 1)}}). By doing this, you treat a string as an array of characters (or otherwise treat a non-array as an array). For example, in order to check that every character in the variable <var>str</var> is a letter, you would write:</p>

<pre class="brush: js">function isLetter(character) {
  return character &gt;= 'a' &amp;&amp; character &lt;= 'z';
}

if (Array.prototype.every.call(str, isLetter)) {
  console.log("The string '" + str + "' contains only letters!");
}
</pre>

<p>This notation is rather wasteful and JavaScript 1.6 introduced a generic shorthand:</p>

<pre class="brush: js">if (Array.every(str, isLetter)) {
  console.log("The string '" + str + "' contains only letters!");
}
</pre>

<p>{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} are also available on {{jsxref("String")}}.</p>

<p>These are <strong>not</strong> part of ECMAScript standards (though the ES6 {{jsxref("Array.from()")}} can be used to achieve this). The following is a shim to allow its use in all browsers:</p>

<pre class="brush: js">// Assumes Array extras already present (one may use polyfills for these as well)
(function() {
  'use strict';

  var i,
    // We could also build the array of methods with the following, but the
    //   getOwnPropertyNames() method is non-shimable:
    // Object.getOwnPropertyNames(Array).filter(function(methodName) {
    //   return typeof Array[methodName] === 'function'
    // });
    methods = [
      'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift',
      'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf',
      'forEach', 'map', 'reduce', 'reduceRight', 'filter',
      'some', 'every', 'find', 'findIndex', 'entries', 'keys',
      'values', 'copyWithin', 'includes'
    ],
    methodCount = methods.length,
    assignArrayGeneric = function(methodName) {
      if (!Array[methodName]) {
        var method = Array.prototype[methodName];
        if (typeof method === 'function') {
          Array[methodName] = function() {
            return method.call.apply(method, arguments);
          };
        }
      }
    };

  for (i = 0; i &lt; methodCount; i++) {
    assignArrayGeneric(methods[i]);
  }
}());
</pre>

<h2 id="Examples">Examples</h2>

<h3 id="Creating_an_array">Creating an array</h3>

<p>The following example creates an array, <code>msgArray</code>, with a length of 0, then assigns values to <code>msgArray[0]</code> and <code>msgArray[99]</code>, changing the length of the array to 100.</p>

<pre class="brush: js">var msgArray = [];
msgArray[0] = 'Hello';
msgArray[99] = 'world';

if (msgArray.length === 100) {
  console.log('The length is 100.');
}
</pre>

<h3 id="Creating_a_two-dimensional_array">Creating a two-dimensional array</h3>

<p>The following creates a chess board as a two dimensional array of strings. The first move is made by copying the 'p' in (6,4) to (4,4). The old position (6,4) is made blank.</p>

<pre class="brush: js">var board = [
  ['R','N','B','Q','K','B','N','R'],
  ['P','P','P','P','P','P','P','P'],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  ['p','p','p','p','p','p','p','p'],
  ['r','n','b','q','k','b','n','r'] ];

console.log(board.join('\n') + '\n\n');

// Move King's Pawn forward 2
board[4][4] = board[6][4];
board[6][4] = ' ';
console.log(board.join('\n'));
</pre>

<p>Here is the output:</p>

<pre class="eval">R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , ,
 , , , , , , ,
 , , , , , , ,
 , , , , , , ,
p,p,p,p,p,p,p,p
r,n,b,q,k,b,n,r

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , ,
 , , , , , , ,
 , , , ,p, , ,
 , , , , , , ,
p,p,p,p, ,p,p,p
r,n,b,q,k,b,n,r
</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('ES1')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Initial definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>New methods added: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>New methods added: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td>New method added: {{jsxref("Array.prototype.includes()")}}</td>
  </tr>
 </tbody>
</table>

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

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

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

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li>
 <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li>
 <li><a href="/en-US/docs/JavaScript_typed_arrays">Typed Arrays</a></li>
</ul>