switch, forEach(), split()

자기소개 페이지 작업 하면서 공부한 것들!!🤣

1. switch

function setLevel() {
    const $dropdownContent = document.querySelector(".dropdown-content");
    $dropdownContent.addEventListener("click", (ev) => {
      switch (ev.target.id) {
        case "L":
          $app.setAttribute("level", "L");
          mineCount = 10;
          setRow = 9;
          setColumn = 9;
          break;
        case "M":
          $app.setAttribute("level", "M");
          mineCount = 40;
          setRow = 16;
          setColumn = 16;
          break;
        case "H":
          $app.setAttribute("level", "H");
          mineCount = 99;
          setRow = 16;
          setColumn = 30;
          break;
      }
      GameRestart();
    });
  }

• 지뢰찾기 게임에서 난이도 선택하는 부분에서 swich문을 사용했다.
  초급, 중급, 고급 각각을 클릭하면 ev.target.id값을 비교해 보드의 크기를 결정 한다.

아래의 코드는 해당 칸을 클릭하면 그 칸의 id값을 얻어와 row와 column을 추출해내는 코드이다.

    const $block = document.querySelectorAll(".block");
    $block.forEach((block) => {
      // 좌클릭 이벤트
      block.addEventListener("click", function () {
        const id = block.id;
        const idArr = id.split("-");
        const row = idArr[0];
        const column = idArr[1];
        if (randomArr[row][column] === "m") {
          block.classList.add("ismine");
          mineCount--;
          $mineCounter.innerHTML = mineCount;
          gameOver(false);
        }
        viewBlock(row, column);
      });
    });

2. forEach()

주어진 함수를 배열 요소 각각에 대해 실행한다.

• const $block = document.querySelectorAll(".block");
$block은 block이라는 클래스를 가진 모든 Element를 갖고 있는 배열이다.(forEach를 사용 하기 위해 일부러 $block을 배열로 만들어 보았다.)
• 여기선 $block이 가지고 있는 모든 block요소에 클릭 이벤트를 주기 위해 사용했다.

3. split()

객체를 지정한 구분자를 이용하여 여러개의 문자열로 나눈다.

const id = block.id;
const idArr = id.split("-");
const row = idArr[0];
const column = idArr[1];

• 각 블록을 생성할 때 나중에 각 칸을 구분하기 위해 id값을 row-column 형태로 추가해 주었다. (ex. 1-1, 15-17)

id = "15-17"
idArr = ["15","17"]
row = "15"
column = "17"