[Deep dive] 9장 타입 변환과 단축 평가

9.1 타입 변환이란?

 

명시적 타입 변환(explicit coercion)

- 타입 캐스팅(type casting)

- 개발자가 의도적으로 값의 타입을 변환

var x = 10;

//명시적 타입 변환
//숫자를 문자열로 타입 캐스팅
var str = x.toString();
console.log(typeof str, str); //string 10

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

 

암묵적 타입 변환(implicit coercion)

- 타입 강제 변환(type coercion)

- 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입 자동 변환

- 기존 변수 값을 재할당하여 변경하는 것이 아님

- 피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한번 사용하고 버림

var x =10;

//암묵적 타입 변환
//문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성
var str = x+'';
console.log(typeof str, str); //string 10

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

- 원시 값은 변경 불가능한 값(immuatable value)이므로 변경 불가

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

 

 

9.2 암묵적 타입 변환

 

9.2.1 문자열 타입으로 변환

 

1+'2' // "12"

- + 연산자는 피연산자 중 하나 이상이 문자열이므로 문자열 연결 연산자로 동작

- 문자열 연결 연산자의 역할은 문자열 값을 만드는 것

- 문자열 연결 연산자의 모든 피연산자는 코드의 문맥상 모두 문자열 타입이어야 함

 -> 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환

 

 

9.2.2 숫자 타입으로 변환

 

1 - '1' //0
1 * '10' //10
1/ 'one' //NaN

- 산술 연산자의 역할은 숫자 값을 만드는 것

- 산술 연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입이어야 함

 -> 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환

- 피연산자를 숫자 타입으로 변환할 수 없는 경우의 표현식의 평가 결과는 NaN

 

'1' > 0 // true

- 비교 연산자의 역할은 불리언 값을 만드는 것

- > 비교 연산자는 피연산자의 크기르 비교하므로 모든 피연산자는 코드의 문맥상 모두 숫자 타입이어야 함

  -> 숫자 타입이 아닌 피연산자를 숫자타입으로 암묵적 타입 변환

 

- + 단항 연산자는 피연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환

//문자열 타입
+'' //0
+'0' //0
+'1' // 1
+'string'  //NaN

//불리언 타입
+ture //1
+false //0

//null 타입
+null //0

//undefined 타입
+undefined //NaN

//심벌 타입
+Symbol() //TypeError

//객체 타입
+{} //NaN
+[] //0
+[10,20] //NaN
+(function(){}) //NaN

 

9.2.3 불리언 타입으로 변환

 

if('') console.log(x);

- 제어문 또는 삼항 조건 연산자의 조건식은 불리언 값으로 평가되어야 하는 표현식임

- 불리언 타입이 아닌 값을 Truthly 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분하여

암묵적 타입 변환

 

-Falsy값

 1) false

 2) undefined

 3) null

 4) 0,-0

 5) NaN

 6) ' ' (빈 문자열)

 

-Truthly 값

 - Falsy값 외의 모든 값

 

 

9.3 명시적 타입 변환

 

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

2) 빌트인 메서드 사용

3) 암묵적 타입 변환 이용

 

9.3.1 문자열 타입으로 변환

 

- 문자열 타입이 아닌 값을 문자열 타입으로 

 

1) String 생성자 함수를 new 연산자 없이 호출

2) Object.prototype.toString 메서드를 사용 

3) 문자열 연결 연산자 사용

//1.String 생성자 함수를 new 연산자 없이 호출
//숫자 타입 -> 문자열 타입
String(1); //"1"
String(NaN); //"NaN"
String(Infinity); //"Infinity"
//불리언 타입 -> 문자열 타입
String(true); // "ture"
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"

 

9.3.2 숫자 타입으로 변환

 

- 숫자 타입이 아닌 값을 숫자 타입으로 

 

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
Number(false); //0

//2.parseInt, parseFloat 함수를 사용
parseInt('0'); //0
parseInt('-1'); //-1
parseInt('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

 

9.3.3 불리언 타입으로 변환

 

- 불리언 타입이 아닌 값을 불리언 타입으로 

 

1) Boolean 생성자 함수를 new 연산자 없이 호출

2) ! 부정 논리 연산자를 두 번 사용

 

//1.Boolean 생성자 함수를 new 연산자 없이 호출
//문자열 타입 -> 불리언 타입
Boolean('x'); //true
Boolean(''); //false
Boolean('false'); //true
//숫자 타입-> 불리언 타입
Boolean(0); //false
Boolean(1); //true
Booelean(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
//객체 타입 -> 불리언 타입
!!{}; //true
!![]; //true

 

9.4 단축 평가 

 

9.4.1 논리 연산자를 사용한 단축 평가 

 

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

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

 

1) 논리곱 연산자(&&)

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

 - 두 개의 피연산자가 모두 true로 평가될 때 true를 반환

 - 좌항에서 우항으로 평가 진행

 - 첫 번째 피연산자 'cat'은 Truthy 값이므로 true로 평가 

 - 두 번째 피연산자가 평가 결과를 결정

 - 논리 연산의 결과를 결정하는 두번째 피연산자. 즉 문자열 'Dog'를 그대로 반환

 

2) 논리합 연산자(||)

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

- 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환

- 좌항에서 우항으로 평가진행

- 첫 번째 피연산자 'Cat'은 Truthy 값이므로 true로 평가 

- 두 번째 피연산자 평가 안해도  표현식 평가 가능

- 논리 연산의 결과를 결정한 첫 번째 피연산자, 즉 문자열 'Cat'를 그대로 반환

 

3) 단축 평가(short-circuit evaluation)

 

- 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것

- 단축 평가를 사용하면 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 = '미완료';

//done이 false라면 message에 '미완료'를 할당
message = done || '미완료';
console.log(message); //미완료

 

9.4.2 옵셔널 체이닝 연산자 

 

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

- ?.

- 좌항의 피연산자가 null 또는 undefined인 경우  undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어나감

- 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용

var elem = null;

var value = elem?.value;
console.log(value); //undefined

- 옵셔널 체이닝 연산자 ?.가 도입되기 이전에는 논리 연산자 &&를 사용한 단축 평가를 통해 변수가 null인지 undefined인지 확인

var elem = null;

//elem이 Falsy값이면 elem으로 평가되고, elem이 Truthly값이면 elem.value로 평가 
var value = elem && elem.value;
console.log(vlaue); //null

- But 0이나 ''가 객체로 평가될때도 있음

var str = '';

//문자열의 길이(length)를 참조 
var length = str && str.length;

//문자열의 길이(lengtth)를 참조하지 못함
console.log(length); // ''

- 옵셔널 체이닝 연산자 ?.는 좌항 피연산자가 Falsy값이더라도 null 또는 undefined가 아니면 

우항의 프로퍼티 참조를 이어나감

var str ='';

//문자열의 길이(length)를 참조 
var length = str?.length;
console.log(length); //0

 

9.4.3 null 병합 연산자 

 

null 병합 연산자 (nullish coalescing)

- ??

- 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고 그렇지 않으면 좌항의 피연산자 반환

- 변수에 기본값 설정할 때 유용

 

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

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

But Falsy값인 0이나 ''도 기본값으로 유효하다면 예기치 않은 동작 발생 가능

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

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

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