W3cubDocs

/JavaScript

Errors: For-each-in loops are deprecated

Message

Warning: JavaScript 1.6's for-each-in loops are deprecated; consider using ES6 for-of instead

Error Type

Warning

What went wrong?

JavaScript 1.6's for each (variable in obj) statement is deprecated, and will be removed in the near future.

Examples

Object iteration

for each...in has been used to iterate over the specified object values.

Deprecated syntax

var object = { a: 10, b: 20 };

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

Alternative standard syntax

You can now use the standard for...in loop to iterate over specified object keys, and get each value inside the loop:

var object = { a: 10, b: 20 };

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

Or, using for...of (ES2015) and Object.values (ES2017), you can get an array of the specified object values and iterate over the array like this:

var object = { a: 10, b: 20 };

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

Array iteration

for each...in has been used to iterate over specified array elements.

Deprecated syntax

var array = [10, 20, 30];

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

Alternative standard syntax

This is now possible with for...of (ES2015) loops as well.

var array = [10, 20, 30];

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

Iterating over a null-able array

for each...in does nothing if the specified value is null or undefined, but for...of will throw an exception in these cases.

Deprecated syntax

function func(array) {
  for each (var x in array) {
    console.log(x);
  }
}
func([10, 20]);        // 10
                       // 20
func(null);            // prints nothing
func(undefined);       // prints nothing

Alternative standard syntax

To rewrite for each...in statements so that values can be null or undefined with for...of as well, you need to guard around for...of.

function func(array) {
  if (array) {
    for (var x of array) {
      console.log(x);
    }
  }
}
func([10, 20]);        // 10
                       // 20
func(null);            // prints nothing
func(undefined);       // prints nothing

Iterating over an object's key-value pair

Deprecated syntax

There's a deprecated idiom to iterate over the specified object's key-value pairs using for each...in and the deprecated Iterator object.

var object = { a: 10, b: 20 };

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

Alternative standard syntax

You can now use the standard for...in loop to iterate over specified object keys, and get each value inside the loop:

var object = { a: 10, b: 20 };

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

Or, using for...of (ES2015) and Object.entries (ES2017), you can get an array of the specified object values and iterate over the array like this:

var object = { a: 10, b: 20 };

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

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated