타입변환

정다솔·2021년 11월 29일

💥 자바스크립트의 모든 값에는 타입이 존재한다.
값들의 타입을 변환시키는 방법에는 두 가지가 있다.

명시적 타입변환과 암묵적 타입변환이다.

두 방법 모두 기존 원시 값을 직접 변경하는 것이 아닌, 기존 원시 값을 사용해 다른 타입의 새로운 원시값을 생성한다.
그리고 모두 문자열, 숫자, 불리언 타입으로의 변환이 있다.

먼저! 명시적 타입 변환부터 봐보자!

방법1. 명시적 타입 변환(타입 캐스팅)

명시적 타입변환이란?

개발자가 의도적으로 값의 타입을 변환

하는 것이다.

개발자가 의도에 따라 명시적으로 타입을 변경하는 방법으로는 자바스크립트에서 기본 제공하는 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출하거나, 자바스크립트에서 기본 제공하는 빌트인 객체의 메서드를 사용, 암묵적 타입 변환 하는 방법이 있다.

1.1 문자열 타입으로 변환

문자열 타입이 아닌 값을 문자열 타입으로 변환한다

String 생성자 함수 사용
ex) String(1); // "1" ➡ String 생성자 함수가 숫자타입 1을 문자 1로 변경해준다.
Object.prototype.toString 메서드 사용
ex) (NaN).toString(); // "NaN" ➡ 빌트인 객체의 toString 메서드가 숫자타입인 NaN을 문자열로 변환해준다.
문자열 연결 연산자 사용
ex) true + ' '; // "true" ➡ boolean 타입인 true와 문자열 ' ' 피연산자 사이에 +연산자가 오게되면, +는 산술연사자가 아닌 문자 연결 연산자로 인식되어 true는 문자열로 변환된다.

1.2 숫자 타입으로 변환

숫자 타입이 아닌 값을 숫자 타입으로 변환한다.

Number 생성자 함수 사용
ex) Number('0'); // 0 ➡ Number 생성자 함수가 문자 타입인 0을 숫자 0으로 변환해준다.
parseInt, parseFloat 함수를 사용(문자열만 숫자 타입으로 변환 가능)
ex) parseInt('-1'); // -1 ➡ parseInt란 함수가 문자 타입인 -1을 숫자 -1로 변환해준다.
+인 단항 산술 연산자 사용
ex) +'0'; // 0 ➡ 문자앞에 +단항 산술 연산자가 붙으면 문자 타입인 0을 숫자 0으로 변환해준다.
*인 산술 연산자 사용
ex) '1' * 1; // 1 ➡ 문자타입과 숫자타입의 피연산자 사이에 *산술 연산자가 오면 문자를 숫자로 변환하여 숫자 1이 나온다.

1.3 불리언 타입으로 변환

불리언 타입이 아닌 값을 불리언 타입으로 변환한다.

Boolean 생성자 함수 사용
ex) Boolean('false'); // true ➡ Boolean 생성자 함수가 문자열 false를 불리언타입인 true로 변환해준다.
부정 논리연산자(!) 두 번 사용
ex) !!NaN; // false ➡ 부정 논리연산자인 !을 두번 사용하게되면 숫자타입인 NaN을 불리언타입으로 변환해주어 false가된다.

방법2. 암묵적 타입 변환(타입 강제 변환)

자바스크립트 엔진이 표현식을 평가하는 도중 에러를 발생시키지 않도록 하기 위해 암묵적으로 타입을 변환. 즉, 개발자의 의도와는 상관 없다.

2.1 문자열 타입으로 변환

숫자, 불리언, null, undefined, 심벌, 객체 타입도 변환 가능

ex)
({}) + '' // "[object Object]" ➡ 객체와 문자사이에 +산술 연산자가 오면, +는 산술 연산자가 아닌 문자 연결 연산자가 되어 객체를 문자열로 변환한다.

2.2 숫자 타입으로 변환

피연산자를 숫자 타입으로 변환할 수 없는 경우 평가 결과는 NaN이다.

ex)
1 - '1' // 0 ➡ -산술 연산자를 하기 위해 문자 1을 숫자 1로 변환하였다.
'1' > 0 // true ➡ 비교연산자(>)는 불리언 값을 만든다. 숫자 0과 비교하기 위해 문자타입 1을 숫자 1로 변환하여 값을 비교한다.
+'0' // 0 ➡ +단항 연산자 뒤에 숫자타입이 아닌 피연산자가 오면 암묵적으로 숫자타입으로 변환해주어 평가결과가 0이다.

2.3 불리언 타입으로 변환

if문, for문과 같은 제어문의 조건식 또는 삼항 조건 연산자의 조건식은 불리언 값으로 평가되어야한다. 이런 조건식을 평가할 때 암묵적으로 불리언 값으로 변환한다.

ex) if('') console.log('1'); // ➡ if문의 조건식은 빈 문자열로 false로 평가되어 아무것도 출력되지 않았다.

🛑 알아가기 🛑
1. 자바스크립트에서는 true는 1, false는 0으로 변환된다.
2. 빈 문자열, 빈 배열, null는 숫자 타입으로 0으로 변환되고 객체, 비어있지않은 배열, undefined는 숫자타입으로 변환되지 않아 평가결과가 NaN이 나온다.
3. 자바스크립트에서 불리언 타입이 아닌 값을 false로 구분하는 값들