타입 변환
자바스크립트의 모든 값에는 타입이 존재
명시적 타입 변환 또는 타입 캐스팅 - 개발자가 의도적으로 값의 타입을 변환
var x = 10;
//명시적 타입 변환
var str = x.toString();
console.log(typeof str, str); // string 10
//x 변수의 값이 변경된 것은 아니다
console.log(typeof x, x); //number 10암묵적 타입 변환 또는 타입 강제 변환 - 개발자의 의도와는 상관없이 표현식을 평가하는 도중 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환
var x = 10;
//암묵적 타입변환
//문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성한다.
var str = x + '';
console.log(typeof str, str); // string 10
//x 변수의 값이 변경된 것은 아니다
console.log(typeof x, x); //number 10암묵적 타입변환
자바스크립트 엔진은 표현식을 평가할 때 의도와 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제로 변환할 때가 있음
//피연산자가 모두 문자열 타입이어야 하는 문맥
'10' + 2 // 102
//피연산자 모두 숫자 타입이어야 하는 문맥
5 * '10' // 50
//피연산자 또는 표현식이 블리언 타입이어야 하는 문맥
!0 // true
if (1) {}코드의 문맥에 부합하지 않는 다양한 상황이 발생할 경우 암묵적 타입 변환을 통해 표현식을 평가함
문자열 타입으로 변환
//숫자 타입
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
//객체 타입
({}) + '' // "[object Object]"
Math + '' // "[object Math]"
[] + '' // ""
[10, 20] + '' // "10,20"
(function(){}) + '' // "function(){}"
Array + '' // "function Array() {{native code}}"
숫자 타입으로 변환
//숫자 타입
+'' // 0
+'0' // 0
+'1' // 1
+'string' // NaN
//블리언 타입
+true // 1
+false // 0
//null 타입
+null // 0
//undefined 타입
+undefined // NaN
//심벌 타입
(Symbol()) + '' // TypeError
//객체 타입
+{} // NaN
+[] // 0
+[10, 20] // NaN
+(function(){}) // NaN불리언 타입으로 변환
// 아래의 조건문은 모두 코드 블록을 실행
if(!false) console.log(true)
if(!undefined) console.log(true)
if(!null) console.log(true)
if(!0) console.log(true)
if(!NaN) console.log(true)
if(!'') console.log(true)명시적 타입변환
개발자의 의도에 따라 명시적으로 타입을 변경하는 방법은 다양함
- 표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출하는 방법
- 빌트인 메서드를 사용하는 방법
- 암묵적 타입 변환을 이용하는 방법
문자열 타입변환
- String 생성자 함수 new 연산자 없이 호출
- Object.prototype.toString 매서드를 사용
- 문자열 연결 연산자
// 1. String 생성자 함수
String(1)
String(NaN)
String(Infinity)
String(true)
String(false)
// 2. Object.prototype.toString 매서드
(1).toString()
(NaN).toString()
(Infinity).toStirng()
(true).toString()
(false).toString()
// 3.문자열 연결 연산자
1 + '';
NaN + '';
Infinity + '';
true + '';
false + '';숫자 타입변환
- Number 생성자 함수 new 연산자 없이 호출
- parseInt, parseFloat 함수를 사용(문자열만 숫자 타입으로 변환 가능)
- +단항 산술 연산자를 이용
- *산술 연산자를 이용
// 1. Number 생성자 함수
Number("0")
Number("-1")
Number("10.53")
// 2. parseInt, parseFloat 함수
parseInt("0");
parseInt("-1");
parseFloat("10.53");
// 3.단항 산술 연산자
+'0';
+'-1';
+'10.53';
+true; // 1
+false; // 0
// 4. * 산술연산자를 이용
'0' * 1;
'-1' * 1;
'10.53 * 1';
true * 1; // 1
false * 1; // 0불리언 타입변환
- Boolean 생성자 함수 new 연산자 없이 호출
- ! 부정 논리 연산자를 두 번 사용
// 1. Boolean 생성자 함수
Boolean("x"); // true
Boolean(""); // false
Boolean("false"); // true
Boolean(0); // false
Boolean(1); // true
Boolean(NaN); // false
Boolean(Infinity); // true
Boolean(null) // false
Boolean(undefined) // false
Boolean({}); // true
Boolean([]); // true
// 2. ! 부정 논리 연산자를 두번 사용
!!'x'; // true
!!''; // false
!!'false'; // true
!!0; // false;
!!1; // true;
!!NaN; // false;
!!Infinity; // true
!!null; // false
!!undefined; // false
!!{}; // true
!![]; // false단축평가
논리 연산자를 사용한 단축 평가
- 논리합(||) 또는 논리곱(&&) 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환
- 표현식을 평가하는 도중에 평가결과가 확정된 경우 나머지 평가 과정을 생략
true || anything -> ture
false || anything -> anything
true && anyting -> anything
false && anyting -> false
var done = true;
var message = '';
// 주어진 조건이 true 일 때
if (done) message = '완료';
// if 문은 단축 평가로 대체 가능
// done true라면 완료
message = done && '완료';
// 주어진 조건이 false 일 때
var done = false;
var message = '';
if (!done) message = '미완료';
// done false라면 미완료
message = done || '미완료';
//삼항 조건 연산자
var done = false;
var message = '';
message = done ? '완료' : '미완료';객체를 가르키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조
var elem = null;
var value = elem.value; //error
//단축 평가
var value = elem && elem.value; // null;함수 매개변수에 기본값을 설정할 때
함수를 호출할 때 인수를 전달하지 않으면 매개변수에 undefined가 할당
function getStringLength(str) {
str = str || '';
return str.length;
}
getStringLength(); // 0
getStringLength('hi'); // 2
//ES6 매개변수 기본값 설정
function getStringLength(str = '') {
return str.length;
}옵셔널 체이닝 연산자
Es11에서 도입된 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined 경우 undefined를 반환, 그렇지 않으면 우항의 프로퍼티 참조
var elem = null;
var value = elem?.value; // undefined
var value = elem && elem.value // unedefined 동일논리 연산자 (&&)
- 좌항 피연산자가 false로 평가되는 Falsy 값(false, undefined, null, 0, -0, NAN, '')이면 좌항 피연산자를 그대로 반환 하지만 0 이나 ''은 객체로 평가될 수 있음
var str = '';
var length = str && str.length; // '' 옵셔널 체이닝 연산자 (.?)
- 좌항 피연산자가 false로 평가되는 Falsy 값(false, undefined, null, 0, -0, NAN, '')이라도 null 또는 nudefined가 아니면 우항의 프로퍼티를 참조
var str = '';
var length = str?.length; // 0null 병합 연산자
- es11에서 도입된 null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환, 그렇지 않으면 좌항의 피연산자를 반환
- null 병합 연산자 ?? 는 변수에 기본값을 설정할 때 유용
null 병합 연산자(??)
- 좌항 피연산자가 false로 평가되는 Falsy 값(false, undefined, null, 0, -0, NAN, '')이라도 null 또는 nudefined가 아니면 좌항의 피연산자를 그대로 반환
var foo = null ?? 'default string'; // default string
var foo = '' || 'default string'; // default string
var foo = '' ?? 'default string'; // ''
📖 참고도서 : 모던 자바스크립트 Deep Dive 자바스크립트의 기본 개념과 동작 원리 / 이웅모 저 | 위키북스
혼신의 힘을 다하다 🤷♂️