Analyse van de afwisseling van kruisje en nulletje

In deze les wil ik je laten zien hoe je de afwisseling van kruisje en nulletje in één regel code kunt maken. Je hebt waarschijnlijk zoiets gedaan:

javascriptfunction start(cells) {
  let i = 0; // beginwaarde van de teller
  
  for (let cell of cells) {
    cell.addEventListener('click', function() {
      if (i % 2 == 0) {
        this.textContent = 'X';
      } else {
        this.textContent = '0';
      }
      
      i++; // verhoog de teller
    });
  }
}

Ik stel voor de taak korter op te lossen. Laten we een array van onze 'spelers' maken:

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

Zoals je ziet, heeft het kruisje in deze array sleutel 0, en het nulletje - sleutel 1. Het zelfde kan gezegd worden over i % 2 - voor het kruisje zal de rest 0 zijn, en voor het nulletje - 1.

Dat betekent dat je dit ding in plaats van de sleutel kunt gebruiken:

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

console.log(gamers[key]);

Of nog korter:

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

Of nog korter:

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

Laten we nu de code van onze functie start vereenvoudigen:

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