9장 타입 변환과 단축 평가
암묵적 타입 변환
문자열 타입으로 변환
// 숫자 타입
0 + '' // -> "0"
-0 + '' // -> "0"
1 + '' // -> "1"
-1 + '' // -> "-1"
NaN + '' // -> "NaN"
Infinity + '' // -> "Infinity"
-Infinity + '' // -> "-Infinity"
// 불리언 타입
true + '' // -> "true"
false + '' // -> "false"
// null 타입
null + '' // -> "null"
// undefined 타입
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] }"
숫자 타입으로 변환
JS 엔진은 산술 연산자 표현식 평가하기 위해서 피연산자 중에서 숫자 타입이 아닌 값을 숫자 타입으로 변환한다.
만약 숫자 타입으로 변환할 수 없는 값이면 결과로 NaN 반환
// 문자열 타입
+'' // -> 0
+'0' // -> 0
+'1' // -> 1
+'string' // -> NaN
// 불리언 타입
+true // -> 1
+false // -> 0
// null 타입
+null // -> 0
// undefined 타입
+undefined // -> NaN
// 심벌 타입
+Symbol() // -> TypeError: Cannot convert a Symbol value to a number
// 객체 타입
+{} // -> NaN
+[] // -> 0
+[10, 20] // -> NaN
+(function(){}) // -> NaN
- 빈 객체는 NaN 반환
- undefined 는 NaN 반환
불리언 타입으로 변환
- undefined, null, ‘’ 은 false로 변환됨
// 전달받은 인수가 Falsy 값이면 true, Truthy 값이면 false를 반환한다.
function isFalsy(v) {
return !v;
}
// 전달받은 인수가 Truthy 값이면 true, Falsy 값이면 false를 반환한다.
function isTruthy(v) {
return !!v;
}
// 모두 true를 반환한다.
isFalsy(false);
isFalsy(undefined);
isFalsy(null);
isFalsy(0);
isFalsy(NaN);
isFalsy('');
// 모두 true를 반환한다.
isTruthy(true);
isTruthy('0'); // 빈 문자열이 아닌 문자열은 Truthy 값이다.
isTruthy({});
isTruthy([]);
명시적 타입 변환
문자열 타입으로 변환
- String 생성자 함수를 new 연산자 없이 호출
- Object.prototype.toString 메서드
- 문자열 연결 연산자 +
// 1. String 생성자 함수를 new 연산자 없이 호출하는 방법
// 숫자 타입 => 문자열 타입
String(1); // -> "1"
String(NaN); // -> "NaN"
String(Infinity); // -> "Infinity"
// 불리언 타입 => 문자열 타입
String(true); // -> "true"
String(false); // -> "false"
// 2. Object.prototype.toString 메서드를 사용하는 방법
// 숫자 타입 => 문자열 타입
(1).toString(); // -> "1"
(NaN).toString(); // -> "NaN"
(Infinity).toString(); // -> "Infinity"
// 불리언 타입 => 문자열 타입
(true).toString(); // -> "true"
(false).toString(); // -> "false"
// 3. 문자열 연결 연산자를 이용하는 방법
// 숫자 타입 => 문자열 타입
1 + ''; // -> "1"
NaN + ''; // -> "NaN"
Infinity + ''; // -> "Infinity"
// 불리언 타입 => 문자열 타입
true + ''; // -> "true"
false + ''; // -> "false"
숫자 타입으로 변환
- Number 생성자 함수 new 연산자 없이
- parseInt, parseFloat 함수 사용
+단항 산술 연산자 이용*산술 연산자 이용
// 1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 숫자 타입
Number('0'); // -> 0
Number('-1'); // -> -1
Number('10.53'); // -> 10.53
// 불리언 타입 => 숫자 타입
Number(true); // -> 1
Number(false); // -> 0
// 2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
// 문자열 타입 => 숫자 타입
parseInt('0'); // -> 0
parseInt('-1'); // -> -1
parseFloat('10.53'); // -> 10.53
// 3. + 단항 산술 연산자를 이용하는 방법
// 문자열 타입 => 숫자 타입
+'0'; // -> 0
+'-1'; // -> -1
+'10.53'; // -> 10.53
// 불리언 타입 => 숫자 타입
+true; // -> 1
+false; // -> 0
// 4. * 산술 연산자를 이용하는 방법
// 문자열 타입 => 숫자 타입
'0' * 1; // -> 0
'-1' * 1; // -> -1
'10.53' * 1; // -> 10.53
// 불리언 타입 => 숫자 타입
true * 1; // -> 1
false * 1; // -> 0
불리언 타입으로 변환
- Boolean 생성자 함수
- ! 두 번 사용
- 예시
// 1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법 // 문자열 타입 => 불리언 타입 Boolean('x'); // -> true Boolean(''); // -> false Boolean('false'); // -> true // 숫자 타입 => 불리언 타입 Boolean(0); // -> false Boolean(1); // -> true Boolean(NaN); // -> false Boolean(Infinity); // -> true // null 타입 => 불리언 타입 Boolean(null); // -> false // undefined 타입 => 불리언 타입 Boolean(undefined); // -> false // 객체 타입 => 불리언 타입 Boolean({}); // -> true Boolean([]); // -> true // 2. ! 부정 논리 연산자를 두번 사용하는 방법 // 문자열 타입 => 불리언 타입 !!'x'; // -> true !!''; // -> false !!'false'; // -> true // 숫자 타입 => 불리언 타입 !!0; // -> false !!1; // -> true !!NaN; // -> false !!Infinity; // -> true // null 타입 => 불리언 타입 !!null; // -> false // undefined 타입 => 불리언 타입 !!undefined; // -> false // 객체 타입 => 불리언 타입 !!{}; // -> true !![]; // -> true
단축 평가
표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략
&&, || 연산자는 연산 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환
| 단축 평가 표현식 | 평가 결과 |
|---|---|
| true | anything | true |
| false | anything | anything |
| true && anything | anything |
| false && anything | false |
// 논리합(||) 연산자
'Cat' || 'Dog' // -> "Cat"
false || 'Dog' // -> "Dog"
'Cat' || false // -> "Cat"
// 논리곱(&&) 연산자
'Cat' && 'Dog' // -> "Dog"
false && 'Dog' // -> false
'Cat' && false // -> false
어떤 조건의 true ,false 분기를 원하면 각각 && , || 사용
var done = true;
var message = '';
// 주어진 조건이 true일 때
if (done) message = '완료';
// if 문은 단축 평가로 대체 가능하다.
// done이 true라면 message에 '완료'를 할당
message = done && '완료';
console.log(message); // 완료
var done = false;
var message = '';
// 주어진 조건이 false일 때
if (!done) message = '미완료';
// if 문은 단축 평가로 대체 가능하다.
// done이 false라면 message에 '미완료'를 할당
message = done || '미완료';
console.log(message); // 미완료
객체를 가르키기를 기대하는 변수가 null, undefined 인지 확인하고 참조하기
객체.프로퍼티로 사용할 때, 객체 값이 아닌 null, undefined 가 할당되어 있으면 에러가 발생되며 프로그램이 강제로 종료됨.
var elem = null;
var value = elem.value; // TypeError: Cannot read property 'value' of null
단축평가 && 사용해서 꼼수?
var elem = null;
// elem이 null이나 undefined와 같은 Falsy 값이면 elem으로 평가되고
// elem이 Truthy 값이면 elem.value로 평가된다.
var value = elem && elem.value; // -> null
- [!] 좌항이 falsy 값이면 좌항 그대로 반환함. 근데 0, ‘’ 이 객체로 평가될 때도 있다고 함. ( 이건 무슨 차인지 모르겠음 )
함수 매개변수에 기본값
|| 사용해서 매개변수 전달하지 않으면 기본값으로 설정해줌
es6 에서 부터는 함수 선언부에서 기본값 설정할 수 있어서 안쓰긴 할듯
// 단축 평가를 사용한 매개변수의 기본값 설정
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
옵셔널 체이닝 연산자
?. 좌항의 피연산자가 null 또는 undefined 인 경우 undefined 를 반환하고 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
아까 && 이용하던 방법과 비슷한 효과
var elem = null;
// elem이 null 또는 undefined이면 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
var value = elem?.value;
console.log(value); // undefined
- [!] 좌항이 falsy 값이여도 null, undefined 만 아니면 프로퍼티 참조 이어감
null 병합 연산자
?? 좌항의 피연산자가 null, undefined 인 경우 우항 피연산자 반환하고, 아니면 좌항 반환
아까 || 과 비슷한 효과
- [!] falsy 값 기준이 아닌 null, undefined 기준
// 좌항의 피연산자가 Falsy 값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 반환한다.
var foo = '' ?? 'default string';
console.log(foo); // ""