[JS] 9장. 타입 변환과 단축 평가

오늘의 질문
?. 은 어떨 때 사용하는 걸까? : 옵셔널 체이닝

모던자바스크립트 DeepDive 9장 - 타입 변환과 단축 평가

9.1 타입 변환이란?

명시적 타입 변환(explicit coercion) / 타입 캐스팅(type casting)
개발자의 의도에 따라 다른 타입으로 변환
ex) toString()등을 사용하여 직접적으로 타입 변환

암묵적 타입 변환(implicit coercion) / 타입 강제 변환 (type coercion)
개발자의 의도가 아닌 자바스크립트 엔진에 의해 암묵적을 타입 변환

공통점 ! 기존 원시값을 직접 변경하는 것이 아님 !

var x = 10;

(10).toString() 
10 + ''	

=> 둘 다 string으로 변환

9.2 암묵적 타입 변환

:데이터 타입을 강제 변환

9.2.1 문자열 타입으로 변환

문자열 타입이 아닌 값을 문자열 타입으로 변환하는 경우

//숫자  타입
0 + ''
1 + ''
NaN + ''
Infinity + ''

// 불리언 타입
true + ''
false + ''

// null 타입
null + ''

// undefined
undefined + ''

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

// 객체 타입
({}) + ''
Math + ''
[] + ''
[10, 20] + ''

9.2.2. 숫자 타입으로 변환

//숫자  타입
''
+'0'

// 불리언 타입
+true 
+false 

// null 타입
+null

// undefined
+undefined

// 심벌 타입 
+Symbol()

// 객체 타입
+{}	// NaN
+[]
+[10, 20] //NaN

9.2.3 불리언 타입으로 변환

자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가 되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분

• false로 평가 되는 Falsy값
  false
  undefined
  null
  0, -0
  NaN
  ''

• true로 평가 되는 Truthy 값 : Falsy 값 외의 모든 값

9.3 명시적 타입 변환

9.3.1 문자열 타입으로 변환

• String 생성자 함수를 new 연산자 없이 호출 : String(1)
• Object.prototype.toString 메소드 사용 : (1).toString()
• 문자열 연결 연산자 이용 : 1 + ''

9.3.2. 숫자 타입으로 변환

• Number 생성자 함수 사용 : Number('0')
• parseInt, parseFloat 함수 사용 : parseInt('0'), parseFloat('0.1')
• (+) 단항 산술 연산자 이용 : +'0'
• ( ) 산술 연산자 이용 '0' 1

9.3.3 불리언 타입으로 변환

• Boolean 사용

9.4 단축 평가

9.4.1. 논리 연산자를 사용한 단축 평가

if 문을 대체 가능

• || 논리합 연산자
  'Cat' || 'Dog' //-> 'Cat'
• && 논리곱 연산자
  'Cat' && 'Dog' // -> 'Dog'

변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티 참조

const elem = null;
const value= elem && elem.value

함수 매개변수에 기본값 설정

function getStringLength(str=''){
	return str.length;
   }
 
getStringLength() // -> 0
getStringLength('hi') // -> 2

9.4.2 옵셔널 체이닝 연산자 ?.

?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefiend 반환,
그게 아니면 우항의 프로퍼티 참조를 이어감

const elem = null;

const value = elem?.value;
console.log(value) // undefiend

9.4.3 null 병합 연산자 ??

변수에 기본값을 설정할 때, 유용

const foo = null ?? 'default string';
console.log(foo); // 'default string'