[모딥다] 09장.타입 변환과 단축 평가

📁 타입 변환

• 개발자가 의도: 명시적 타입 변환, 타입 캐스팅
• JS엔진에 의해 자동 변환: 암묵적 타입 변환, 타입 강제 변환

📁 암묵적 타입 변환

• JS엔진은 표현식 평가시 개발자의 의도와 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환.

  // 문자열 타입이어야 하는 문맥
  '10' + 2  // -> '102'
  
  // 숫자 타입이어야 하는 문맥
  5 * '10'  // -> 50
  
  // 불리언 타입이어야 하는 문맥
  !0  // -> true
  if(1) { }

• JS엔진은 가급적 에러를 발생시키지 않도록 표현식을 평가할 때 암묵적 타입 변환을 통해 표현식을 평가함.

• 암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환함.

🗒️ 문자열 타입으로 변환

• 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환을 함.

  // 숫자 타입
  0 + ''  // -> "0"
  -0 + ''  // -> "0"
  1 + ''  // -> "1"
  -1 + ''  // -> "-1"
  NaN + ''  // -> "NaN"
  Infinity + ''  // -> "Infinity"
  -Infinity + ''  // -> "-Infinity"
  
  // 불리언 타입
  true + ''  // -> "true"
  false + ''  // -> "false"
  
  // null 타입
  null + ''  // -> "null"
  
  // undefined 타입
  undefined + ''  // -> "undefined"
  
  // 심벌 타입
  (Symbol()) + ''  // -> TypeError: Cannot convert a Symbol value to a string
  
  // 객체 타입
  ({}) + ''  // -> "[object Object]"
  Math + ''  // -> "[object Math]"
  [] + ''  // -> ""
  [10, 20] + ''  // -> "10,20"
  (function(){}) + ''  // -> "function(){}"
  Array + ''  // -> "function Array() { [natvie code] }"

🗒️ 숫자 타입으로 변환

• 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환을 함.

• 피연산자를 숫자 타입으로 변환할 수 없는 경우 NaN이 됨.

  // 문자열 타입
  +''  // -> 0
  +'0'  // -> 0
  +'1'  // -> 1
  +'string'  // -> NaN
  
  // 불리언 타입
  +true  // -> 1
  +false  // -> 0
  
  // null 타입
  +null  // -> 0
  
  // undefined 타입
  +undefined  // -> NaN
  
  // 심벌 타입
  +Symbol()  // -> TypeError: Cannot convert a Symbol value to a number
  
  // 객체 타입
  +{}  // -> NaN
  +[]  // -> 0
  +[10, 20]  // -> NaN
  +(function() {})  // -> NaN

🗒️ 불리언 타입으로 변환

• JS엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환 함.
• 불리언 타입이 아닌 값을 Truthy/Falsy로 구분하여, 암묵적 타입 변환함.
• Falsy 값:
  • false
  • undefined
  • null
  • 0, -0
  • NaN
  • ''(빈문자열)

📁 명시적 타입 변환

• 표준 빌트인 생성자 함수를 new 연산자 없이 호출 하는 방법, 빌트인 메서드를 사용하는 방법, 암묵적 타입 변환을 이용하는 방법 등이 있음.

🗒️ 문자열 타입으로 변환

// 1. String 생성자 함수를 new 연산자 없이 호출
// 숫자 -> 문자열
String(1);  // -> "1"
String(NaN);  // -> "NaN"
String(Infinity);  // -> "Infinity"
// 불리언 -> 문자열
String(true);  // -> "true"
String(false);  // -> "false"

// 2. Object.prototype.toString 메서드를 사용
// 숫자 -> 문자열
(1).toString();  // -> "1"
(NaN).toString();  // -> "NaN"
(Infinity).toSring();  // -> "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('10.53');  // -> 10.53
// 불리언 -> 숫자
Number(true);  // -> 1
Number(false);  // -> 0

// 2. parseInt, parseFloat 함수를 사용(문자열만 가능)
parseInt('0');  // -> 0
parseInt('-1');  // -> -1
parseFloat('10.53');  // -> 10.53

// 3. + 단항 산술 연산자를 이용
// 문자열 -> 숫자
+'0';  // -> 0
+'-1';  // -> -1
+'10.53';  // -> 10.53
// 불리언 -> 숫자
+true;  // -> 1
+false;  // -> 0

// 4. * 산술 연산자를 이용
// 문자열 -> 숫자
'0' * 1;  // -> 0
'-1' * 1;  // -> -1
'10.53' * 1;  // -> 10.53
// 불리언 -> 숫자
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 -> 불리언
Booelan(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

📁 단축 평가

🗒️ 논리 연산자를 사용

• 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환.

• 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 결과를 생략.

• 좌항 -> 우항 순으로 평가.

• 논리곱(&&): 두 개의 피연산자가 모두 true로 평가될 때 true를 반환.

• 논리합(||): 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환.

  // 논리합(||)
  'Cat' || 'Dog'  // -> "Cat"
  false || 'Dog'  // -> "Dog"
  'Cat' || false  // -> "Cat"
  
  // 논리곱(&&)
  'Cat' && 'Dog'  // -> "Dog"
  false && 'Dog'  // -> false
  'Cat' && false  // -> false

🗒️ 옵셔널 체이닝 연산자

• ?. 키워드를 사용.
• 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환, 그렇지 않으면 우항의 프로퍼티를 참조.

🗒️ null 병합 연산자

• ?? 키워드를 사용.
• 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환.