prompt로 숫자를 입력받아서 계산을 수행할 수 있을까?

원하는 정사각형의 가로나 세로 길이를 입력받아 면적을 제는 간단한 프로그램을 만들어보자

var theNumber = prompt("숫자를 입력하세요",""); // 입력 5
console.log(theNumber*theNumber); // 25

잉? 잘 되네..?? ㅋ

자 여기서 확인해 볼 필요가 있다.

theNumber*theNumber;
25
typeof theNumber;
"string"

그렇다 String이다.

그럼 결과값으로 출력한 25는 어떤 type일까?

var total = theNumber*theNumber;
typeof total;
"number"

숫자..라네요.

결국 곱하기 연산을 하면서 두개의 문자를 숫자로 인식해주었다.

그럼 “5”*”5″ 는 어떻게 될까?

"5"*"5"
25

역시나 숫자로 계산된 25이다.

즉 String 5와 String 5를 곱셈 (*) 연산하면 Number 25가 된다.

책에서는  prompt입력값이 String이란것을 알려주기 위해 다음과 같은처리를 해주었지만

//(42p 예제)
var theNumber = Number(prompt("숫자를 입력하세요",""));
alert("입력한 숫자의 제곱은 " + (theNumber * theNumber) + "입니다.");

테스트 결과 수식에서 내부적으로 Number 형식으로 바뀌는 관계로 저자가 든 예가 무색하게 되었다.

어쨌든 저자가 말하려고 했던 의도는 prompt 입력한 숫자의 결과가 String 타입이란 것과 이 문자열 값을 Number(String)를통해 숫자로 강제 변환할 수 있다는 점인듯 하다.

아마도 저 예제를 바로잡으려면 theNumber+theNumber 로 해야했을것이다.
(그래야 Number()를 사용하지 않으면 원치않는 답인 “55” 가 나온다는것을 보여줄 수 있었을 것이다.)

최종결론:
prompt로 숫자(5) 입력받으면 // “5” : String 타입

"5" * "5"//  25: Number
"5" *  5 //  25 : Number
 5  *  5 //  25 : Number
"5" + "5"// "55": String
"5" +  5 // "55": String
 5  +  5 //  10 : Number
 
 5 * "five" // NaN
 5 + "five" // "5five" : String

• 피연산자 중 하나가 NaN이면 결과도 NaN 입니다.
• 피연산자 중 하나가 숫자가 아니라면 이면에서 Number()를 적용하고 기타 규칙을 적용해 숫자로 변환합니다.
  

  니콜라스 자카스 의 프론트엔드 개발자를 위한 자바스크립트 프로그래밍(76- 77p)