[JavaScript_DeepDive] 9. 타입 변환과 단축 평가

//심벌타입
(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] }"

#타입변환이란?

-자바스크립트의 모든 값은 타입이 있다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다.

-개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환(explicit coercion)또는 타입 캐스팅(type casting)이라고 한다.

-개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는데 이를 암묵적타입변환(implicit corecion) 또는 타입 강제 변환(type coercion)이라 한다.

-명시적 타입 변환이나 암뭊ㄱ적 타입 변환이 기존 원시 값을 직접 변경하는 것이 아니다

-타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다. 

-암묵적 타입 변환은 기존 변수값을 재할당하여 변경하는것이 아니라 피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한번 사용하고 버린다.

 

#암묵적 타입 변환

-암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환한다.

 

※문자열 타입으로 변환

1 + '2' // → "12"

-피연산자 중 하나 이상이 문자열이면 문자열 연견 연산자로 동작한다. 

-자바스크립트 엔진은 문자열 타입이 아닌 값에 ' '를 더하여 암묵적 타입 변환을 수행하는데 숫자,  불리언, null, undefined, (Symbol()), 객체 타입 모두 해당한다

//심벌타입
(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] }"

 

※숫자타입으로 변환

-자바스크립트 엔진은 산술 연산자 표현식을 평가하기 위해 산술 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다.

-비교연산자의 역할은 불리언 값을 만드는 것이지만 피연산자의 크기를 비교하므로 모든 연산자가 숫자 타입이여야 한다. 자바스크립트 엔진이 이를 비교해서 숫자타입이 아닌 것을 암묵적 타입변환한다.

//문자열 타입
+''		//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

 

※불리언타입으로 변환

-자바스크립트 엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적 타입변환한다.

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 값(거짓으로 평가되는 값)을 구분한다. (위코드 1, 3, 5 는 false, 2, 4는 true

-false / undefined / null / 0, -0 / NaN / ' '(빈문자열) 은 false로 평가한다. 여기에 !를 붙이면 true로 평가

 

#명시적 타입 변환

-표준 빌트인 생성자 함수(String, Number, Boolean)를 new연산자 없이 호출하는 방법과 빌트인 메서드를 사용하는 방법, 암묵적 타입 변환을 이용하는 방법이 있다.

-표준 빌트인 생성자 함수와 표준 빌트인 메서드는 자바스크립트에서 기본 제공하는 함수다. 

-표준빌트인 생성자 함수는 객체를 생성하기 위한 함수이며 new연산자와 함께 호출한다.

-표준 빌트인 메서드는 자바스크립트에서 기본 제공하는 빌트인 객체의 메서드이다.

 

※문자열 타입으로 변환

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

1. String 생성자 함수를 new연산자 없이 호출하는 방법

2. Object.prototype.toString 메서드를 이용하는 방법

3. 문자열 연결 연산자를 이용하는 방법

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

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

//3. 문자열 연결 연산자를 이용하는 방법
//숫자 → 문자열
1 + '';	//"1"
NaN + '';	//"NaN"
Infinity + '';	//"Infinity"

※숫자타입으로 변환

-숫자 타입이 아닌 값을 숫자 타입으로 변환하는 방법은 다음과 같다.

1. Number 생성자 함수를 new연산자 없이 호출하는 방법

2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능)

3. +단항 산술 연산자를 이용하는 방법

4. * 산술 연산자를 이용하는 방법

// 1.Number 생성자 함수를 new연산자 없이 호출하는 방법
//문자열 타입 → 숫자 타입
Number('0');	//0
Number('-1');	//-1
Number('10.53');	//10.53
//불리언타입 → 숫자타입
Number(true); //1

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

// 3.+단항 산술자를 이용하는방법(*산술 연산자도 동일하게 사용)
//문자타입 → 숫자타입
+'0';	//0
+'10.53'	//10.53
//불리언타입 → 숫자타입
+true	//1

※불리언 타입으로 변환

1. Boolean 생성자 함수를 new연산자 없이 호출하는 방법

2. ! 부정논리 연산자를 두번 사용하는 방법

// 1.Boolean 생성자 함수를 new연산자 없이 호출하는 방법
//문자열타입 → 불리언타입
Boolean('x');	//true
Boolean('');	//false
Booelan('false')	//true
//숫자타입 → 불리언타입(null, undefined 타입은 false)
Boolean(0);	//false
Boolean(1);	//true
Boolean(NaN);	//FALSE
Boolean(Infinity)	//true
//객체타입 → 불리언타입
Boolean({});	//true
Boolean([]);	//true

// 2.!부정논리 연산자를 두번 사용하는 방법
//문자열타입 → 불리언타입
!!'x';	//true
!!'';	//false
!!'false';	//true
//숫자타입 → 불리언타입(null, undefined 타입은 false)
!!0;	//false
!!1;	//true
!!NaN;	//false
!!Infinity	//true
//객체타입 → 불리언타입
!!{};	//true
!![];	//true

 

#단축 평가

-논리합(||) 논리곱(&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다

-논리합(||) 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.

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

-논리곱(&&) 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다.

-논리곱 연산자는 좌항에서 우항으로 평가가 진행된다.

-좌항 'Cat'이 true값이고 남은 우항 'Dog'도 true값이면 마지막으로 평가되는 우항인 'Dog'를 반환한다.

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

-논리합( || ) 연산자는 두개의 피연산자 중 하나만 true로 평가되어도 true를 반환한다.

-좌항의 'Cat'가 true로 평가되었기 때문에 우항 까지 갈 필요 없이 'Cat'가 반환된다.

-단축평가(short-circuit evaluation) : 논리곱(&&) 연산자와 논리합(||)연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다.

단축 평가 표현식	평가 결과
true || anything	true
false || anything	anything
true && anything	anything
false && anything	false(둘 중 하나가 false 이면 false)

 -단축 평가를 사용하면 if문을 대체할 수 있다. 어떤 조건이 Truthy 값일 때 무언가를 해야한다면 논리곱(&&)연산자 표현식으로 if문을 대체할 수 있다.

-조건이 Falsy값일 때 무엇을 해야 한다면 논리합(||)연산자를 표현식으로 대체할 수 있다.

var done = true;
var message = '';

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

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

 

-객체는 키와 값으로 구성된 프로퍼티의 집합이다. 만약 객체를 가리키기는 기대하는 변수의 값이 객체가 아니라 null 또는 undefined인 경우 객체의 프로퍼티를 참조함녀 타입에러 TypeError가 발생한다. 이 떄 단축 평가를 사용하면 에러를 발생시키지 않는다. 

var elem = null;
var value = elem.value;	//TypeError : Cannot read property 'value' of null

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

-함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당된다. 이때 단축 평가를 사용해 매개변수의 기본값을 설정하면 undefined로 인해 발생할 수 잇는 에러를 방지할 수 있다.

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

getStringLength();	//0 - 인수를 전달하지 않은 상태에 undefined를 발생시키지 않아 에러 방지
getStringLength('hi');	//2

※옵셔널 체이닝 연산자(optional chaining)

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

-user?.adress?.street로 주소를 읽으면 아래와 같이 user객체가 존재하지 않더라도 에러가 발생하지 않는다.

let user = {};	//주소 정보가 없는 사용자
alert(user.address.street);	//TypeError : Cannot read property 'street' of undefined

let user = {};	//주소 정보가 없는 사용자
alert(user?.address?.street);	//undefined, 에러가 발생하지 않습니다.
alert(user?.address);	//undefined
alert(user?.address.street);	//undefined

-논리연산자 &&는 좌항 피연산자가 false로 평가 되는 Falsy값(false, undefined, null, 0, -0, NaN, '')이면 좌항 피연산자를 그대로 반환한다. 

-옵셔널체이닝 연산자 ?.는 좌항 피연산자가 Falsy값(false, undefined, null, 0, -0, NaN, '')이라도 null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.

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

※null 병합 연산자

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

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

-null병합 연산자??가 도입되기 이전에는 논리 연산자 ||를 사용한 단축평가를 통해 변수에 기본값을 설정했다.

-논리 연산자 ||를 사용한 단축 평가의 경우 좌항의 피연산자가 false로 평가되는 Falsy값이면 우항의 피연산자를 반환한다. 먄약 Falsy값인 0이나 ''도 기본값으로서 유효하다면 예기치 않은 동작이 발생할 수 있다.

-null병합 연산자??는 좌항의 피연산자가 false로 평가되는 Falsy값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 그대로 반환한다.

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

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