JavaScript - 자바스크립트 데이터 형 변환

 

데이터 형 변환

 

 

자바스크립트에서 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환됩니다. 이러한 과정을 "암묵적 타입 변환(Implicit type conversion)"이라고 합니다.

 

전달받은 값을 원하는 타입으로 변환하는 명시적 변환도 가능합니다.

 

명시적 변환을 '명시적 타입 변환' 또는 '타입 캐스팅'이라 합니다.

 

 

명시적 변환  - 문자형으로 변환

 

 

- String()으로 변수를 감싸 변환

 

let value = true;
alert(typeof value); // boolean

value = String(value); // 변수 value엔 문자열 "true"가 저장됩니다.
alert(typeof value); // string

 

 

명시적 변환 - 숫자형으로 변환

 

 

- Number()로 변수를 감싸 변환

 

let str = "123";
alert(typeof str); // string

let num = Number(str); // 문자열 "123"이 숫자 123으로 변환됩니다.

alert(typeof num); // number

 

 

명시적 변환 - Boolean형으로 변환

 

 

- Boolean()로 변수를 감싸 변환

 

alert( Boolean(1) ); // 숫자 1(true)
alert( Boolean(0) ); // 숫자 0(false)

alert( Boolean("hello") ); // 문자열(true)
alert( Boolean("") ); // 빈 문자열(false)

 

 

암묵적 타입 변환

 

 

암묵적 타입 변환은 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 타입이 강제로 변환되는 것을 말합니다. 이를 '암묵적 타입 변환' 또는 '타입 강제 변환'이라 부릅니다.

 

암묵적 타입 변환은 개발자의 의도가 잘 드러나지 않고, 잘 이해하지 못한다면 에러를 생산할 가능성이 높습니다. 그럼에도 사용하는 이유는 암묵적 타입 변환으로 코드를 간결하게 작성할 수 있기 때문입니다. 예로, (10).toString() 보다는 10 + '' 이 훨씬 간결합니다.

 

암묵적 타입 변환이 일어나면 'string, number, boolean'과 같은 원시 타입 중 하나로 변환이 일어납니다.

 

 

문자열 타입으로 변환 (암묵적 변환)

 

 

+ 연산자는 수학 덧셈의 역할도 하나 두 개의 문자열을 연결하는 역할 또한 수행합니다. 그러므로 자바스크립트 엔진은 + 연산자의 피연산자 중 하나 이상이 문자열이라면, 모든 피연산자를 암묵적으로 문자열로 변환하여 연결시킵니다.

 

예

0 + ''            // -> '0'
-0 + ''           // -> '0'
1 + ''            // -> '1'
-1 + ''           // -> '-1'
NaN + ''          // -> 'NaN'
Infinity + ''     // -> 'Infinity'
-Infinity + ''    // -> '-Infinity'

 

 

숫자 타입으로 변환 (암묵적 변환)

 

 

산술연산자들의 역할은 숫자 값을 만들어내는 역할입니다. 그렇기 때문에 피연산자를 모두 암묵적으로 숫자 타입으로 변환합니다. 만약 피연산자를 숫자 타입으로 변환시킬 수 없는 경우 해당 연산의 결과는 NaN이 나오게 됩니다.

 

// 문자열 타입
+''           // -> 0
+'0'          // -> 0
+'1'          // -> 1
+'string'     // -> NaN

// 불리언 타입
+true         // -> 1
+false        // -> 0

// null 타입
+null         // -> 0

// undefined 타입
+undefined    // -> NaN

// 심벌 타입
+Symbol()     // -> TypeError : Cannot convert a Symbol value to a number

// 객체 타입
+{}                // -> NaN
+[]                // -> 0
+[10, 20]          // -> NaN
+(function(){})    // -> NaN

 

비교 연산자는 피연산자들의 대소관계를 비교하기 때문에 피연산자들 또한 숫자 타입이어야만 비교가 되므로 자바스크립트 엔진은 비교 연산자의 피연산자 중 숫자 타입이 아닌 피연산자를 모두 숫자로 암묵적 변환시킵니다.

 

 

불리언 타입으로 변환 (암묵적 변환)

 

 

if 문이나 for문 같은 조건식은 참, 거짓으로 평가되어야 하기 때문에 자바스크립트 엔진은 조건식의 평가가 불리언 값이 나올 수 있도록 암묵적 형변환을 가합니다.

 

if ('')    console.log('1');
if (true)  console.log('2');
if (0)     console.log('3');
if ('str') console.log('4');
if (null)  console.log('5');

// 2 4

 

이때 자바스크립트 엔진은 불리언 타입이 아닌 Truthy 값(참으로 평가되는 값) 또는 Falsy 값 거짓으로 평가되는 값)으로 구분합니다.

 

Falsy 값

• false
• undefined
• null
• 0, -0
• NaN
• '' (빈 문자열)

 

이 외의 모든 값은 Truthy값(true)로 평가합니다.

 

if (!false)        console.log(false + ' is falsy value);
if (!undefined)    console.log(false + ' is falsy value);
if (!null)         console.log(false + ' is falsy value);
if (!0)            console.log(false + ' is falsy value);
if (!NaN)          console.log(false + ' is falsy value);
if (!'')           console.log(false + ' is falsy value);


// 모든 콜솔 로그는 출력된다.

 

 

출처

https://ko.javascript.info/type-conversions