모던 자바스크립트 Day 11

이현정·2022년 4월 9일

🔖 읽은 범위: 9장 타입 변환과 단축 평가

☘️ 책갈피:

타입 변환(Coercion)

https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion
타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다.

타입 변환에는 두 가지가 있다:
1) 명시적 타입 변환(explicit coercion) : 개발자가 의도적으로 값의 타입을 변환하는 것
2) 암묵적 타입 변환(implicit coercion): 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것

 var x = 10;
 
 // 명시적 타입 변환
 var str = x.toString();
 console.log(typeof str, str); // string 10
 
 // 암묵적 타입 변환
 var str = x +"";
 console.log(typeof str, str); // string 10

 // 어느쪽이든 x 변수의 값이 변경된 것은 아니다. 새로운 원시값 str 을 생성하는 것 뿐.
 console.log(type of x, x); // number 10

명시적 타입 변환(explicit coercion)

타입 캐스팅(type casting) 이라고도 한다.
명시적으로 타입 변환하는 방법: 빌트인 매서드 활용 + 암묵적 타입 변환 방법

문자열 타입으로 변환:
1) String(1) //'1'
2) (1).toString() //'1'
3) 1+'' // '1'

숫자 타입으로 변환
1) Number('1') // 1
2) ParseInt('1') or ParseFloat('1') // 1, 이경우는 문자열만 사용가능
3) +'1' // 1
+true // 1
4) '1' * 1 // 1

불리언 타입으로 변환
1) Boolean('x') // true
Boolean('') // false
2) !!'x' // true
!!'' // false

// 더 자세한 사항은 p.117 참조

암묵적 타입 변환(implicit coercion)

타입 강제 변환(type coercion) 이라고도 한다.
암묵적으로 타입 변환하는 방법:

문자열 타입으로 변환: 하나의 피연산자라도 문자열인 두항 이상의 + 연산자
1+'2' // '12'

숫자 타입으로 변환: 모든 산술 연산자
1 - '1' // 0
1 * '1' // 1
1 / 'one' // NaN

불리안 타입으로 변환: Trusy 값은 true, Falsy 값은 false 로 반환.
if ( false ) console.log('1');
if ( !false ) console.log('2');
if ( '' ) console.log('3');
if ( !'' ) console.log('4');
if (0) console.log('5');
if (!0) console.log('6');
if (NaN) console.log('7');
if (!NaN) console.log('8');
if (undefined) console.log('9');
if (!undefined) console.log('10');
if (null) console.log('11');
if (!null) console.log('12');
// 2 4 6 8 10 12

단축 평가(short-circuit evaluation) 🌟

표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.
단축 평가를 이용하면 if 문을 대체할 수 있다.
이때 if 제어문의 결과는 값으로 쓸 수 없지만, 단축평가의 결과는 값으로 쓸 수 있다는 장점이 있다.
단축 평가를 하는 방법에는 3가지가 있다:
1) 논리 연산자: &&, ||
2) 옵셔널 체인징 연산자: ?.
3) null 병합 연산자: ??

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

(1) 논리곱(&&) 연산자: 두 개의 피연산자가 모두 true 로 평가될 떄 true를 반환한다. 따라서 논리 연산의 결과를 결정하는 두 번째 피연산자가 true 일시 두 번째 피연산자를 그대로 반환한다.
(2) 논리합(||) 연산자: 두 개의 피연산자 중 하나만 true 로 평가되어도 true 를 반환한다. 따라서 논리 연산의 결과를 결정하는 첫 번재 피연산자가 true 일 경우 첫 번째 피연산자를 그대로 반환한다.

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

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

2) 옵셔널 체인징 연산자 ?.

좌항의 피연산자가 null/undefined 인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다. 객체를 가리키기를 기대하는 변수가 null 또는 undefined 인지 확인하고 프로퍼티를 참조할 때 유용하다.

 var elem = null;
 
 var value = elem?.value;
 console.log(value); // null

3) null 병합 연산자 ??

좌항의 피연산자가 null/undefined 인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. 변수에 기본값을 설정할 때 유용하다.

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

？ 의문점:

‼️ 느낀점:

💖 요약:

타입 변환이란 기존 변수에 할당된 값의 타입을 참조해 새로운 타입의 값을 생성하는 것이다. (값을 재할당 하는 게 아님)
타입 변환에는 명시적 타입 변환과 암묵적 타입 변환이 있고, 개발자의 의도 유무에 따라 차이가 생긴다. 암묵적 타입 변환은 단위 연산자가 사용되고, 명시적 타입 변환은 이러한 단위 연산자 + 빌트인 매서드 등이 사용된다.
단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말하며, && 와 ||, ?. 와 ?? 가 있다.