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

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

function 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++; // 카운터 증가
		});
	}
}

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

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

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

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

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

console.log(gamers[key]);

또는 더 짧게:

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

또는 더 짧게:

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

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

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

제 코드를 보지 말고 직접 설명된 수정 사항을 적용해 보세요.

현재 어떤 셀이든 무제한으로 클릭할 수 있어, 예를 들어 X를 O로 바꿀 수 있습니다. 이 문제를 해결하세요.