모던 자바스크립트 Deep Dive - 타입 변환과 단축 평가

keyword : [ 타입 변환, 암묵적 타입 변환 , 명시적 타입 변환 , 옵셔널 체이닝 , null 병합 연산자 , 단축 평가]

---

타입 변환

---

개발자 의도적 타입 변환 = 명시적 타입 변환 = 타입 캐스팅

elt x = 10;

let str = x.toString();

console.log(typeof str , str);  // string 10

console.log(typeof x , x); // number 10

 

개발자 의도와 상관 없는 타입 변환 = 암묵적 타입 변환 = 타입 강제 변환

let x = 10;

let str = x + '';

console.log(typeof str , str) // string 10

console.log(typeof x , x) // number 10

 

타입 변환은 기존 원시 값을 직접 변경하는 것이 아니다.

 

---

암묵적 타입 변환

---

 

// 문자열 타입 변환
1 + '2'  // '12'

// 숫자 타입 변환
1 - '1' // 0
1 * '10' // 10
1 / 'one'  // NaN

+'' // 0
+'0' // 0
+true // 1
+false // 0

// 불리언 타입 변환
if('')  // false
if(0)  // false
if('str')  // true

 

---

명시적 타입 변환

---

String(1);   // '1'
String(NaN);  // 'NaN'

Number('0');  // 0
Number(true);  // 1
Number('10.53') // 10.53

parseInt('0');  // 0
parseFloat('10.53') // 10.53

Boolean('x');  // true
Boolean('');   // false
Boolean(NaN);  // false

 

---

단축 평가

---

|| ( 논리합 연산자 ) 와 && ( 논리곱 연산자 )

 

• 논리합 연산자는 첫 항이 true라면 첫 번째 항 반환
• 논리합 연산자는 첫 항이 false라면 두 번째 항 반환

 

• 논리곱 연산자는 첫 항이 true라면 두 번째 항 반환
• 논리곱 연산자는 첫 항이 false라면 첫 번째 항 반환

 

논리합 연산자는 둘 중에 하나가 true라면 true이다.
즉, 첫 항이 true이면 결과적으로 true이고
    첫 항이 false이면 두 번째 항을 확인한다.

논리곱 연산자는 둘 다 true이어야 true이다.
즉, 첫 항이 true이면 두 번째 항을 확인하고
    첫 항이 false라면 false이다.

// 논리합 (||) 연산자

'Cat' || 'Dog'  // 'Cat'
false || 'Dog'  // 'Dog'


// 논리곱 (&&) 연산자

'Cat' && 'Dog'  // 'Dog'
false && 'Dog'  // false

 

활용

let done = '완료'

let message = done || '미완료'

console.log(message)  // '완료'

 

function test(num){
	return num || 0
}

let answer = test()  // 0

let answer2 = test(3)  // 3

---

옵셔널 체이닝

---

?.    =>  null 또는 undefined가 아닌지 확인

 

let str = '';

let length = str?.length;

console.log(length)  // 0

let length = str ?? str.length

console.log(length) // ''

 

사용 이유

 

논리 연산자 ( && ) : 좌항 피연산자가 false로 평가되는 값(false , undefined, null, 0 , '')이면 좌항을 반환한다.
옵셔널 체이닝 ( ?. ) : null과 undefined만 평가한다.

 

---

null 병합 연산자

---

??   =>  null 또는 undefined가 아닌지 확인

 

let foo = '' || 'default string';

console.log(foo)  // 'default string'

let bar = '' ?? 'default string';

console.log(bar)  // ''

 

사용 이유

 

논리 연산자 ( || ) : 좌항 피연산자가 false로 평가되는 값(false , undefined, null, 0 , '')이면 우항을 반환한다.
null 병합 연산자 ( ?? ) : null과 undefined만 평가한다.