09 타입 변환과 단축 평가

9.1 타입 변환이란?

• 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라 한다.
• 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 것은 암묵적 타입 변환 또는 타입 강제 변환이라 한다.

var x = 10;

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

• 명시적 타입 변환이나 암묵적 타입 변환이 기존 원시 값을 직접 변경하는 것은 아니다.
• 원시 값은 변경 불가능한 값이 므로 기존 원시 값을 사용해 다른 타입의 새로운 원시값을 생성하는 것
• 중요한 것은 타입 변환이 어떻게 동작하는지 예측할 수 있어야 한다.

9.2 암묵적 타입 변환

'10' + 2 // '102'
5 * '10' // 50
!0 // true
if(1){}

• 이처럼 표현식을 평가할 때 코드의 문맥에 부합하지 않는 다양한 상황이 발생할 수 있다.
• 이떄 자바스크립트는 가급적 에러를 발생시키지 않도록 암묵적 타입변환을 통해 표현식을 평가한다.
• 암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환한다.

9.2.1 문자열 타입으로 변환

1 + '2' //'12'

• 위 예제의 + 연산자는 피연산자 중 하나 이상이 문자열이므로 문자열 연결 연산자로 동작
• 문자열 연결 연산자의 모드 피연산자는 코드의 문맥상 모두 문자열 타입이여야 한다.
• 자바스크립트 엔진은 표현식을 평가하기 위해 문자열 연결 연산자의 피연산자 중에서 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환한다.
• ES6에서 도입된 템플릿 리터럴의 표현식 삽입은 표현식의 평과 결과를 문자열 타입으로 암묵적 타입 변환한다.

// 숫자타입
0 + '' // '0'
// 불리언 타입
true + '' // 'true'
// null
null + '' // 'null'
// undefined
undefined + '' // 'undefined'
// 객체
[10, 20] + '' // '10, 20'

9.2.2 숫자 타입으로 변환

• 산술 연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입이어야 한다.
• 자바스크립트 엔진은 산술 연산자 표현식을 평가하기 위해 숫자가 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환
• 이때 피연산자를 숫자로 표현할 수 없는 경우는 NaN이 된다.
• 비교 연산자의 역할은 불리언 값을 만드는 것이므로 코드의 문맥상 모두 숫자 타입이어야 한다.
• 자바 스크립트 엔진은 비교연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 변환
• + 단항 연산자는 피연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환

// 문자열 타입
+'' // 0
+'string' // NaN
// 불리언 타입
+true // 1
// null
+null // 0
// undefined 
+undefinded // NaN
// 객체
+[10, 20] // NaN

9.2.3 불리언 타입으로 변환

• if 문이나 for 문과 같은 제어문 또는 삼항 조건 연산자의 조건식은 불리언 값으로 평가되어야 하는 표현식이다.
• 자바스크립트 엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환한다.
• 이때 자바스크립트 엔진은 불리언 타입이 아닌 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분한다.

false
undefined
null
0, -0
NaN
''(빈 문자열)

• 위의 값들은 false로 평가되는 Falsy 값이다.
• Falsy 값 이외의 모든 값은 모두 true로 평가는 Truthy 값

9.3 명시적 타입 변환

• 개발자의 의도에 따라 명시적으로 타입 변환 하는 방법은 다양
• 표준 빌트인 생성자 함수를 new 연산자 없이 호출 하는 방법, 빌트인 메서드를 사용하는 방법, 암묵적 타입 변환을 이용하는 방법

9.3.1 문자열 타입으로 변환

• 문자열 타입이 아닌 값을 문자열 타입으로 변환하는 방법

1. String 생성자 함수를 new 연산자 없이 호출
2. Object.prototype,toString 메서드를 사용
3. 문자열 연결 연산자를 이용

// 1.String 생성자 함수를 new 연산자 없이 호출
String(1) // "1"
String(true) // "true"

// 2. Object.prototype,toString 메서드를 사용
(1).toString(); // "1"
(true).toString(); // "true"

// 3. 문자열 연결 연산자를 이용
1 + '' // "1"
true + '' // "true"

9.3.2 숫자 타입으로 변환

• 숫자 타입이 아닌 값을 숫자 타입으로 변환하는 방법

1. Number 생성자 함수를 new 연산자 없이 호출
2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
3. • 단항 산술 연산자를 이용
4. • 산술 연산자를 이용

// 1. Number 생성자 함수를 new 연산자 없이 호출
Number('0') // 0
Number(true) // 1

// 2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
parseInt('0') // 0
parseFloat('10.53') // 10.53

// 3. + 단항 산술 연산자를 이용
+'0'; // 0
+true; //1

// 4. * 산술 연산자를 이용
'0' * 1; // 0
true * 1 // 1

9.3.3 불리언 타입으로 변환

• 불리언 타입이 아닌 값을 불리언 타입으로 변환하는 방법

1. Boolean 생성자 함수를 new 연산자 없이 사용
2. ! 부정 논리 연산자를 두번 사용

// 1. Boolean 생성자 함수를 new 연산자 없이 사용
Boolean('x'); //true
Boolean(''); //false

// 2. ! 부정 논리 연산자를 두번 사용
!!'x'; // true
!!''; // false

9.4 단축 평가

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

• 논리합(||) 또는 논리곱($$) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다.
• 논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.

'Cat' && 'Dog' // "Dog"

• 논리곱(&&) 연산자는 두개의 피연산자가 모두 true로 평가될 때 true를 반환한다.
• 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다.
• 첫 번째 피연산자 'Cat'은 true로 평가
• 두 번째 피연산자까지 평가해 보아야 위 표현식을 평가할 수 있다.
• 두 번째 피연산자가 논리곱 연산자 표현식의 평가 결과를 결정
• 논리 연산의 결과를 결정하는 두 번째 피연산자, 즉 문자열 'Dog'를 반환

'Cat' || 'Dog' // "Cat"

• 논리합(||) 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환
• 논리합 연산자도 좌항에서 우항으로 평가가 진행된다.
• 첫 번째 피연산자 'Cat'은 true로 평가
• 이 시점에서 두 번째 피연산자까지 평가해보지 않아도 표현식을 평가할 수 있다.
• 논리 연산의 결과를 결정한 첫 번째 피연산자 문자열 'Cat'을 그대로 반환
• 논리곱(&&) 연산자와 논리합(||) 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다.
• 이를 단축 평가라 한다.
• 단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.

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

• 단축 평가를 사용하면 if 문을 대체할 수 있다.
• 어떠한 조건이 true 일 때 무언가를 해야한다면 논리곱 연산자
• false 일 때 무언가 해야한다면 논리합 연산자 표현식으로 대체

var done = true;
var message = '';

if(done) message = '완료';
message = done && '완료';
console.log(message) // 완료

• 단축 평가의 유용한 패턴

1. 객체를 가르키기를 기대하는 변수가 null 또는 undefined가 아닌지 확이하고 프로퍼티를 참고 할 때

var elem = null;
var value - elem.value; // TypeError

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

2. 함수 매개변수에 기본값을 설정할 때

function getStringLength(str){
	str = str || '';
    return str.length;
}

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

9.4.2 옵셔널 체이닝 연산자

• ES11에서 도입된 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고 그렇지 않으면 우항의 프로퍼티 참조를 이어간다

var elem = null;

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

• 옵셔널 체이닝 연산자가 도입되기 이전에는 논리연산자 &&를 사용한 단축 평가를 통해 변수가 null 또는 undefined인지 확인했다.
• 논리 연산자는 &&는 좌항 피연산자가 false로 평가되는 값이면 좌항 피연산자를 그대로 반환한다.(0 이나 '' 인 경우도 마찬가지)

var str = '';
var length = str && str.length;

console.log(lenght) // ''

9.4.3 null 병합 연산자

• ES11에서 도입된 null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고 그렇지 않으면 좌항의 피연산자를 반환한다.
• 변수에 기본값을 설정할 때 유용하다

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

• null 병합 연산자가 도입되기 이전에는 논리연산자 ||를 사용한 단축 평가를 통해 기본값을 설정했다.
• 좌항의 피연산자가 false로 평가되는 값이면 우항의 피연산자를 반환 만약 Falsy 값이 0 이나 ''도 기본값으로서 유요하다면 예기치 않은 동작이 발생할 수 있다.

var foo = ''||'default string';
console.log(foo) // default sting

• null 병합 연산자는 좌항의 피연산자가 false 값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 그대로 반환