(JS) 코드에서 중복 제거하기

코드에서 중복을 제거하기

if (isXturn) {
      if (event.target.textContent === '') {
        event.target.textContent = 'x';
        isXturn = false;
        playerX.classList.add('focus');
        playerO.classList.remove('focus');
      }
  } else {
      if (event.target.textContent === '') {
        event.target.textContent = 'o';
        isXturn = true;
        playerO.classList.add('focus');
        playerX.classList.remove('focus');
      }
    }

중복되는 부분을 줄여봅시다

// 이미 선택되어있는 박스인 경우 `early return` 으로 함수 종료
// 에러 케이스인 경우 함수 상단에서 함수를 끝내면 정상적인 상황의 로직까지 내려가지 않고 빠르게 로직이 진행될 수 있습니다.

if (event.target.textContent) {
  return; // return 은 함수 종료를 한다 

// 이미 선택된 박스를 클릭했을 때는 위에서 함수가 종료되어버리기 때문에
// 여기까지 내려왔다는 것은 빈 칸을 클릭했다는 이야기가 됩니다.
  
isXturn = !isXturn; // !를 사용해서 boolean값 뒤집기 (많이 사용하는 방법입니다. 이런 부분 때문에 turn = 'x' 처럼 문자열을 넣는 방식보다 boolean값을 쓰도록 추천한 거구요.)
event.target.textContent = isXturn ? 'x' : 'o'; // 삼항연산자 사용 
playerX.classList.toggle('now'); // classList.toggle을 사용하면 해당 클래스를 넣었다 뺐다 해줍니다. 모든 데서 쓸 수 있는 방법은 아니나, 지금 우리 상황에서는 한 번 클릭 시 마다 턴이 돌아가기 때문에 적절한 사용예시일 것 같아요.
playerO.classList.toggle('now');