- 명시적 타입 변환(타입 캐스팅)
: 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 개발자가 의도적으로 값의 타입을 변환하는 것
- 암묵적 타입 변환 (타입 강제 변환)
: 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스ㅡ립트 엔진에 의해 암묵적으로 타입이 자동 변환
let x = 10;
// 암묵적 타입 변환
문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성한다
let str = x + '';
// 10 + ''
// '10' + '' : 숫자값 x(10)을 바탕으로 새로운 문자열 '10'을 생성
// '10'
console.log(typeof str, str); // string 10암묵적 타입 변환 (강제 변환)
: 자바스크립트 엔진은 표현식을 평가할 때 개발자의 의도와는 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환(암묵적 타입 변환)할 때가 있다.
a. 문자열 타입으로의 변환
// 숫자 타입
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] }"b. 숫자 타입으로 변환
// 문자열 타입
+'' // -> 0
+'0' // -> 0
+'1' // -> 1
+'string' // -> NaN
// 불리언 타입
+true // -> 1
+false // -> 0
// null 타입
+null // -> 0
// undefined 타입
+undefined // -> NaN
// 심벌 타입
+Symbol() // -> ypeError: Cannot convert a Symbol value to a number
// 객체 타입
+{} // -> NaN
+[] // -> 0 빈배열 체크?if(array.length !== 0) 또는 if(+array !== 0)
+[10, 20] // -> NaN
+(function(){}) // -> NaNc. 불리언 타입으로 변환
if 문이나 for 문과 같은 제어문 또는 삼항 조건 연산자의 조건식은 불리언 값, 즉 논리적 참/거짓으로 평가 되어야 하는 표현식이다. 자바스크립트 엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환을 한다
-> if 문 등에 들어가는 조건식에 들어가는 값은 불리언 타입으로 암묵적 형변환이 된다
if ('') console.log('1');
if (true) console.log('2');
if (0) console.log('3');
if ('str') console.log('4');
if (null) console.log('5');
// 2 4: 이때 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값), 또는 Falsy 값(거짓으로 평가되는)으로 구분한다 --> 암묵적 타입 변환
<Falsy 값 리스트>
- false
- undefined
- null
- 0, -0
- NaN
- ''(빈 문자열)
Truthy 와 Falsy 를 판별하는 함수
// 전달받은 인수가 Falsy 값이면 true, Truthy 값이면 false를 반환한다.
function isFalsy(v) {
return !v;
}
// 전달받은 인수가 Truthy 값이면 true, Falsy 값이면 false를 반환한다.
function isTruthy(v) {
return !!v;
}명시적 타입 변환
개발자의 의도에 따라 명시적으로 타입을 변경
- 표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출하는 방법
- 빌트인 메서드를 사용하는 방법
- 암묵적 타입 변환을 이용하는 방법
a. 문자열 타입으로 변환
: 문자열 타입이 아닌 값을 문자열로 변환
// 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"b. 숫자 타입으로 변환
: 숫자 타입이 아닌 값을 숫자 타입으로 변환
// 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; // -> 0c. 불리언 타입으로 변환
: 불리언 타입이 아닌 값을 불리언 타입으로 변환
// 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단축 평가
: 논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.
- 논리 연산의 결과를 결정하는 피연산자를 타입변환하지 않고 그대로 반환
- 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것
true || anything -> true
false || anything -> anything
true && anything -> anything
false && anything -> true
- 어떤 조건이 Truthy(Falsy) 값일 때 실행되는 논리곱(논리합) 연산자로 if 문을 대체할 수 있다
// 어떤 조건이 Truthy값인 경우 논리곱&&연산자 표현식으로 if문을 대체
var done = true;
var message = '';
// 주어진 조건이 true일 때
if (done) message = '완료';
// if 문은 단축 평가로 대체 가능하다.
// done이 true라면 message에 '완료'를 할당
message = done && '완료';
console.log(message); // 완료// 조건이 Falsy값 인경우 논리합||연산자 표현식으로 if문을 대체
var done = false;
var message = '';
// 주어진 조건이 false일 때
if (!done) message = '미완료';
// if 문은 단축 평가로 대체 가능하다.
// done이 false라면 message에 '미완료'를 할당
message = done || '미완료';
console.log(message); // 미완료- 삼항조건 연산자로 if else 문을 대체하는 경우
var done = true;
var message = '';
// if...else 문
if (done) message = '완료';
else message = '미완료';
console.log(message); // 완료
// if...else 문은 삼항 조건 연산자로 대체 가능하다.
message = done ? '완료' : '미완료';
console.log(message); // 완료- 객체를 가리키기를 기대하는 변수가 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옵셔널 체이닝
: ES11(ECMAScript2020)에 도입된 옵셔널 체이닝(optional chaining) 연산자 ?.는 좌항의 피연산자가 null또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
- 옵셔널 체이닝 연산자?.는 좌항의 피연산자가 false로 평가되는 Falsy(false, undefined, 0, NaN, ' ')값이라도 null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.
var str = '';
// 문자열의 길이(length)를 참조한다. 이때 좌항 피연산자가 false로 평가되는 Falsy 값이라도
// null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.
var length = str?.length;
console.log(length); // 0null 병합 연산자
: ES11(ECMAScript2020)에 도입된 null 병합(nullish coalescing)연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.
-> 변수에 기본값을 설정할 때 유용하다
// 좌항의 피연산자가 null 또는 undefined이면 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.
var foo = null ?? 'default string';
console.log(foo); // "default string"옵셔널 체이닝(?.)을 남용하면 안되는 이유?
옵셔널 체이닝은 평가 대상이 undefined 또는 null 이면 평가를 멈추고 undefined 를 반환하는데,
에러를 조기에 발견하지 못하고 디버깅에 어려움이 발생할 수 있기 때문에, 옵셔널 체이닝의 남용은 지양해야 한다.
--> ?. 는 존재하지 않아도 괜찮은 대상에 사용하자!
예를들어 논리상 user 객체는 있어야 하는 경우, 옵셔널 체이닝을 user에 적용하면 문제를 조기에 발견하지 못할 수 있다. 에러를 발생시키지 않기 때문에...
--> 추후에 디버깅이 어려워질 수 있어...
--> 내 경우에는 타입스크립트에서 타입 정의를 any 로 한 경우가 많아져서... 문제가 생길 수 있어
// 잘못된 사용
user?.address?.street
// 옳은 사용
user.address?.street