JavaScript, 숫자 타입이 아닌 값을 숫자로 바꾸는 다양한 방법 - feat. Number()/parseInt/Unary plus(+)/Unary negation(-)

 

JavaScript에서 숫자 타입이 아닌 값을 숫자로 바꿀 때는

주로 Number나 parseInt를 사용한다.

 

Number

When used as a function, Number(value) converts a string or other value to the Number type. If the value can't be converted, it returns NaN.

 

Number는 함수로 사용 시 string이나 다른 값들을 Number type으로 변환해준다.

만약에 값을 변환할 수 없을 때는 NaN을 리턴한다.

 

parseInt

The parseInt() function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).

 

parseInt는 string 타입의 인자를 파싱하여 특정 기수의 integer를 리턴한다.

 

---

// parsing:
parseInt("20px");       // 20
parseInt("hello123");   // NaN
parseInt("10100", 2);   // 20
parseInt("2e1");        // 2

// type conversion
Number("20px");       // NaN
Number("2e1");        // 20, exponential notation

 

예를 들어서 "20px"이라는 값을 parseInt에 넣으면

마지막 숫자가 아닌 글자들을 그냥 무시하고 숫자로 바꿀 수 있는 20이 number로 리턴된다.

(그렇지만 숫자가 아닌 글자로 시작하는 값은 숫자로 끝나더라도 숫자로 변환되지 않고 NaN이 리턴된다.)

 

그러나 Number에 "20px"을 넣으면 그냥 NaN이 리턴된다.

 

Number("010");         // 10
parseInt("010");       // 8, implicit octal
parseInt("010", 10);   // 10, decimal radix used

Number("0xF");   // 15
parseInt("0xF"); //15

 

Number는 8진수는 인지하지 못하지만 16진수는 인지한다.

parseInt는 8진수, 16진수 모두 인지한다.

 

 

사실 JavaScript에는 숫자가 아닌 값을 숫자로 바꿀 때

위 함수 외에도 Unary operator를 사용할 수 있는데 Unary plus(+), unary negation(-) 두 가지가 있다.

 

Unary plus(+)

+x

 

unary plus는 + 기호를 사용하며 피연산자의 앞에 위치한다.

피연산자를 평가하여 숫자가 아닌 경우에 숫자로 변환하는 역할을 한다.

 

물론 unary negation(-) 또한 숫자가 아닌 값을 숫자로 변환해주지만,

unary plus(+)가 가장 빠르고 쉽게 숫자로 바꾸는 방법이다.

 

이유는 unary plus는 다른 어떠한 연산 없이 그냥 숫자로만 바꿔주기 때문이다.

(unary negation은 숫자를 음수로 바꿔버린다.)

 

unary plus는 문자열을 숫자를 담고 있는 문자열 뿐만 아니고, true, false, null과 같은 값들도 숫자로 바꿔주며,

10진수와 16진수 포맷이 지원된다. 음수도 지원되지만 10진수로만 가능하다.

 

BigInt 값에 사용하게 되면 TypeError를 일으키니 알아두자.

만약에 파싱할 수 없는 값이 있다면 NaN이라고 평가한다.

 

const x = 1;
const y = -1;

console.log(+x); // 1
console.log(+y); // -1

 

그냥 숫자에 사용할 경우 아무런 연산을 하지 않는다.

 

+"123" // 123
+"010" // 10
+"12px" // NaN
+"hello123" // NaN

 

위와 같이 숫자로 변환해주고, 12px과 같은 값을 넣은 경우 NaN이 된다.

(12px을 숫자 12로 변환하고 싶을 때는 parseInt를 사용하자!)

 

+true  // 1
+false // 0
+null  // 0
+""  // 0
+function(val){ return val } // NaN
+1n    // throws TypeError: Cannot convert BigInt value to number

 

이렇게 숫자랑 상관없는 다양한 값들도 숫자로 변환해준다.

true는 1, 그 외에 falsy 값들은 0으로 변환해주고,

변환할 수 없는 값들은 NaN이 된다.

 

 

Unary negation (-)

-x

unary plus와 동일한 역할을 하며, 다만 얘는 이름에서 유추할 수 있듯이 피연산자를 음수로 만든다.

 

const x = 3;
const y = -x; // -3

 

숫자가 아닌 값을 변환할 때는 unary plus와 동일하게 작동된다.

(다만 조금 다른 점은 BigInt에 사용해도 Type Error가 나지 않는다.)

-"123" // -123
-"010" // -10
-"12px" // NaN
-"hello123" // NaN

-true  // -1
-false // -0
-null  // -0
-""  // -0
-function(val){ return val } // NaN
-1n    // -1n