Análise da alternância entre X e O

Nesta lição, quero mostrar a vocês como fazer a alternância entre X e O em uma única linha. Você provavelmente fez algo assim:

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

Vou propor resolver o problema de forma mais curta. Vamos fazer um array dos nossos 'jogadores':

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

Como você vê, neste array, o X tem a chave 0, e o O - a chave 1. A mesma coisa pode ser dita sobre i % 2 - para o X, o resto será 0, e para o O - 1.

Ou seja, podemos usar isso no lugar da chave:

javascriptlet jogadores = ['X', 'O'];
let chave = i % 2;

console.log(jogadores[chave]);

Ou ainda mais curto:

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

Ou ainda mais curto:

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

Vamos simplificar agora o código da nossa função start:

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