X와 O 번갈아 표시하기 분석

이번 강의에서 저는 여러분께 단 한 줄로 X와 O를 번갈아 표시하는 방법을 보여드리고 싶습니다. 아마 여러분은 다음과 같은 코드를 작성하셨을 것입니다:

javascriptfunction start(cells) {
  let i = 0; // 초기 카운터 값
  
  for (let cell of cells) {
    cell.addEventListener('click', function() {
      if (i % 2 == 0) {
        this.textContent = 'X';
      } else {
        this.textContent = '0';
      }
      
      i++; // 카운터 증가
    });
  }
}

저는 이 작업을 더 짧게 해결할 것을 제안합니다. 우리의 '플레이어' 배열을 만들어 봅시다:

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

보시다시피, 이 배열에서 X는 키 0을 가지고, O는 키 1을 가집니다. i % 2에 대해서도 동일하게 말할 수 있습니다. - X의 나머지는 0이 될 것이고, O의 나머지는 1이 될 것입니다.

즉, 이 값을 키 대신 사용할 수 있습니다:

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

console.log(gamers[key]);

또는 더 짧게:

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

또는 더 짧게:

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

이제 우리의 start 함수 코드를 단순화해 봅시다:

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