타입 변환

🥸 타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것입니다. 자바스크립트의 모든 값은 타입이 있으며, 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있습니다.

암묵적 타입 변환(타입 강제 변환)

개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 타입이 변환되는 것

문자열 타입으로 변환

• 이항 산술 연산자 +

// number type
0 + '' // '0'
NaN + '' // 'NaN'

// boolean type
true + '' // 'true'
false + '' // 'false'

// symbol type
(Symbol()) + '' // TypeError: Cannot convert a Symbol value to a String

// object type
({}) + '' // '[object Object]'
[10, 20] + '' // '10, 20'

• 템플릿 리터럴의 표현식 삽입

`1 + 1 = ${1 + 1}` // '1 + 1 = 2'

숫자 타입으로 변환

• 이항 산술 연산자 - * /

1 - '1' // 0
1 * '10' // 10
1 / 'one' // NaN

• 비교 연산자

'1' > 0 // true

• 단항 산술 연산자 +

// string type
+'' // 0
+'string' // NaN

// boolean type
+true // 1
+false // 0

// object type
+[] // 0
+[10, 20] // NaN

boolean 타입으로 변환

자바스크립트 엔진은 boolean 타입이 아닌 값을 truthy 값 또는 falsy 값으로 구분한다.

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

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

---

명시적 타입 변환(타입 캐스팅)

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

문자열 타입으로 변환

• String()

// number type
String(1); // '1'
String(Infinity); // 'Infinity'

// boolean type
String(true); // 'true'
string(false); // 'false'

• Object.prototype.toString()

// number type
(1).toString(); // '1'
(NaN).toString(); // 'NaN'

// boolean type
(true).toString(); // 'true'
(false).toString(); // 'false'

• 암묵적 타입 변환의 문자열 타입 변환을 의도에 따라 명시적 타입 변환하여 사용하기

숫자 타입으로 변환

• Number()

// number type
Number('0'); // 0
Number('10.53'); // 10.53

// boolean type
Number(true); // 1
Number(false); // 0

• parseInt(), parseFloat()

//string type
parseInt('0'); // 0
pareFloat('10.53'); // 10.53

• 암묵적 타입 변환의 문자열 타입 변환을 의도에 따라 명시적 타입 변환하여 사용하기

boolean 타입으로 변환

• Boolean()

// string type
Boolean(''); // fasle
Boolean('false'); // true

// number type
Boolean(0); // false
Boolean(1); // true

// object type
Boolean({}); // true
Boolean([]); // true

• !!

// string type
!!'x'; // true
!!''; // false

// number type
!!0; // false
!!1; //true
!!NaN; // false
!!Infinity; // true

🔥 명시적 타입 변환이나 암묵적 타입 변환이 기존 원시값을 직접 변경하는 것은 아니다.
-> 원시 값은 변경 불가능한 값이기 때문에 변경할 수 없다.
🔥 암묵적 타입 변환은 기존 변수 값을 재할당하여 변경하는 것이 아니다.
-> 피연산자의 값을 암묵적 타입 변환을 통해 새로운 타입의 값을 만들어 단 한 번 사용하고 버린다.
🔥 타입 변환 결과를 예측하지 못하면 오류를 생산할 가능성이 높아진다.
-> 자신이 작성한 코드에서 암묵적 타입 변환이 발생한다면 결과가 예측 가능해야 한다.

🧐 해당 글은 책 모던 자바스크립트 deep dive를 참고하여 작성하였습니다.