Análisis de la alternancia entre X y O

En esta lección quiero mostrarles cómo hacer la alternancia entre X y O en una sola línea. Probablemente, hicieron algo como esto:

javascriptfunction start(cells) {
  let i = 0; // valor inicial del contador
  
  for (let cell of cells) {
    cell.addEventListener('click', function() {
      if (i % 2 == 0) {
        this.textContent = 'X';
      } else {
        this.textContent = '0';
      }
      
      i++; // incrementamos el contador
    });
  }
}

Voy a proponer una solución más corta. Hagamos un array de nuestros 'jugadores':

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

Como pueden ver, en este array la X tiene la clave 0, y el O - la clave 1. Lo mismo se puede decir sobre i % 2 - para la X el resto será 0, y para el O - 1.

Es decir, esto se puede usar en lugar de la clave:

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

console.log(gamers[key]);

O aún más corto:

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

O aún más corto:

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

Simplifiquemos ahora el código de nuestra función start:

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