09 타입 변환과 단축 평가

암묵적 타입 변환(implicit coercion) or 타입 강제 변환(type coercion)

ex)

var x = 10;
var str = x + '';
console.log(typeof str, str); // string 10

// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

원시 값은 변경 불가능한 값이므로 변경 x

타입 변환이란 다른 타입의 새로운 원시 값을 생성하는 것이다.

명시적 타입 변환은 타입을 변경하겠다는 명백한 의도가 드러남.

표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출

문자열 타입으로 변환

// 1. String 생성자 함수를 new 연산자 없이 호출하는 방법
String(1);			// -> "1"

// 2. Object.prototype.toString 메서드를 사용하는 방법
(NaN).toString();	// -> "NaN"

// 3. 문자열 연결 연산자를 이용하는 방법
Infinity + '';		// -> "Infinity"

숫자 타입으로 변환

// 1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
Number('0');			// -> 0

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

// 3. + 단항 산술 연산자를 이용하는 방법
+ true; 				// -> 1

// 4. * 산술 연산자를 이용하는 방법
false * 1; 				// -> 0

불리언 타입으로 변환

// 1. Boolean ㅐㅇ성자 함수를 new 연산자 없이 호출하는 방법
Boolean('x');			// -> true
Boolean(0);				// -> false

// 2. ! 부정 논리 연산자르 두 번 사용하는 방법
!!NaN;					// -> false
!!undefined; 			// -> false

논리 연산자

- 논리곱(&&)

첫 번째 피연산자가 거짓일 경우 첫 번째 피연산자를 반환하고,

그렇지 않으면 두 번째 피연산자를 반환합니다.

- 논리합(| |)

하나만 true여도 true를 반환

첫 번째 피연산자가 참일 경우 두 번째는 평가하지 않아도 첫 번째 피연산자 반환

피연산자를 타입 변환하지 않고 그대로 반환

# 단축평가 - 평가 도중 결과가 확정된 경우 나머지 과정 생략

if문 대체 가능

Truthy 값일 땐 논리곱(&&)

var done = true;
var message = '';

// 주어진 조건이 true일 때
if (done) message = '완료';

// if 문은 단축 평가로 대체 가능하다.
// done이 true라면 message에 '완료'를 할당
message = done && '완료';
console.log(message); // 완료

Falsy 값일 땐 논리합(| |)

var done = false;
var message = '';

// 주어진 조건이 false일 때
if (!done) message = '미완료';

// if 문은 단축 평가로 대체 가능하다.
// done이 false라면 message에 '미완료'를 할당
message = done || '미완료';
console.log(message); // 미완료

단축 평가의 유용한 패턴이 있다

1. 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때
단축 평가를 사용하면 에러 x

var elem = null;
// elem이 null이나 undefined와 같은 Falsy 값이면 elem으로 평가되고
// elem이 Truthy 값이면 elem.value로 평가된다.
var value = elem && elem.value; // -> null

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

함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 udefined가 할당된다.

단축 평가를 사용해 매개변수의 기본값을 설정하면 undefined로 인해 발생할 수 있는 에러를 방지 가능

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

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

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

console.log(getStringLength());			// -> 0
console.log(getStringLength('hi'));		// -> 2

옵셔널 체이닝 연산자 (?.)

&&는 좌항이 false로 평가되면 false 그대로 반환

하지만 ?. 는 false여도 null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다

var str = '';

// 문자열의 길이(length)를 참조한다. 이때 좌항 피연산자가 flase로 평가되는 Falsey 값이라도
// null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.
var length = str?.length;
console.log(length);    // 0

null 병합 연산자 (??)

좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 아니면 좌항을 반환

?? 는 변수에 기본값을 설정할 때 유용하다

(| |) 연산자는 '0'이나 ' ' 도 기본값으로 유효하면 예기치 않은 동작이 발생할 수 있다

// 좌항의 피연산자가 null 또는 undefined이면 우항을 반환,
// 아니면 좌항 반환
var foo = null ?? 'default string';
console.log(foo);   // "default string"

// 좌항의 피연산자가 Falsy 값이라도 null 또는 undefined가 
// 아니면 좌항 반환
var foo = '' ?? 'default string';
console.log(foo);   // ""

# 나만의 quiz