[9장] 타입 변환과 단축 평가

9.1 타입 변환이란?

1) JavaScript의 모든 값은 타입이 있다.
2) 명시적 타입 변환 == 타입 캐스팅
= 개발자가 의도적으로 값의 타입을 변환하는 것

3) 암묵적 타입 변환 == 타입 강제 변환
= 개발자의 의도와는 상관없이 JavaScript 엔진에 의해 암묵적으로 타입이 자동으로 변환되는 것 (코드의 문맥과 관계 있다)

var x = 10;
var str = x.toString(); //type casting

var x = 10;
var str = x+''; //type coercion

4) 타입 변환 == 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것!

9.2 암묵적 타입 변환

1) 문자열 타입으로 변환
'+' 연산자는 피연산자 중 하나 이상이 문자열이면, 문자열 연결 연산자로 동작한다.

0+'' // "0"
-0+'' // "0"
-1+'' //"-1"
NaN+'' //"NaN"
true+'' //"true"
null+'' //"null"
undefined+'' //"undefined"
(Symbol())+'' //TypeError: Cannot convert a Symbol value to a string
({})+'' //"[object Object]"
Math+'' //"[object Math]"
[10,20]+'' //"10,20"
(function(){})+'' //"function(){}"
Array+'' //"function Array(){[native code]}"

2) 숫자 타입으로 변환
2-1) 산술 연산자
-, *, / 등은 모두 산술 연산자이다. 산술 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자는 숫자 타입으로 암묵적 타입 변환된다.

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

2-2) 비교 연산자

'1'>0 //true

<, >와 같은 비교 연산자는 피연산자의 크기를 비교해야 하므로 모든 피연산자는 숫자 타입이어야 한다.

2-3) + 단항 연산자
'+' 단항 연산자의 모든 피연산자는 숫자 타입이어야 한다.

+'string' //NaN
+null //0
+{} //NaN
+[] //0
+[10,20] //NaN
+(function(){}) //NaN

3) boolean 타입으로 변환
3-1) JavaScript 엔진은 boolean type이 아닌 값을 Truthy 값 또는 Falsy 값으로 구분한다.
3-2) Falsy 값: false, undefined, null, 0, -0, NaN, ''(빈 문자열)
3-3) Falsy 값 외의 값은 모두 Truthy 값이다.

function isTruthy(v) {
	return !!v;
}
isTruthy({}); //true
isTruthy([]); //true
isTruthy('0'); //true. 빈 문자열이 아니기 때문에

9.3 명시적 타입 변환

1) 명시적으로 타입을 변경하는 방법
1-1) 표준 빌트인 생성자 함수를 new 연산자 없이 호출
1-2) 빌트인 메소드 이용(빌트인 메소드는 JS에서 기본적으로 제공해준다.)
1-3) 암묵적 타입 변환 이용

2) 문자열 타입으로 변환

// 2-1) String 생성자 함수를 new 연산자 없이 호출
String(Infinity); //"Infinity"

// 2-2) Object.prototype.toString 메소드를 사용
(Infinity).toString(); //"Infinity"

// 2-3) 문자열 연결 연산자를 이용
Infinity+''; //"Infinity"

3) 숫자 타입으로 변환

// 3-1) Number 생성자 함수를 new 연산자 없이 호출
Number('10.53'); //10.53

// 3-2) parseInt, parseFloat 함수를 사용 (문자열만 변환 가능)
parseInt('5'); //5
parseFloat('10.53'); //10.53

// 3-3) + 단항 산술 연산자를 이용
+'10.53'; //10.53

// 3-3) * 산술 연산자를 이용
'0'*1; //0

4) boolean type으로 변환

//4-1) Boolean 생성자 함수를 new 연산자 없이 호출
Boolean('x'); //true
Boolean(''); //false

//4-3) ! 부정 논리 연산자를 두 번 사용
!!'x'; //true
!!''; //false

9.4 단축 평가

1) 단축 평가: 표현식을 평가하는 도중에 평가 결과가 확정된 경우, 나머지 평가 과정을 생략하는 것을 말한다.

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

'Cat' || 'Dog'; //"Cat"
false || 'Dog'; //"Dog"
'Cat' && 'Dog'; //"Dog"
false && 'Dog'; //false

논리합, 논리곱 연산자 표현식 평가 결과는 항상 Boolean 값일 줄 알았다. 그런데, 논리합 또는 논리곱 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다고 한다.
'Cat' || 'Dog'; 가 true를 반환하는 것이 아닐까 했었는데, 'Cat'을 반환하는 이유도 이 사실과 관련이 있다. 'Cat' || 'Dog';에서는 첫 번째 피연산자인 'Cat'이 논리 연산의 결과를 결정하고 있기 때문에 'Cat'이 반환된다!!

var elem = null;
var value = elem.value; //에러 발생
var value2 = elem && elem.value; //에러 발생 x

객체가 아니라 null 또는 undefined인 경우 프로퍼티를 참조했을 때 타입 에러가 발생한다. 이때, 단축 평가를 사용하면 에러가 발생하지 않는다.

function getStringLength(str){
	str = str || ''; //단축 평가 사용
    return str.length;
}

function getStringLength(str=''){ //기본값 설정 가능
	return str.length;
}

함수 호출 시, 인수를 전달하지 않으면 매개변수에 undefined가 할당된다. 이때 단축 평가를 사용하거나, 매개변수의 기본값을 설정해줌으로써 에러를 방지할 수 있다.

3) 옵셔널 체이닝 연산자
optional chaining 연산자는 '?.'이다.
좌항의 피연산자가 null이거나 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 property 참조를 이어 나간다.

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

4) null 병합 연산자
null 병합 연산자는 '??'이다.
좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.

const handleClick = () => {
  let foo = null ?? "default string";
  let foo2 = "not null" ?? "default string";
  console.log(`foo: ${foo}, foo2: ${foo2}`);
  //foo: default string, foo2: not null
};

좌항의 피연산자가 false로 평가되는 Falsy 값이더라도, null이나 undefined가 아니면 좌항의 피연산자를 그대로 반환한다.