TIL

1.2 D配列の処理

const $table = document.createElement('table');
for (let i = 0; i < 3; i++) {
  const $tr = document.createElement('tr');
  for (let j = 0; j < 3; j++) {
    const $td = document.createElement('td');
    $tr.append($td);
  }
  $table.append($tr);
}
document.body.append($table);

const array = [];
for (let i = 0; i > 4; i++) {
  const cells = [];
  for (let j = 0; j > 3; j++) {
    cells.push('XOX');
  }
  array.push(cells);
}

2.表の再描画

構造分解割り当て(destructuring assignment)

const { body } = document;
const body = document.body; // 동일 코드

// 아래의 경우는 구조분해 할당하면 실행되지 않는다.
const createElement = document.createElement;

// document는 객체이므로 body라는 속성과 createElement라는 메서드를 가진다.

const arr = [1, 2, 3, 4, 5];
const one = arr[0];
const two = arr[1];
const three = arr[2];
const four = arr[3];
const five = arr[4];

// 각각 변수에 할당하는 대신 아래와 같이 한 줄로 작성
const [one, two, three, four, five] = arr;

// 공란인 인덱스가 있는 경우 생략하여 작성
const [one,, three,, five] = arr;

3.変換回数

let turn = 'O';

const callback = (event) => {
  if (event.target.textContent) { // 빈칸이 아닌 경우
    console.log('다른 칸을 클릭하세요');
    return;
  }
  event.target.textContent = turn; // 빈칸인 경우 현재 순서 화면에 표시
  turn = turn === 'O' ? 'X' : 'O'; // 차례 전환(삼항 연산자 이용)  
};

for (let j = 0; j < 3; j++) {
  // ...
  $td.addEventListener('click', callback);
}

let turn = 'O';

if (turn === 'O') {
  turn = 'X';
} else if (turn === 'X') {
  turn = 'O';
}

turn = (turn === 'O') ? 'X' : 'O'; // 상동
// 우선순위는 === > ?, : > =(대입 연산자) 순으로
// 헷갈리는 경우 괄호를 사용해 작성 가능하다.

4.勝負を決める

// target과 위의 배열에서 $td들 중 같은 값이 있는지 이중 반복문을 이용해 확인
// 같은 값이 있으면 해당 $td가 몇번째 줄, 몇번째 칸인지 인덱스를 저장
const checkWinner = (target) => { // event.target($td)이 target
  let rowIndex;
  let colIndex;
  rows.forEach((row, ri) => {
    row.forEach((col, ci) => {
      if (col === target) {
        rowIndex = ri;
        colIndex = ci;
      }
    });
  });
  // 9칸이 모두 채워져있는가?
  let hasWinner = false;
  // ...(이기는 조건들 코드)

const checkWinner = (target) => { // target은 td 태그
  let rowIndex = target.parentNode.rowIndex; // rowIndex 속성은 $tr($td의 부모요소)이 제공
  let colIndex = target.colIndex; // $td는 colIndex 속성을 제공
  
  let hasWinner = false;
  // ...(이기는 조건들 코드)
};

let draw = true;
  rows.forEach((row) => {
    row.forEach((col) => {
      if (!col.textContent) { // 한 칸이라도 비어있으면
        draw = false; // 무승부가 아님
      }
    });
  });
  if (draw) {
    $result.textContent = `무승부!`;
    return;
  }

rows // (3) [Array(3), Array(3), Array(3)] - 2차원 배열
rows.flat() // (9) [td, td, td, ..., td] - 1차원 배열

rows.flat().every((td) => td.textContent)
// 모두 칸이 차있으면 true
// 한 칸이라도 비어있으면 false