JS DeepDive 09장 타입 변환과 단축 평가

타입 변환

• 명시적 타입 변환 (타입 캐스팅)
  = 개발자가 의도적으로 값의 타입을 변환하는 것
• 암묵적 타입 변환 (타입 강제 변환)
  = 개발자의 의도와 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환

• 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것

---

암묵적 타입 변환

문자열 타입으로 변환

1 + '2' // → "12"

• +연산자 = 피연산자 중 하나 이상이 문자열이므로 문자열 연결 연산자로 동작
• 문자열 연결 연산자의 모든 피연산자는 코드의 문맥상 모두 문자열 타입이어야 함
  → 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환
  
  

`1 + 1 = ${1 + 1} // → "1 + 1 = 2"

• 템플릿 리터럴의 표현식 삽입은 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환

숫자 타입으로 변환

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

• 산술 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환
• 변환할 수 없는 경우 표현식의 평가 결과는 NaN이 됨
  
  

'1' > 0 // -> true
'abc' > 0 // -> false

• 비교 연산자의 역할 = 불리언 값을 만드는 것
• 비교 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환
• +단항 연산자 = 피연산자가 숫자 타입이 아니면 숫자 타입의 값으로 암묵적 타입 변환
  
  

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

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

// null 타입
+null // 0

// undefined 타입
+undefined // NaN

// 심벌 타입
+Symbol() // TypeError : Cannnot convert a Symbol value to a number

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

불리언 타입으로 변환

if ("") console.log("a");
if (true) console.log("b");
if (0) console.log("c");
if ("str") console.log("d");
if (null) console.log("e");
// b d

• 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환
• 불리언 타입이 아닌 값을 Truthy값 또는 Falsy 값으로 구분
• false로 평가되는 값
  = false, undefined, null, 0, -0, NaN, ''(빈 문자열)

---

명시적 타입 변환

문자열 타입으로 변환

1. String 생성자 함수를 new 연산자 없이 호출
2. Object.prototype.toString 메서드 사용
3. 문자열 연결 연산자 이용

숫자 타입으로 변환

1. Number 생성자 함수를 new 연산자 없이 호출
2. parseInt, parseFloat 함수 사용
3. +단항 산술 연산자 이용
4. *산술 연산자 이용

불리언 타입으로 변환

1. Boolean 생성자 함수를 new 연산자 없이 호출
2. ! 부정 논리 연산자를 두번 사용

---

단축 평가

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

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

논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가됨

// || 연산자 
'Cat' || 'Dog' // 'Cat'
false || 'Dog' // 'Dog'
'Cat' || false // 'Cat'

// && 연산자 
'Cat' && 'Dog' // 'Dog'
false && 'Dog' // false
'Cat' && false // false

• 논리합(||) 연산자 = 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환
• 논리곱(&&) 연산자 = 두 번째 피연산자가 위 논리곱 연산자 표현식의 평가 결과를 결정
  
  

단축 평가 표현식	평가 결과
true || anything	true
false || anyting	anything
true && anything	anything
false && anything	false

옵셔널 체이닝 연산자

?. = 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어감

var elem = null;

// elem이 null 또는 undefined이면 undefined를 반환
// 그렇지 않으면 우항의 프로퍼티 참조를 이어감
var value = elem?.value;
console.log(value); // -> undefined

var str = '';

// 문자열의 길이(length)를 참조
// 이때 좌항 피연산자가 false로 평가되는 Falsy 값이어도
// null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어감
var length = str?.length;
console.log(length); // -> 0

null 병합 연산자

?? = 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환

// 좌항의 피연산자가 null 또는 undefined이면 우항의 피연산자를 반환
// 그렇지 않으면 좌항의 피연산자 반환
var foo = null ?? 'default string';
console.log(foo); // "default string"