[JavaScript] 4. 타입 변환

타입 변환

JavaScript의 모든 값에는 타입이 존재합니다.

값의 기존 타입을 다른 타입으로 변환하는 것이 타입 변환입니다.

타입 변환에는 명시적 타입 변환과 암묵적 타입 변환 이 있습니다.

명시적 타입 변환

명시적 타입 변환은 개발자가 의도적으로 타입을 변환하는 것입니다.

이 때 타입은 문자열, 숫자, 불린 타입으로의 변환이 가능합니다.

1. 문자열 타입으로의 변환

문자열 타입으로의 변환은 아래와 같은 방법으로 가능합니다.

1. String 생성자
2. toString 메서드
3. 문자열 연결 연산자

code>

console.log(String(1));
console.log(String(true));
console.log(String(NaN));

console.log((1).toString());
console.log((true).toString());
console.log((NaN).toString());

console.log(1 + '');
console.log(true + '');
console.log(NaN + '');

result>

'1'
'true'
'NaN'

'1'
'true'
'NaN'

'1'
'true'
'NaN'

2. 숫자 타입으로의 변환

숫자 타입으로의 변환은 아래와 같은 방법으로 가능합니다.

1. Number 생성자
2. parseInt, parseFloat 함수 (문자열에만 적용 가능)
3. 단항 산술 연산자 +
4. 산술 연산자 *

code>

console.log(Number('0'));
console.log(Number('-1.25'));
console.log(Number(true));

console.log(parseInt('0'));
console.log(parseInt('-1.25'));
console.log(parseFloat('-1.25'));

console.log(+('0'));
console.log(+(-1.25));
console.log(+(true));

console.log('0' * 1);
console.log('-1.25' * 1);
console.log(true * 1);

result>

0
-1.25
1

0
-1
-1.25

0
-1.25
1

0
-1.25
1

3. 불린 타입으로의 변환

불린 타입으로의 변환은 아래와 같은 방법으로 가능합니다.

1. Boolean 생성자
2. 두 개의 부정 논리 연산자 !!

code>

console.log(Boolean('str'));
console.log(Boolean(''));

console.log(Boolean(0));
console.log(Boolean(1));
console.log(Boolean(NaN));

console.log(Boolean(null));
console.log(Boolean(undefined));

console.log(Boolean({}));
console.log(Boolean([]));

console.log(!!('str'));
console.log(!!(''));

console.log(!!(0));
console.log(!!(1));
console.log(!!(NaN));

console.log(!!(null));
console.log(!!(undefined));

console.log(!!({}));
console.log(!!([]));

result>

true
false

false
true
false

false
false

true
true

true
false

false
true
false

false
false

true
true

암묵적 타입 변환

암묵적 타입 변환은 자바스크립트 엔진이 타입을 강제로 변환하는 것입니다.

이는 자바스크립트 엔진이 표현식을 평가하기 위해 실행됩니다.

이 때도 명시적 변환과 마찬가지로 문자열, 숫자, 불린 타입으로 변환됩니다.

1. 문자열 타입으로의 변환

덧셈 연산이 이루어질 때, 피연산자 중 문자열 타입과 다른 타입이 존재할 때 변환이 일어납니다.

문자열이 아닌 타입을 문자열 타입으로 강제 변환하여 연산을 수행합니다.

code>

console.log(3 + '');
console.log(NaN + '');
console.log(true + '');
console.log([1, 2] + '');

result>

'3'
'NaN'
'true'
'1,2'

2. 숫자 타입으로의 변환

-, *, / 산술 연산이 이루어질 때, 숫자 타입이 아닌 타입을 숫자 타입으로 변환시킵니다.

만약 숫자 타입으로 변환이 불가능한 피연산자가 있는 경우, 표현식의 값은 NaN이 됩니다.

code>

console.log(1 - '1');
console.log(1 * '10');
console.log(1 / '100');
console.log(1 - 'str');

result>

0
10
0.01
NaN

또한 비교 연산자의 좌항, 우항도 표현식 값을 구하기 위해 숫자 타입으로 변환됩니다.

'1' > 0

그리고 + 단항 연산자 또한 숫자 타입이 아닌 피연산자를 숫자 타입으로 변환합니다.

code>

console.log(+'');
console.log(+'-1.5');
console.log(+'str');
console.log(+true);
console.log(+null);
console.log(+undefined);
console.log(+{});
console.log(+[]);

result>

0
-1.5
NaN
1
0
NaN
NaN
0

3. 불린 타입으로의 변환

조건문, 반복문 등에 들어가는 조건의 값은 true/false로 값을 반환해야 합니다.

이런 경우 표현식을 불린 타입으로 강제 변환합니다.

code>

if (1) console.log("1 is true");
if (0) console.log("0 is true");
if (-1) console.log("-1 is true");
if ('') console.log("'' is true");
if ('str') console.log("'str' is true");
if (undefined) console.log("undefined is true");
if (null) console.log("null is true");
if (NaN) console.log("NaN is true");
if (Infinity) console.log("Infinity is true");

result>

'1 is true'
'-1 is true'
"'str' is true"
'Infinity is true'