Analyse de l'alternance entre croix et rond

Dans cette leçon, je veux vous montrer comment réaliser l'alternance entre croix et rond en une seule ligne. Vous avez probablement fait quelque chose comme ceci :

javascriptfunction start(cells) {
  let i = 0; // valeur initiale du compteur
  
  for (let cell of cells) {
    cell.addEventListener('click', function() {
      if (i % 2 == 0) {
        this.textContent = 'X';
      } else {
        this.textContent = '0';
      }
      
      i++; // on incrémente le compteur
    });
  }
}

Je propose de résoudre le problème plus brièvement. Créons un tableau de nos 'joueurs' :

javascriptlet gamers = ['X', 'O'];

Comme vous le voyez, dans ce tableau, la croix a la clé 0, et le rond - la clé 1. On peut dire la même chose de i % 2 - pour la croix, le reste sera 0, et pour le rond - 1.

C'est-à-dire qu'on peut utiliser cette expression à la place de la clé :

javascriptlet gamers = ['X', 'O'];
let key = i % 2;

console.log(gamers[key]);

Ou encore plus court :

javascriptlet gamers = ['X', 'O'];
console.log(gamers[i % 2]);

Ou encore plus court :

javascriptconsole.log(['X', 'O'][i % 2]);

Simplifions maintenant le code de notre fonction start :

javascriptfunction start(cells) {
  let i = 0;
  
  for (let cell of cells) {
    cell.addEventListener('click', function() {
      this.textContent = ['X', 'O'][i % 2];
      i++;
    });
  }
}