[9장] 타입 변환

📂9장 타입 변환

타입 변환

코드를 예측하기 위해 타입 변환이 어떻게 동작하는지 정확히 이해하고 사용해야함.

• 오류를 생산할 가능성을 줄일 수 있음.
• 타입변환 이란?

var x = 10; 
var str = x + ''; 
console.log(typeof str,str) // string 10 
console.log(typeof x,x) // number 10

• 기존 원시 값(x)이 직접 변경되는 것이 아님.
• 원시 값은 변경 불가능한 값이므로 변경X
• 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것임 => 타입 변환

---

암묵적 타입 변환

• 암묵적 타입 변환, 타입 강제 변환
  • 개발자의 의도와는 상관없이 표현식 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환
• 💻 자바스크립트 엔진 동작 원리
  • 에러 없이 표현식을 평가하기 위해 암묵적 타입 변환을 하여 새로운 원시 값을 생성하여 한 번 사용하고 버림.

문자열 타입으로 변환

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

단항 연산자 : 문자열 연결 연산자 (피연산자 중 하나 이상이 문자열이므로)

• 💻 자바스크립트 엔진
  • 문자열이 아닌 피연산자나 연산자를 문자열 타입으로 암묵적 타입 변환함.

숫자 타입으로 변환

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

'1' > 0 // true

산술 연산자 (-, *, / 등)나 비교 연산자(>, < 등)를 쓸땐 모든 피연산자는 숫자

• 💻 자바스크립트 엔진
  • 숫자 타입이 아닌 피연산자를 숫자타입으로 암묵적 타입 변환함.

 

단항 연산자 활용하여 간단히 숫자 타입으로 타입 변환

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

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

// null 타입
+null // 0

// undefined 타입
+undefined // NaN

// 심벌 타입
+Symbol() // TypeError

// 객체 타입
+{} // NaN
+[] // 0
+[5,15] // NaN
+(function(){}) // NaN

• 주의!!!!!
  • 빈 배열([])은 true값이지만 숫자로 암묵적 타입변환 될땐 0 으로 변환됨.
  • 객체와 빈 배열이 아닌 배열, undefined 는 변환되지 않아 NaN으로 변환됨.

불리언 타입으로 변환

• 💻 자바스크립트 엔진
  • : 불리언 타입이 아닌 값을 Truthy값 또는 Falsy값으로 구분함
  • Truthy값을 true, Falsy값을 false로 암묵적 타입 변환함.

Truthy $ Falsy

• 참같은 값

  if (true) 
  if ({}) 
  if ([]) 
  if (42) 
  if ("0") 
  if ("false") 
  if (new Date()) 
  if (-42) 
  if (12n) 
  if (3.14) 
  if (-3.14) 
  if (Infinity) 
  if (-Infinity)

• 거짓같은 값

  if (false) 
  if (null) 
  if (undefined)
  if (0) 
  if (-0)
  if (0n) 
  if (NaN) 
  if ("")

• 거짓같은 값을 활용하여 다채롭게 활용하고 로직을 간단하게 응용해야 함.

Boolean(!false) // true / false의 부정(!)은 true 
Boolean(!!false) // false / false의 부정(!)의 부정(!)은 false
Boolean('0') // true / 빈 문자열이 아닌 문자열이므로 true

---

명시적 타입 변환

• 명시적 타입 변환, 타입 캐스팅
• 개발자가 의도적으로 값의 타입을 변환

문자열 타입으로 변환

1. String 생성자 함수를 new연산자 없이 호출하는 방법 
2. // 숫자 타입 => 문자열 타입 String(1) // '1' String(NaN) // 'NaN' String(Infinity) // 'Infinity' // 불리언 타입 => 문자열 타입 String(true) // "true" String(false) // "false"
3. Object.prototype.toString 메서드 사용하는 방법

// 숫자 타입 => 문자열 타입
(1).toString()// '1'
(NaN).toString() // 'NaN'
(Infinity).toString() // 'Infinity'

// 불리언 타입 => 문자열 타입
(true).toString() // "true"
(false).toString() // "false"

3. 문자열 연결 연산자를 이용하는 방법

// 숫자 타입 => 문자열 타입
1 + ''// '1'
NaN + '' // 'NaN'
Infinity + '' // 'Infinity'

// 불리언 타입 => 문자열 타입
true + '' // "true"
false + '' // "false"

숫자 타입으로 변환

1. Number 생성자 함수를 new 연산자 없이 호출하는 방법

   // 문자열 타입 => 숫자 타입
   Number('0')  // 0
   Number('-1')  // -1
   Number('3.14') // 3.14
   
   // 불리언 타입 => 숫자 타입
   Number(true) // 1
   Number(false) // 0

2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능 => 더 안전하게 변환할 수 있음)

// 문자열 타입 => 숫자 타입
parseInt('0')  // 0
parseInt('-1')  // -1
parseInt('3.14') // 3.14

 

3. 단항 산술 연산자를 이용하는 방법

// 문자열 타입 => 숫자 타입
+'0' // 0
+'-1' // -1
+'3.14' // 3.14

// 불리언 타입 => 숫자 타입
+true // 1
+false // 0

4.  산술 연산자를 이용하는 방법

// 문자열 타입 => 숫자 타입
'0' * 1  // 0
'-1' * 1  // -1
'3.14' * 1 // 3.14

// 불리언 타입 => 숫자 타입
true * 1 // 1
false * 1  // 0

불리언 타입으로 변환

1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법

   // 문자열 타입 => 불리언 타입
   Boolean('x') // true
   Boolean('') // false
   Boolean('false') // true
   
   // 숫자 타입 => 불리언 타입
   Boolean(0) // false
   Boolean(1) // true
   Boolean(NaN) // false
   Boolean(Infinity) // true
   
   // null 타입 => 불리언 타입
   Boolean(null) // false
   
   // undefined 타입 => 불리언 타입
   Boolean(undefined) // false
   
   // 객체 타입 => 불리언 타입
   Boolean({}) // true
   Boolean([]) // true

    

2. ! 부정 논리 연산자를 두 번 사용하는 방법

// 문자열 타입 => 불리언 타입
!!'x' // true
!!'' // false
!!'false' // true

// 숫자 타입 => 불리언 타입
!!0 // false
!!1 // true
!!NaN // false
!!Infinity // true

// null 타입 => 불리언 타입
!!null // false

// undefined 타입 => 불리언 타입
!!undefined // false

// 객체 타입 => 불리언 타입
!!{} // true
!![] // true

그럼 명시적 타입 변환만 하면 되는거 아닌가?

• 상황에 따라 명시적 타입 변환보다 암묵적 타입 변환이 더 가독성이 좋을 때도 있음.

---

[모던 자바스크립트 Deep Dive, ⌜이웅모 ⌟, 위키북스, 20210103]를 읽고 정리한 글입니다.