Revision 1113277 of Warning: JavaScript 1.6's for-each-in loops are deprecated

<div>{{jsSidebar("Errors")}}</div>

<h2 id="Message">Message</h2>

<pre class="syntaxbox">
  Warning: JavaScript 1.6's <code>for-each-in</code> loops are deprecated; consider using ES6 <code>for-of</code> instead
</pre>

<h2 id="Error_Type">Error Type</h2>

<p>Warning</p>

<h2 id="What_went_wrong">What went wrong?</h2>

<p>JavaScript 1.6's {{jsxref("Statements/for_each...in", "for each (variable in obj)")}} statement is deprecated, and will be removed near future.</p>

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

<h3>Iterating over an object</h3>

<p>{{jsxref("Statements/for_each...in", "for each...in")}} iterates over the specified object's values.</p>

<h4>Deprecated syntax</h4>

<pre class="brush: js example-bad">
var object = { a: 10, b: 20 };

for each (var x in object) {
  console.log(x);        // 10
                         // 20
}
</pre>

<h4>Alternative standard syntax</h4>

<p>You can use {{jsxref("Statements/for...in", "for...in")}} to iterate over the specified object's keys, and get each value inside loop.</p>

<pre class="brush: js example-good">
var object = { a: 10, b: 20 };

for (var key in object) {
  var x = object[key];
  console.log(x);        // 10
                         // 20
}
</pre>

<p>With ES6 and experimental feature, you can use {{jsxref("Object.values")}} to get an array with the specified object's values, and iterate over the array with {{jsxref("Statements/for...of", "for...of")}}.</p>

<pre class="brush: js example-good">
var object = { a: 10, b: 20 };

for (var x of Object.values(object)) {
  console.log(x);        // 10
                         // 20
}
</pre>

<h3>Iterating over an array</h3>

<p>{{jsxref("Statements/for_each...in", "for each...in")}} iterates over the specified array's elements.</p>

<h4>Deprecated syntax</h4>

<pre class="brush: js example-bad">
var array = [10, 20, 30]

for each (var x in array) {
  console.log(x);        // 10
                         // 20
                         // 30
}
</pre>

<h4>Alternative standard syntax</h4>

<p>With ES6 feature, you can iterate over the specified array's elements with {{jsxref("Statements/for...of", "for...of")}}.</p>

<pre class="brush: js example-good">
var array = [10, 20, 30];

for (var x of array) {
  console.log(x);        // 10
                         // 20
                         // 30
}
</pre>

<h3>Iterating over an array null or undefined</h3>

<p>{{jsxref("Statements/for_each...in", "for each...in")}} does nothing if specified value is <code>null</code> or <code>undefined</code>, but {{jsxref("Statements/for...of", "for...of")}} throws exception in those cases.</p>

<h4>Deprecated syntax</h4>

<pre class="brush: js example-bad">
function func(array) {
  for each (var x in array) {
    console.log(x);
  }
}
func([10, 20]);        // 10
                       // 20
func(null);            // print nothing
func(undefined);       // print nothing
</pre>

<h4>Alternative standard syntax</h4>

<p>To rewrite {{jsxref("Statements/for_each...in", "for each...in")}} that value can be <code>null</code> or <code>undefined</code> with {{jsxref("Statements/for...of", "for...of")}}, you need a guard around {{jsxref("Statements/for...of", "for...of")}}.</p>

<pre class="brush: js example-good">
function func(array) {
  if (array) {
    for (var x of array) {
      console.log(x);
    }
  }
}
func([10, 20]);        // 10
                       // 20
func(null);            // print nothing
func(undefined);       // print nothing
</pre>

<h3>Iterating over an object's key-value pair</h3>

<h4>Deprecated syntax</h4>

<p>There's a deprecated idiom to iterate over the specified object's key-value pairs by {{jsxref("Statements/for_each...in", "for each...in")}} and {{jsxref("Global_Objects/Iterator", "Iterator")}}.</p>

<pre class="brush: js example-bad">
var object = { a: 10, b: 20 };

for each (var [key, value] in Iterator(object)) {
  console.log(key, value);  // "a", 10
                            // "b", 20
}
</pre>

<h4>Alternative standard syntax</h4>

<p>You can use {{jsxref("Statements/for...in", "for...in")}} to iterate over the specified object's keys, and get each value inside loop.</p>

<pre class="brush: js example-good">
var object = { a: 10, b: 20 };

for (var key in object) {
  var value = object[key];
  console.log(key, value);  // "a", 10
                            // "b", 20
}
</pre>

<p>With ES6 and experimental feature, you can use {{jsxref("Object.entries")}} to get an array with the specified object's key-value pair, and iterate over the array with {{jsxref("Statements/for...of", "for...of")}}.</p>

<pre class="brush: js example-good">
var object = { a: 10, b: 20 };

for (var [key, value] of Object.entries(object)) {
  console.log(key, value);  // "a", 10
                            // "b", 20
}
</pre>

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

<ul>
 <li>{{jsxref("Statements/for...of", "for...of")}}</li>
 <li>{{jsxref("Object.values")}}</li>
 <li>{{jsxref("Object.entries")}}</li>
</ul>