[JavaScript] 자바스크립트 형변환(Type Conversion) 이해하기 - 1

[JavaScript] 자바스크립트 자료형(Data Type) 이해하기에서 
변수와 상수에 담을 수 있는 모든 값에는 종류가 있는데, 이것을 자료형, Data Type이라고 부르고

자바스크립트에서 구분하는 7가지 자료형에 대해서 살펴봤었다.

 

또한 앞부분에서

자바스크립트는 느슨한 타입 언어, 혹은  동적 타입 언어라고 해서 변수의 타입을 미리 선언할 필요가 없다. 프로그램이 처리되는 과정에서 자동으로 파악되고, 이 말은 결국 같은 변수에도 불구하고 상황에 따라 값의 타입이 바뀔 수 있다는 뜻이기도 하다.

라고도 정리했었다.

 

그렇다. 자바스크립트는 컴파일 과정 없이 실행과 동시에 해석을 하는 인터프리터 언어이다. 그런 원리에서 코드가 실행되는 과정에서 상황에 따라 값의 타입이 유연하게 바뀔 수 있는 것이다. 타입에 엄격한 프로그래밍 언어에 익숙한 사람이라면 이 유연한 형 변환이 몰상식한 현상으로 느껴질 수도 있다. 하지만, 누군가에게는 이 형 변환이 개발하는 데 있어서 편리함과 자유로움을 느끼게 해주기도 하는데, 이번에는 이 형 변환에 대해서 정리해보자.

 

자바스크립트에서 형변환은 크게 두 종류로 일어난다. 

명시적 형변환과 암시적 형 변환.

 

명시적 형 변환

먼저 명시적 형 변환부터 살펴보자.

명시적 형 변환은 말 그대로 내가 명시적으로. 즉, 의도적으로 형 변환을 하겠다는 경우이다.

명시적 형 변환은 주로 string, number, boolean 타입으로 이루어진다.
그도 그럴 것이 어떤 값을 의도적으로 형태를 변형해서 사용하겠다는 의미이기 때문에
일단 symbol은 자주 사용되지 않고, null과 undefined는 자료형이면서 동시에 값이기 때문에 필요한 경우 그냥 그 값을 할당하면 된다. 

object도 Date 객체를 숫자로 변환하는 특별한 경우가 아니라면, 그냥 순전히 값을 object로 만들면 만들었지 굳이 object로 형 변환하는 일은 없다.

따라서 이 세 종류로의 명시적 형 변환은 각각 String(), Number(), Boolean() 함수를 사용하면 된다. 

String()

console.log(String(123)); // 123
console.log(String(NaN)); // NaN
console.log(String(1 / 0)); // Infinity
console.log(String(-1 / 0)); // -Infinity
console.log(String(true)); // true
console.log(String(false)); // true
console.log(String(undefined)); // undefined
console.log(String(null)); // null
console.log(String({name: 'bigtop'})); // [object Object]

문자열이 아닌 값을 문자열로 바꾸려면 이렇게 String 함수를 활용하면 되는데, 소괄호 안에 값을 넣어주면 그 값이 문자열로 변한다.

 

문자열로의 변환은 간단해 보인다. 크게 특별한 점 없이 각 값이 따옴표를 감싸준 결과가 나타난다.

콘솔에 확인해보면 그냥 당연히 나와야 될 값이 나온 것 같지만 출력된 값의 색을 자세히 확인해보면 이 값이 문자열이라는 사실을 알 수 있다. 참고로 3,4 번째 줄에서 확인할 수 있는 것처럼 내부에 연산식을 넣을 경우 연산식의 결과를 문자열로 변환하는데, 자바스크립트에서 숫자 값을 0으로 나누면 Infinity 값이 나타난다.

 

여기서 한 가지 특별한 점은 마지막 부분인데, 객체의 경우에는 "[object Object]"가 출력되는데 우리가 바라보는 객체의 모양 그대로를 문자열로 만들고 싶은 경우에는 JSON객체의 stringify 메서드를 활용해야 한다. 

console.log(JSON.stringify({name: 'bigtop'})); // {"name": "bigtop"}

 

Number()

console.log(Number('')); // 0
console.log(Number('abc')); // NaN
console.log(Number('123')); // 123
console.log(Number('123a')); // NaN
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(Number({name: 'bigtop'})); // NaN
console.log(Number({})); // NaN

마찬가지로 숫자가 아닌 값을 숫자로 바꾸려면 이렇게 Number함수를 활용하면 된다.

상식적으로 숫자가 아닌 것 같은 값들은 모두 다 NaN 값이 출력될 것 같지만 독특하게도 NaN값이 아닌 것들이 있다.

가장 먼저 볼 수 있는 빈 문자열은 0으로 변환된다.

그리고 '123'과 같이 따옴표를 벗겨냈을 때 온전히 숫자로 사용이 가능한 문자열은 숫자 123으로 변환된다.

그러나 '123a'와 같이 숫자와 문자가 혼합된 문자열은 NaN값으로 변환된다.

또 한 가지, boolean형태의 값은 true는 1, false는 0으로 변환된다.

비슷한 의미의 null과 undefined는 여기서 차이를 보이는데, null은 0으로 변환되지만, undefined는 NaN값으로 변환된다.

마지막으로 빈 문자열이 0으로 변환되기 때문에 빈 객체 값도 0일까 싶지만 빈 객체는 그대로 NaN값으로 변환된다.

 

참고로 '123a'와 같은 숫자와 문자가 혼합된 경우에도 숫자로 시작하는 문자열인 경우 parseInt 혹은 parseFloat 함수를 사용하면 숫자 형태로 변환이 가능하다.

// 첫 문자가 숫자인 경우 parseInt는 정수형으로 해석이 가능한 만큼 숫자로 변환한다.
console.log(parseInt('123a')); // 123
console.log(parseInt('1.23a')); // 1

// 첫 문자가 숫자이거나 소숫점인 경우 parseFloat은 소수형으로 해석이 가능한 만큼 숫자로 변환한다.
console.log(parseFloat('1.23a')); // 1.23
console.log(parseFloat('.23a')); // 0.23

// 첫 문자가 문자일 경우는 NaN값으로 변환한다.
console.log(parseInt('a123')); // NaN
console.log(parseFloat('a1.23')); // NaN

 

Boolean()

console.log(Boolean("")); // false
console.log(Boolean("abc")); // true
console.log(Boolean("123")); // true
console.log(Boolean("0")); // true
console.log(Boolean(0)); // false
console.log(Boolean(123)); // true
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean({name: 'bigtop'})); // true
console.log(Boolean({})); // true

Boolean 형태는 당연히 true 혹은 false 두 가지 값으로 변형되는데, 단순하게 생각해서 뭔가 어떤 값이 있는 것 같은 뉘앙스를 가진 값들은 true, 그 반대는 false로 변환된다.

그런 의미에서 null과 undefined는 false가 될 걸 예상할 수 있는데,

독특한 부분만 짚어보면 가장 첫 번째 줄의 빈 문자열은 false로 변환된다.

어느 정도 예상할 수 있지만 숫자 0도 false로 변환된다. 

NaN값도 false로 변환된다.

 

숫자 0이 false라서 혹시나 해서 4번째 줄에 문자열 0도 넣어봤지만, 
숫자로 바뀌기 전까진 문자열 0은 true로 변환된다.

마찬가지로 마지막 줄의 빈 객체도 true로 변환된다.

 

참고로 여기서 확인된 
undefined, null, 0, NaN, ""(빈문자)를 falsy값이라고 부르고,

반대로 이 값을 제외한 모든 값들을 truthy값이라고도 부른다. 

 

암시적 형 변환은 다음에..

내용이 너무 길어져서 이번에는 여기 까지만 하고
암시적 형 변환은 다음에 더 정리하도록 하겠다.