09장 타입 변환과 단축 평가

soonrok·2021년 5월 5일
0

자바스크립트 독학

목록 보기
9/48
post-thumbnail

해당 포스팅은 위키북스의 "모던 자바스크립트 Deep Dive"라는 책을 독학하며 기록하는 글입니다.

타입변환이란?

값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있는데, 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라 한다.

또는 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변화된기도 하는데, 이를 암묵적 타입 변환 또는 타입 강제 변환이라 한다.

이때 타입이 변환된다는 것은 기존의 값의 타입이 변환되는 것이 아니라(원시 값은 변경 불가능한 값이다!) 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다.(암묵적 타입 변환의 경우 한 번 사용하고 버린다.)


명시적 타입 변환

  1. 문자열 타입으로 변환
    String 생성자 함수를 new 연산자 없이 호출하는 방법
    Object.prototype.toString 메서드를 사용하는 방법
    문자열 연결 연산자를 이용하는 방법
String(1)	//"1"
String(true)	//"true"
String(NaN)	//"NaN"
(1).toString()	//"1"
(true).toString	//"true"
(NaN).toString	//"NaN"
1 + ''		//"1"
true + ''		//"true"
NaN + ''		//"NaN"
  1. 숫자 타입으로 변환
    Number 생성자 함수를 new 연산자 없이 호출하는 방법
    parseInt, parseFloat 함수를 사용하는 방법(문자열만 가능)
    +, * 단항 산술 연산자를 이용하는 방법
Number('1')	//1
Number('-1')	//-1
Number(true)	//1
Number(false)	//0
parseInt('0')	//0
parseFloat('15.15')	//15.15
+'0'		//0
+'10.10'	//10.10
+true		//1
'0' * 1		//0
'15.15' * 1	//15.15
  1. 불리언 타입으로 변환
    Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
    ! 부정 논리 연산자를 두 번 사용하는 방법
Boolean('false')	//true
Boolean('')		//false
//문자열의 경우 값이 있으면 true, 없으면 false이다.
Boolean(0)		//false
Boolean(NaN)		//false
//숫자 타입의 경우 0과 NaN을 제외한 모든 값이 true이다.
!!'x'		//true
!!'false'	//true
!!''		//false
!!'0'		//false
!!'Infinity'	//true

암묵적 타입 변환

  1. 문자열 타입으로 변환
    + 연산자의 경우 피연산자의 값 중 하나라도 문자열이라면 모든 피연산자를 문자열로 처리한다.
'10' + 2	//102, 2가 '2'로 강제 타입 변환되어 '10'과 '2'를 잇는다.
  1. 숫자 타입으로 변환
    + 를 제외한 모든 산술 연산자는 피연산자로 숫자 타입을 강제하기 때문에 모든 피연산자를 숫자 타입으로 변환하여 처리하며 처리가 안 될 경우 NaN을 반환한다.
1 - '1'		//0, '1'이 1로 강제 타입 변환되어 1 - 1 = 0이 된다,
1 / 'one'	//NaN
  1. 불리언 타입으로 변환
    if문이나 for문의 조건식은 항상 논리적 참/거짓으로 평가되어야 하는 표현식이다.
    따라서 자바스크립트 엔진은 조건식을 평가하여 불리언 타입이 아닌 값을 Truthy값 또는 Falsy값으로 구분하며, 여기서 Truthy값은 true로, Falsy값은 false로 암묵적 타입 변환한다.

    다음은 Falsy로 평가되는 값들이다.
    -> false, undefined, null, 0,-0, NaN, ''(빈 문자열)
    이 외의 모든 값들은 Truthy로 평가된다.


단축 평가

||&& 같은 논리 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다.

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

이때, 만약 우항의 피연산자를 따지지 않고, 좌항의 피연산자만으로 논리 연산 값을 낼 수 있을 때, 우항을 평가 하지 않는 것을 단축 평가라고 한다.

예를 들어 || 연산의 경우 두 개의 피연산자 중 하나의 값만 true라면 true를 반환한다. 따라서 좌항의 값이 true라면 우항을 보지 않고 바로 true를 반환한다. 마찬가지로 &&연산에서 좌항의 값이 false라면 우항의 값을 보지 않고, 바로 false를 반환한다.

이를 응용하면 if문을 대체할 수 있다. 다음의 코드를 보자.

var done = true;
if(done) message = '완료';
//기존의 if문 방식

message = done && '완료';
console.log(message);
//if문을 논리곱연산자를 이용해서 표현한 방식

07장 연산자에서 미처 다 살펴보지 못한 단축평가를 이용한 연사자를 살펴보도록하자.

  1. 옵셔널 체이닝 연산자
    ?. 연산자는 좌항의 값이 null이나 undefined값이라면 undefined를 반환하고 아닐 경우, 우항의 참조를 이어나간다.
var str = null;
var value = str?.length;
console.log(value);	//null

str = '';
value = str?.length;
console.log(value);	//0
  1. null 병합 연산자
    ?? 연산자는 좌항의 값이 null이나 undefined값이라면 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.
var str = null;
var value = str ?? '값이 없습니다.';
console.log(value);	//'값이 없습니다.'

str = '';
var value = str ?? '값이 없습니다.';
console.log(value);	//''
profile
I Will be Relaxed Person

0개의 댓글