입력값의 형변환

별초롱언니 2025. 4. 8. 21:28

prompt()함수를 이용하여 숫자를 입력받으면 문자열로 인식된다.

숫자의 산술 연산을 하려면 문자를 숫자로 변환하여 연산해야한다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 문제) 가족들의 나이를 입력받아 평균값 출력

    // count는 각 나이의 개수를 셀 때 사용한 변수
    let count = 0;
    // 나이 값을 저장할 변수들을 선언
    let dad, mom, brother, me;

    // prompt로 가족들 나이 입력받아야함 
    dad = prompt("아빠 나이를 입력하세요", "ex) 20");
    count += 1;
    mom = prompt("엄마 나이를 입력하세요", "ex) 20");
    count += 1;
    brother = prompt("오빠 나이를 입력하세요", "ex) 20");
    count += 1;
    me = prompt("내 나이를 입력하세요", "ex) 20");
    count += 1;

    // 나이를 숫자로 변환하고 평균값 계산
    let totalAge = (parseInt(dad) + parseInt(mom) + parseInt(brother) + parseInt(me)) / 4;
    // 나이를 Number로 변환하고 평균값 계산
    // let totalAge = (Number(dad) + Number(mom) + Number(brother) + Number(me)) / 4;
    // 평균값 출력
    document.write("가족들의 평균 나이는 " + totalAge + "살 입니다.");
  </script>
</body>

</html>

✿ 복습 ✿

let count = 0; 은 가족들 나이의 개수를 셀 때 사용함

let dad, mom, brother, me; 는 나이 값을 저장할 변수들을 선언

prompt()로 가족들 나이 입력받기

parseInt로 나이를 숫자로 변환하고 가족수만큼 나누기

결과는 document.write()로 확인!

★ 여기서 parseInt()와 Number()의 차이점 확인해보자 ★

parseInt() : 주로 정수로 변환할 때 사용 (문자열의 숫자 부분만 취급)

예를 들어, "20abc"는 20으로 변환

Number() : 문자열 전체를 숫자로 변환하고 변환할 수 없으면 NaN을 반환

예를 들어, "20abc"는 NaN으로 변환