9. 타입 변환과 단축 평가

암묵적 타입 변환

---

자바스크립트 엔전이 스스로 코드의 문맥을 추론하여 암묵적으로 데이터 타입을 강제 변환하는 것.
*개발자의 의도와는 다른 타입 변환이 일어날 수 있다.

var x = 10;
console.log(typeof x) //x의 타입은 Number

var str = x + 'hello'; //Number와 string 연산 -> 자바스크립트 엔진이 알아서 x의 타입을 string으로 변환.

console.log(typeof str); //str의 타입은 String
console.log(typeof x) //x의 타입은 그대로 Number  

자바스크립트 엔진이 암묵적으로 x의 타입을 변환시켰지만 실제 x의 타입이 변환되는 것은 아님.
-> 새로운 해당 타입의 변수를 생성하여 연산함.

이런 개발자의 의도와 다르게 작동할 수 있는 암묵적 타입 변환은 예상치 못한 문제가 발생할 수 있다는 단점이 있다.
하지만 가독성이 좋고 이해하기 쉽다는 장점이 있다.

문자열 타입으로 변환

1 + '2' // -> "12"
`1 + 1 = ${1 + 1}` // -> "1 + 1 = 2"

코드 문맥에 따라 문자열 타입으로 변환됨
숫자 / 불리언 / null / undefined / 객체 등등
대부분 타입이 문맥에 따라 문자열로 암묵적 변환 가능.
*템플릿 리터럴 표현식 또한 문자열로 타입 변환됨.

숫자 타입으로 변환

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

산술 연산자 상황에서 모두 숫자 타입으로 변환됨.
이때 변환할 수 없는 경우 NaN 반환

//그 외 여러가지 숫자 타입으로 변환
//Boolean Type
true // -> 1
false // -> 0

//null Type
null // -> 0

//undefined Type
undefined // -> NaN

불리언 타입으로 변환

아래의 값들이 Falsy로 평가되는 값임.

false
undefined
null
0, -0
NaN
''

이 외의 모든 값들은 Truthy로 평가되는 값

명시적 타입 변환

---

개발자가 의도적으로 타입을 변경하는 것.
크게 3가지 방법이 존재한다.

• built-in Method 사용
• new 연산자 없이 생성자 함수 사용
• 앞에서 나온 암묵적 타입 변환 사용

문자열 타입으로 변환

//1. built-in Method 사용
(1).toString();
(NaN).toString();
(Infinity).toString();

//2. new 연산자 없이 생성자 함수 사용
String(1);
String(NaN);
String(Infinity);

//3. 암묵적 타입 변환 사용
1 + '';
NaN + '';
Infinity + '';

숫자 타입으로 변환

//1. built-in Method 사용 -> parseInt, parseFloat 
parseInt('0');
parseInt('-1');
parseInt('10.53');

//2. new 연산자 없이 생성자 함수 사용
Number('0');
Number('-1');
Number('10.53');

//3. 암묵적 타입 변환 사용
'0' * 1;
'-1' * 1;
'10.53' * 1;

불리언 타입으로 변환

//1. new 연산자 없이 생성자 함수 사용
Boolean('x');
Boolean('');
Boolean('false'); //-> 문자열 공백 제외 모두 true로 변환됨. 이것도 true

//2. 암묵적 타입 변환 사용
!!'x';
!!'';
!!'false';

단축평가

---

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

|| , && 반환값이 Boolean이 아닐 수 있다. 피연산자 2개 중 하나로 반환이 될 수 있음.

'Cat' && 'Dog' // -> "Dog"

위와 같이 논리 연산자는 연산의 결과를 피연산자로 그대로 반환함. (Booleand으로 변환X)

'Cat' || 'Dog' // -> "Cat"

이때 위의 연산 과정을 살펴보자.
'Cat'에서 True가 나오므로 뒤의 'Dog'는 보지 않고 바로 "Cat"을 반환한다.
이처럼 표현식을 평가하는 도중에 평가 결과가 확정되면 나머지 피연산자 평가 과정을 생략하고 바로 반환하는 것을 "단축평가"라고 한다.

응용

1. if문 대체

보통 true/false를 조건으로 걸어 특정 상황일 때 무언가를 수행하려면 if문을 아래와 같이 사용

var done = true;
var message = '';
if (done) message = 'DONE!!!';

이를 위의 논리 연산자를 활용하여 다음과 같은 표현식으로 대체할 수 있음.

var done = true;
var message = '';
message = done && "DONE!!!";

//false일 때 조건 처리하고 싶다면
message = done || "NOT DONE!!!";

2. null/undefined 객체 참조 에러 방지

null / undefined 참조할 때 발생하는 에러 방지도 가능함.

var elem = null;
var value = elem && elem.value

위와 같은 표현식을 이용하면 elem이 null/undefined가 아닐때만 표현식이 수행되어 오류가 발생하지 않음.

3. 함수 매개변수 전달 에러 방지

// 단축 평가를 사용한 매개변수의 기본값 설정
function getStringLength(str) {
  str = str || '';
  return str.length;
}

getStringLength();     // -> 0
getStringLength('hi'); // -> 2

// ES6의 매개변수의 기본값 설정
function getStringLength(str = '') {
  return str.length;
}

getStringLength();     // -> 0
getStringLength('hi'); // -> 2

옵셔널 체이닝 연산자

var value = elem?.value;

elem이 null 또는 undefined일 경우 우항의 프로퍼티 참조를 하지 않고 바로 undefined를
반환하여 에러 발생을 방지한다.

이를 이용하면 위의 "2. null/undefined 객체 참조 에러 방지"인 같은 경우에
길게 쓸 필요없이 ? 옵셔널 체이닝 연산자만 붙이면 된다.

null 병합 연산자

좌항의 피연산자 null / undefined인 경우 우항 피연산자 반환,
그렇지 않을 경우엔 좌항의 피연산자 반환.
-> 변수의 기본값 설정할 때 유용함.

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