[Javascript] parseInt() / Number()를 알아보자

parseInt() /  Number()...둘 다 정수로 만들어준다.

그럼 언제 타입을 수정해 주어야 하는걸까?

그냥 값과 값의 종류(Data Type)를 다 비교하는 === 을 사용하지 않고 == 을 사용하면 되는거 아닐까 ?

tip!

==는 Equal Operator이고,  ===는 Strict Equal Operator ex)( string vs number ) "10" == 10 // true  "10" === 10 // false

 

물론, 받은 값에 숫자를 더하고 빼고 할 일 이없으면,,,,, 그래도 안된다.

저렇게 타입이 다른 두 값을 비교하는 상황은, 의도적으로 피해줘야합니다.

결론 : 서로 다른 두 타입을 비교하는 것은 권장하지 않는다.

type 을 바꿔 줘야하는 상황의 대표적인 예를 가지고, Number() 을 사용해봅시다.

tip prompt로 넘어오는 값은, 무조껀 string 이다.

let box = prompt('숫자를 입력하세요');
console.log(box);

결과 : "입력받은 숫자 "
→ string 으로 넘어온다.

만약 입력 받은 값 + 10 을하고 싶었던 거라면

let box = prompt('숫자를 입력하세요') + 10;
console.log(box);

결과 : "입력받은 숫자10"
→ string + number = string 으로 넘어온다.

따라서, 이때 prompt()로 넘겨온 값을 number로 바꿔줘야합니다.

let box = Number(prompt('숫자를 입력하세요')) + 10;
console.log(box);

++ 추가 

var a = prompt("숫자입력해주세요");
console.log(typeof a); //string

for ( var i = 0; i < a; i ++) {
console.log(typeof i); // number 
console.log(a)
};

문제점 1.
a타입이 string 인테로 반복문을 돌리게 되면, console에 입력한 값만큼 출력되지 않고 이상한 문자가 출력된다.

문제점 2.
i 타입을 검사해보면, i의 타입은 number 다. ( var i = 0; 에서 이미 타입이 결정남 )
( var i = 0; i < a; i ++) 빨간 부분은 지금 string과 number을 비교하는 중인것이다.
→ 지양

결론

var a = Number(prompt("숫자입력해주세요"));

for ( var i = 0; i < a; i ++) {
console.log(a)
};

var a = Number(prompt("숫자입력해주세요"));

a의 타입을 number로 만들어주면 끝!!

 

Number() 와 parseInt()의 차이점

Number(str)

문자열을 숫자로 만들어줍니다.
'10' 라는 문자열을 10라는 숫자로 형변환하여 변수 num에 담아봅니다.

var num = Number('10');

하지만 아래처럼 문자열이 숫자가 아닌 경우 num에는 NaN이 저장됩니다.

var num = Number('10십');

 

parseInt(str)

기본적으로 Number(str)와 동일하게 문자열을 인자로 받으면 해당 문자열을 숫자로 바꿔줍니다.

아래의 코드는 '10' 라는 문자열을 10라는 숫자로 형변환하여 변수 num에 담는 코드입니다.

var num = parseInt('10');

문자열이 숫자가 아닌 경우가 Number()와 조금 다른데 문자열이 숫자로 시작하는 경우에는 숫자가 끝날때 까지만 형변환을 하여 num에 저장됩니다. 시작이 숫자가 아니면 Number()와 마찬가지로 num에 NaN이 저장됩니다.

var num = parseInt('1000원'); // num에 1000이 저장
var num = parseInt('가격:1000원'); // num에 NaN이 저장

 

참고

dororongju.tistory.com/71

[자바스크립트] 형변환 Number() 와 parseInt() 의 차이

www.youtube.com/watch?v=L1ZI6ZquZMc