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

Message

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

Type d'erreur

Avertissement.

Quel est le problème ?

L'instruction for each (variable in obj) présente à partir de JavaScript 1.6 est une instruction dépréciée et est amenée à disparaître dans un avenir proche.

Exemples

Itérer sur un objet

for each...in pouvait être utilisé pour parcourir les valeurs contenues dans un objet.

Syntaxe dépréciée

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

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

Syntaxe alternative, standard

On peut désormais utilisé l'instruction de boucle standard for...in afin d'itérer sur les clés d'un objet et de récupérer les valeurs des propriétés :

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

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

Ou alors, on peut utiliser for...of (ES2015) et Object.values (ES2017) afin d'obtenir un tableau des valeurs associées à un objet pour ensuite le parcourir :

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

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

Itérer sur un tableau

for each...in pouvait être utilisée afin de parcourir les éléments d'un tableau.

Syntaxe dépréciée

var array = [10, 20, 30];

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

Syntaxe alternative, standard

On peut obtenir le même effet avec les boucles for...of (ES2015).

var array = [10, 20, 30];

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

Parcourir un tableau qui vaille `null` ou `undefined`

for each...in ne fera rien si la valeur fournie est null ou undefined. En revanche, for...of lèvera une exception dans ces cas.

Syntaxe dépréciée

function func(array) {
  for each (var x in array) {
    console.log(x);
  }
}
func([10, 20]);        // 10
                       // 20
func(null);            // rien ne s'affiche
func(undefined);       // rien ne s'affiche

Syntaxe alternative, standard

Pour réécrire les instructions for each...in afin que les valeurs null ou undefined puissent être gérées avec for...of, il faudra rajouter une protection :

function func(array) {
  if (array) {
    for (var x of array) {
      console.log(x);
    }
  }
}
func([10, 20]);        // 10
                       // 20
func(null);            // rien ne s'affiche
func(undefined);       // rien ne s'affiche

Itérer sur les tuples clé-valeur d'un objet

Syntaxe dépréciée

On pouvait utiliser une forme syntaxique particulière, désormais dépréciée, qui combine for each...in et l'objet déprécié Iterator.

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

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

Syntaxe alternative, standard

On peut désormais utiliser la boucle for...in afin de parcourir les différentes clés d'un objet pour ensuite récupérer les valeurs associées :

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

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

Ou encore, on peut utiliser for...of (ES2015) et Object.entries (ES2017) pour récupérer un tableau contenant les clés et les valeurs d'un objet qu'on pourra ensuite parcourir :

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

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