본문 바로가기

TIL

<자바스크립트 Javascript> 타입 변환

- 타입 변환

자바스크립트에도 다른 언어들과 마찬가지로 데이터 타입이 존재한다. 그리고 이 데이터 타입을 변경하는 방법으로는 크게 두 가지가 있다.

 

 

1) 명시적 타입 변환(explicit coercion)

타입 캐스팅(type casting)이라고도 한다. 개발자의 의도에 따라 타입을 변경하는 것이다. 방법으로는 표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출하거나, 빌트인 메서드 사용, 그리고 암묵적 타입 변환을 이용하는 것이 있다. 단, 타입 변환 시 타입을 변환한 변수의 '값'의 타입이 변하는 것은 아니다.

var x = 10;

var str = x.toString();
console.log(typeof str, str)

// 결과
// string 10

 

- 명시적 타입 변환의 예

 

1. 문자열 타입으로 변환

문자열 타입으로 변환하는 방법은 3가지가 있다.

: String 생성자 함수를 new 연산자 없이 호출, Object.prototype.toString 메서드 사용, 문자열 연결 연산자 이용

 

2. 숫자열 타입으로 변환

숫자열 타입으로 변환하는 방법은 4가지가 있다.

: Number 생성자 함수를 new 연산자 없이 호출, parseInt와 parseFloat 함수를 사용(문자열만 숫자 타입으로 변환 가능함), + 단항 산술 연산자 이용, * 산술 연산자 이용

 

3. 불리언 타입으로 변환

불리언 타입으로 변환하는 방법은 2가지가 있다.

: Boolean 생성자 함수를 new 연산자 없이 호출, ! 부정 논리 연산자를 두 번 사용

 

 

2) 암묵적 타입 변환(implicit coercion)

타입 강제 변환(type coercion)이라고도 한다. 명시적 타입 변환과 달리, 의도에 관계없이 타입이 자동으로 변경된다. 암묵적 타입 변환이 일어나는 경우의 예로 산술 연산자 중, + 연산자가 피연산자 중 하나 이상이 문자열일 때 문자열 연결 연산자로 동작하는 것이 있다. 단, 타입을 변환한 변수의 '값'의 타입이 변하는 것은 아니다.

var x = 10;

var str = x + ''; // ''가 문자열이고 식에서 피연산자 중 1개 이상이 문자열이므로 + 연산자는 문자열 연결 연산자로 동작
console.log(typeof str, str);

// 결과
// string 10

 

- 암묵적 타입 변환의 예

 

1. 문자열 타입으로 변환

피연산자 중 하나 이상이 문자열일 때 + 연산자는 문자열 연결 연산자로 동작한다. 문자열 연결 연산자의 목적은 문자열 값을 만드는 것이다.

 

2. 숫자 타입으로 변환

산술 연산자 중 + 연산자를 제외(+ 연산자는 단항 연산자로서 동작할 때는 숫자 타입으로 변환함)한 -, *, / 연산자는 산술 연산자의 목적이 숫자 값을 만드는 것이므로 암묵적 타입 변환이 일어난다. 피연산자 중 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다. 타입 변환이 불가능한 경우 결과값으로 NaN을 반환한다.

 

비교 연산자의 목적은 불리언 값을 만드는 것이다. 비교 연산자는 불리언 값을 만들기 위해 두 피연산자를 비교해야 하는데, 이 비교는 크기를 비교하는 것이므로 역시 피연산자 중 숫자 타입이 아닌 피연산자가 있다면 비교를 위해 이를 숫자 타입으로 암묵적 타입 변환한다.

 

객체와 빈 배열이 아닌 배열, undefined는 변환이 불가하므로 NaN을 반환한다.

 

3. 불리언 타입으로 변환

제어문(if 문, for 문) 또는 삼항 조건 연산자의 조건식에서 일어난다. 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분하여 전자는 true로, 후자는 false로 암묵적 타입 변환한다.

 

자바스크립트 엔진에서는 Falsy 값으로 구분되는 아래의 값을 제외하고는 모두 Truthy 값으로 구분된다.

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

 

 

3) 주의점

언급한 것처럼 명시적 타입 변환과 암묵적 타입 변환 모두 변수 자체의 값의 타입이 변하는 것은 아니다. 특히, 암묵적 타입 변환에서는 앞서 든 예시에서 타입 변환이 일어나는 것이 표현식을 평가하기 위함이 오로지 목적이므로, 해당 목적을 달성하고 나면 단 한 번 사용 후 새로운 타입의 값을 버리는 것이 특징이다.

 

명시적 타입 변환과 암묵적 타입 변환의 특징을 잘 이해하고 사용하여 코드를 예측 가능할 수 있어야 한다.

 

 

 

 

 

참고 : 도서 <모던 자바스크립트 Deep Dive>