✍🏻 계산기 주석

function calculate(n1, operator, n2) {
  // 3개의 인자를 받는다.
  let result = 0; // 각 조건의 맞는 계산 값을 받기 위한 변수
  if (연산자 === "+") {
    // 만약 연산자가 "+" 이면
    result = Number(n1) + Number(n2); // result에 n1 + n1의 값을 재할당(매개변수는 스트링이기때문에 Number나 praseFloat를 이용해 정수를 만든다)
  }
  if (연산자 === "-") {
    // 만약 연산자가 "-" 이면
    result = Number(n1) - Number(n2); // result에 n1 - n1의 값을 재할당
  }
  if (연산자 === "*") {
    // 만약 연산자 "*" 이면
    result = Number(n1) * Number(n2); // result에 n1 * n2의 값을 재할당
  }
  if (연산자 === "/") {
    // 만약 연산자가 "/" 이면
    result = Number(n1) / Number(n2); // result에 n1 / n2의 값을 재할당
  }
  return String(result); // 값을 가진 result를 스트링타입으로 리턴(계산 과정에서 넘버 타입으로 변환했기떄문)
}
buttons.addEventListener("click", function (event) {
  // 버튼 class를 모두 담은 변수에 이벤트를 부여했다.
  // 첫번째 인자는 이벤트 타입('click')이고,두번째 인자인 함수를 받는다.
  const target = event.target; // 인자로 받은 event객체의 target속성(클릭한 요소를 반환)을 target이라는 변수에 할당.
  const action = target.classList[0]; // target의 calssList[0] = (DOMTokenList는 0번째)를 action이라는 변수에 할당.
  const buttonContent = target.textContent; // target변수에 textContent를 buttonContent에 할당
  if (target.matches("button")) {
    // 만약 targeting한 선택자를 matchs()를 이용해 "button"인지 확인
    // matchs() 요소와 선택자가 일치하는지 판별해주는 메서드
    if (action === "number") {
      // 만약 클릭한 버튼의 class가 "number"이면
      if (첫번째 피연산자.textContent !== "0") {
        // 첫번째 피연산자의 textContent가 "0"이 아니라면
        두번째 피연산자.textContent = buttonContent; // 두번째 피연산자의 tectContent에 buttonContent의 값을 할당
      } else {
        // 위의 조건이 아니면
        첫번째 피연산자.textContent = buttonContent; // buttonContent의 값을 첫번째 피연산자의 textContent에 할당
      }
    }
    if (action === "operator") {
      // 만약 클릭한 버튼의 classa가 "operator"이면
      연산자.textContent = buttonContent; // 연산자.textContent에 buttonContent의 값을 할당.
    }
    if (action === "decimal") {
      // console.log('소수점 버튼');
    }
    // 초기화 화면에 0 + 0 = 0으로 나와야한다.
    if (action === "clear") {
      // 만약 클릭한 버튼의 class가 "clear"이면
      첫번째 피연산자.textContent = "0"; // 첫번째 피연산자.textContent에 "0"를 할당
      연산자.textContent = "+"; // 연산자.textContent에 "+"를 할당
      두번째 피연산자.textContent = "0"; // 두번째 피연산자.textContent에 "0"을 할당
      계산값.textContent = "0"; // 계산값.textContent에 "0"을 할당\
    }
    if (action === "calculate") {
      // 만약 클릭한 버튼의 class가 calculate이면
      계산값.textContent = calculate(
        첫번째 피연산자.textContent,
        연산자.textContent,
        두번째 피연산자.textContent
      );
      // 계산값.textContent에 calculate 함수 호출 결과를 할당.
    }
  }
});

📝 변수명은 바꾸었다! 오늘 matchs() 메서드와 action = target.classList[0]에서 왜 첫번째 인덱스를 가져오는지 이해가 되지 않았는데, 찾아보니 이해가 되었다. 다행쓰.. 내일은 어드벤스드와 리눅스를 더 정리해볼 생각이다.