Revision 836369 of Array.prototype.fill()

<div>{{JSRef}} {{harmony}}</div>

<p>The <code><strong>fill()</strong></code> method fills all the elements of an array from a start index to an end index with a static value.</p>

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

<pre class="syntaxbox">
<code><var>arr</var>.fill(<var>value</var>[, <var>start<var> = 0[, <var>end</var> = this.length]])</var></var></code></pre>

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

<dl>
 <dt><code>value</code></dt>
 <dd>Value to fill an array.</dd>
 <dt><code>start</code></dt>
 <dd>Optional. Start index.</dd>
 <dt><code>end</code></dt>
 <dd>Optional. End index.</dd>
</dl>

<h2 id="Description">Description</h2>

<p>The elements interval to fill is [<code>start</code>, <code>end</code>).</p>

<p>The <strong><code>fill</code></strong> method takes up to three arguments <code>value</code>, <code>start</code> and <code>end</code>. The <code>start</code> and <code>end</code> arguments are optional with default values of <code>0</code> and the <code>length</code> of the <code>this</code> object.</p>

<p>If <code>start</code> is negative, it is treated as <code>length+start</code> where <code>length</code> is the length of the array. If <code>end</code> is negative, it is treated as <code>length+end</code>.</p>

<p>The <strong>fill</strong> function is intentionally generic, it does not require that its <code>this</code> value be an Array object.</p>

<p>The <strong>fill</strong> method is a mutable method, it will change <code>this</code> object itself, and return it, not just return a copy of it.</p>

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

<pre class="brush: js">
[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}
</pre>

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

<pre class="brush: js">
if (!Array.prototype.fill) {
  Array.prototype.fill = function(value) {

    // Steps 1-2.
    if (this == null) {
      throw new TypeError('this is null or not defined');
    }

    var O = Object(this);

    // Steps 3-5.
    var len = O.length &gt;&gt;&gt; 0;

    // Steps 6-7.
    var start = arguments[1];
    var relativeStart = start &gt;&gt; 0;

    // Step 8.
    var k = relativeStart &lt; 0 ?
      Math.max(len + relativeStart, 0) :
      Math.min(relativeStart, len);

    // Steps 9-10.
    var end = arguments[2];
    var relativeEnd = end === undefined ?
      len : end &gt;&gt; 0;

    // Step 11.
    var final = relativeEnd &lt; 0 ?
      Math.max(len + relativeEnd, 0) :
      Math.min(relativeEnd, len);

    // Step 12.
    while (k &lt; final) {
      O[k] = value;
      k++;
    }

    // Step 13.
    return O;
  };
}
</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('ES6', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>Initial definition.</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>{{CompatChrome("36")}} [1]</td>
   <td>{{CompatGeckoDesktop("31")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatSafari("7.1")}}</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>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile("31")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>iOS 8</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] The feature is available behind a preference. In chrome://flags, activate the entry “Enable Experimental JavaScript”.</p>

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

<ul>
 <li>{{jsxref("Array")}}</li>
 <li>{{jsxref("TypedArray.prototype.fill()")}}</li>
</ul>