[모던 자바스크립트 딥다이브] 9장 타입 변환과 단축 평가

타입 변환

• 명시적 타입 변환 | 타입 캐스팅
• 암묵적 타입 변환 | 타입 강제 변환
• 둘 다 기존 원시 값을 직접 변경하는 것은 아님

---

암묵적 타입 변환

• 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환 되는 것
• 자바스크립트 엔진이 표현식을 에러 없이 평가하기 위해 피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한 번 사용하고 버림
• 코드의 문맥을 고려함

 

문자열 타입 변환

• + 단항 연산자의 경우 피연산자가 숫자 타입이 아니면 숫자 타입의 값으로 암묵적 타입 변환 수행함
• Symbol, 객체, 빈배열이 아닌 배열, undefined은 NaN으로 변환됨

 

불리언 타입 변환

• 자바스크립트 엔진은 불리언 타입이 아닌 값을 truthy 값 또는 falsy 값으로 구분
• falsy 값 : false, undefined, null, 0, -0, NaN, ''(빈 문자열)

 

---

 

명시적 타입 변환

• 개발자가 의도적으로 값의 타입을 변환하는 것

 

문자열 타입 변환

• String 생성자 함수를 new 연산자 없이 호출하는 방법
• Object.prototype.toString 메서드를 사용하는 방법
• 문자열 연결 연산자를 이용하는 방법

String(1); //"1"
String(NaN); //"NaN
String(false); //"false"

(1).toString();
(NaN).toString();

1 + '';
NaN + '';
false + '';

 

 

숫자 타입 변환

• Number 생성자 함수를 new 연산자 없이 호출하는 방법
• parseInt, parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능)
• + 단항 산술 연산자를 이용하는 방법
• * 산술 연산자를 이용하는 방법

Number('0'); // 0
Number('10.51'); // 10.51

parseInf('0');
parseFloat('1.51');

+'0';
+'321'
+true; // 1
+false; // 0

'0'*1; // 0
'-1'*1 // -1
true*1 // 1
false*1 // 0

 

 

불리언 타입 변환

• Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
• ! 부정 논리 연산자를 두 번 사용하는 방법

Boolean('x'); // true
Boolean(''); // false
Boolean('false') // true
Boolean(0); // false
Boolean({}); // true

!!'x' // true
!!'' // false
!!1 // true
!!null // false

 

---

단축 평가

• 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것
• 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 => 객체가 아니라 null, undefined일 경우 프로퍼티를 참조하면 타입 에러가 발생(프로그램 강제 종료됨)하는데 이를 방지 가능
• 함수 매개변수에 기본값을 전달할 때 => 매개변수가 undefined로 인해 발생할 수 있는 에러 방지 가능

 

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

• 논리합 또는 논리곱 연산자 표현식은 언제나 2개의 피연산자 중 어느 한족으로 평가된다
• 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다.
• 논리합 연산자는 두개가 true 여야 true를 반환 만약, 첫번째 피연산자가 false이면 두번째 피연산자를 평가하지 않고 false를 반환
• 논리곱 연산자는 하나만 true여도 true를 반환. 만약 첫번째 피연산자가 truthy 하다면 두번째 피연산자를 평가하지 않고 첫번째 피연산자를 반환함
• if문을 대체해서 사용할 수 있다

'cat' || 'dog'; // 'cat'
'cat' && 'dog'; // 'dog'

true || anything // true
false || anything // false
true && anything // anything
false && anyting // false

if(done) message = 'done';

=> 단축 평가로 대체 가능
message = done && 'done';

if(!done) message = 'not done';

=> 단축 평가로 대체 가능
message = done || 'not done';

 

 

옵셔널 체이닝 연산자

• ES11에서 도입된 ?. 연산자
• 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어감
• 옵셔널 체이닝 연산자는 단축 평가(논리곱 연산자)와 달리 truthy 값이여도 null이나  undefined가 아니면 참조가 가능함( 0 이나 '' 값)

 

null 병합 연산자

• ES11에 도입된 ?? 연산자
• 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환
• 변수에 기본값을 설정할 때 유용
• null 병합 연산자는 단축 평가(논리합 연산자)와 달리 false 값이여도 null 이나 undefined가 아니면 참조가 가능함( 0 이나 '' 값)

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