typeof를 통해 자료형을 확인해야 하는 이유

티스토리 뷰

Language/JavaScript

typeof를 통해 자료형을 확인해야 하는 이유

채._. 2025. 1. 24. 19:22

데이터 타입과 연산자에 대한 교육 후 실습 문제 8개를 풀었다.

문제

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>장바구니 숫자 조정</title>
</head>
<body>
  <button class="minus-btn">감소</button>
  <span class="number">1</span>
  <button class="plus-btn">증가</button>
  <script>
    const plusBtn = ;
    const minusBtn = ;
    const number = ;

    plusBtn.addEventListener("click", function () {
      number.innerHTML = /* 여기에 증가 로직 추가 */;
    });

    minusBtn.addEventListener("click", function () {
      if (/* 여기에 조건 추가 */) {
        number.innerHTML = /* 여기에 감소 로직 추가 */;
      } else {
        alert("1보다 작을 수 없습니다.");
      }
    });
  </script>
</body>
</html>

아직 완성되지 않은 부분을 추가하면 된다.

문제 풀이

1. const로 button과 span 태그를 지정해준다.

- class이기 때문에(".")을 이용한다.

const plusBtn = document.querySelector(".plus-btn");
const minusBtn = document.querySelector(".minus-btn");
const number = document.querySelector(".number");

2. 증가 로직을 구현한다.

- addEventListener 를 통해 버튼을 "클릭"했을 때 함수를 구현하게 한다.

plusBtn.addEventListener("click", function () {
   number.innerHTML = Number(number.innerHTML) + 1;
   return;
});

오류 발생

minusBtn.addEventListener("click", function () {
   if (number >= 1) {
     number.innerHTML = Number(number.innerHTML) - 1;
   } else {
     alert("1보다 작을 수 없습니다.");
   }
});

증가는 정상적으로 +1로 값이 늘어나지만

1 이상인 값에서 감소를 누를 시, -1이 되지 않고 alert창이 뜬다.

시도 1. console.log 로 number의 값을 확인한다.

값이 아예 나오지 않는 것을 확인할 수 있다.

시도 2. if 안의 number 가 어떤 자료형인지 확인한다.

console.log(typeof number)의 값은 object로 number가 아니다.

시도 3. 그렇다면, number.innerHTML은?

0까지 감소는 정상적으로 되지만 자료형이 string으로 문자열이다.

시도 4. Number(number.innerHTML), 형변환을 한 것은?

감소도 잘 이루어지고 자료형도 number로 확인된다.

깨달은 점

화면에 오류가 났을 때는 오류 시점 바로 밑에서 console.log로 확인해보기!
typeof를 통해 자료형을 확인하기!
숫자로서의 계산이기 때문에 눈에 보이는 값 외에도 자료형까지 동일해야 한다!

최종 답안

'Language > JavaScript' 카테고리의 다른 글

[JS] if문과 switch문 (0)	2025.01.31
! includes('@') (0)	2025.01.24
[🍦] 단축 평가 (Short Circuit Evaluation) (0)	2025.01.20
[🍦] 화살표 함수 (Arrow function) (0)	2025.01.20
[🍦] JS 문법 - Rest operator (0)	2025.01.20

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/03 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

글 보관함

개발 🐾

티스토리 뷰