09장 타입 변환과 단축 평가

 

09장 타입 변환과 단축 평가

9.1 타입 변환이란?

  자바스크립트의 모든 값은 타입이 있다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라 한다. 반대로, 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다. 이를 암묵적 타입 변환 또는 타입 강제 변환이라 한다. 타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하고 생성된 값으로 표현식을 평가한다. 이때 주의해야 할 점은 새로 생성된 원시 타입의 값이 기존 변수 값에 재할당하여 변경하는 것이 아니라, 한 번만 사용한 후 버리게 된다. (원시 값은 변경 불가능한 값이다.)

 

9.2 암묵적 타입 변환(타입 강제 변환)

  각 연산자 등을 사용할때 반환하고자 하는 값이 있고, 필요한 피연산자의 값이 정해져 있다. 필요한 피연산자의 값이 없다면 자바스크립트 엔진은 암묵적 타입 변환을 통해 필요한 타입의 값을 생성하여 표현식을 평가하게 된다. 암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환한다.

 

9.2.1 문자열 타입으로 변환

1) 문자열 연결 연산자 : 문자열 값을 만들어 냄(그러므로, 피연산자는 문자열이 필요함)

ex) 0 + ' ' : "0"

ex) -0 + ' ' : "0"

2) 템플릿 리터럴 표현식 삽입 : 문자열 값을 만들어 냄(그러므로, 표현식은 문자열이 필요함)

 

9.2.2 숫자 타입으로 변환

1) 산술 연산자 : 숫자 값을 만들어 냄(그러므로, 피연산자는 숫자 값이 필요함)

2) 대/소 관계 비교 연산자 : 불리언 값을 만들어 냄(그러므로, 피연산자는 숫자 값이 필요함)

숫자 값 0 으로 변환되는 값들	숫자 값 1 로 변환되는 값들	숫자 값 NaN 으로 변환되는 값들
빈 문자열	true	빈 문자열이 아닌 문자열(문자열이 숫자인 경우 제외)
빈 배열		빈 배열이 아닌 배열
false		undefined
null		객체

 

9.2.3 불리언 타입으로 변환

  falsy로 평가되어 false로 암묵적 타입 변환이 이뤄지는 값 6가지(이 이외의 모든 값은 truthy로 평가되어 true로 타입 변환이 이뤄진다.)

1) false

2) undefined

3) null

4) 0, -0

5) NaN

6) ' '(빈 문자열)

 

9.3 명시적 타입 변환

  개발자의 의도에 따라 명시적으로 타입을 변경하는 방법은 다양하다.

1) 표준 빌트인 생성자 함수 : 객체를 생성하기 위한 함수(new 연산자와 함께 호출한다.)

2) 표준 빌트인 메서드 : 빌트인 객체의 메서드

3) 암묵적 타입 변환 

 

9.3.1 문자열 타입으로 변환

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

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

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

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

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

//2.object.prototype.toString 메서드를 사용하는 방법
console.log((1).toString());
console.log((NaN).toString());
console.log((Infinity).toString());
console.log((true).toString());
console.log((false).toString());

//3.문자열 연결 연산자를 이용하는 방법
console.log(1 + '');
console.log(NaN + '');
console.log(Infinity + '');

9.3.2 숫자 타입으로 변환

  숫자 타입이 아닌 값을 숫자 타입으로 변환하는 방법이다.

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

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

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

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

//1.Number 생성자 함수를 new 연산자 없이 호출하는 방법
console.log(Number('0'));
console.log(Number('-1'));
console.log(Number('10.53'));
console.log(Number(true));
console.log(Number(false));

//2.parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환이 가능)
console.log(parseInt('0'));
console.log(parseInt('3')); //실수를 넣어도 정수 숫자 값만 반환함
console.log(parseFloat('3.14'));

//3.단항 산술 연산자 + 를 이용하는 방법
console.log(+'10');
console.log(+'3.14');
console.log(+true);
console.log(+false);
console.log(+undefined);
console.log(+null);
console.log(+'hello');
console.log(+'');
console.log(+'53');

//4.이항 산술 연산자  * 를 이용하는 방법
console.log(1 * '1');
console.log(1 * '-1');
console.log(1 * '0');
console.log(1 * '10.53');
console.log(1 * true);
console.log(1 * false);

9.3.3 불리언 타입으로 변환

  불리언 타입이 아닌 값을 불리언 타입으로 변환하는 방법이다.

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

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

//1.Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
//앞서 배운 내용처럼 falsy로 평가되는 6가지를 제외하고는 전부 true값을 반환함
console.log(Boolean('')); //false 
console.log(Boolean(0)); //false 
console.log(Boolean(-0)); //false 
console.log(Boolean(undefined)); //false 
console.log(Boolean(null)); //false 
console.log(Boolean(false)); //false 
console.log(Boolean(NaN)); //false 


//2.부정 논리 연산자 ! 를 두 번 사용하는 방법
console.log(!!'x'); //true
console.log(!!''); //false 
console.log(!!NaN); //false 
console.log(!!undefined); //false 
console.log(!!0); //false 
console.log(!!-0); //false 
console.log(!!null); //false 
console.log(!!false); //false

 

9.4 단축 평가

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

  앞서 배운 논리 연산자 논리곱(&&) 과 논리합(||) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다. 논리곱 연산자의 경우에는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다. 논리합 연사자는 두 개의 피연산자 중 하나만 true로 평가되어도 ture를 반환한다. 논리합 연산자와 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다. 이때 논리곱과 논리합 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다. 이를 단축 평가라고 한다. 즉, 다시 말해 불리언 값이 아닌 피연산자는 불리언 값으로 암묵적 타입 변환이 이뤄져 논리 연산의 표현식이 평가되고, 논리 연산의 결과를 결정짓는 피연산자의 값을 그대로 반환해 주는 것이다.

//논리곱 연산자 &&의 단축평가
console.log('' && 'dog'); // 빈 문자열은 falsy로 평가되므로, 결과를 결정하는 '' 이 반환됨
console.log('cat' && 'dog'); //dog
console.log('cat' && false); //false
console.log(false && 'dog'); //false
console.log(false && false); //첫 번째 피연산자 false

//논리합 연산자 ||의 단축평가
console.log('cat' || 'dog'); //cat
console.log('cat' || false); //cat
console.log(false || 'dog'); //dog
console.log(false || false); //두 번째 피연산자 false

단축 평가를 사용하면 if문을 대체할 수 있다. 

//어떤 조건이 Truthy 값 일 때 무언가를 해야 하는 경우
var done = true;
var message = '';
//if조건문 활용
if(done) message = '완료';
console.log(message); //완료
//논리곱을 활용
message = done && '성공';
console.log(message); //성공


//어떤 조건이 falsy 값 일 때 무언가를 해야 하는 경우
var done = false;
var message1 = '';
//if조건문 활용
if(!done) message1 = '완료';
console.log(message1); //완료
//논리곱을 활용
message1 = done || '성공';
console.log(message1); //성공


//삼항 조건 연산자의 활용
var done = true;
var message2 = '';

if(done) message2 = '완료';
else message2 = '미완료';
console.log(message2); //완료

message2 = done ? '완료' : '미완료'
console.log(message2) //완료

단축 평가는 또한 여러 상황에서 유용하게 사용된다.(자세한 사항은 후술)

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

2)함수 매개변수에 기본값을 설정할 때

 

9.4.2 옵셔널 체이닝 연산자 (?.)

  ES11에서 도입된 옵셔널 체이닝 연사자 (?.)는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다. 옵셔널 체이닝 연산자는 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용하다. 옵셔널 체이닝 연산자가 도입되기 이전에는 논리 연산자 &&를 사용한 단축 평가를 통해 변수가 null 또는 undefined인지 확인했었다.

//논리곱 논리 연산자를 사용해서 변수가 null 또는 undefined가 아닌지 확인하는 경우
var elem = null;
var value = elem && elem.vaule;
console.log(value);

//옵셔널 체이닝 연산자를 사용하여 변수가 null 또는 undefined가 아닌지 확인하는 경우
var elem = null;
var value = elem ?. elem.value;
console.log(value);

옵셔널 체이닝 연산자가 등장한 이유는 논리곱 연산자를 이용하는 경우 좌항의 피연산자가 Falsy 값(null, undefined, 0, -0, false, NaN, '')이면 좌항 피연산자를 그대로 반환한다. 하지만 0이나 ''은 객체로 평가될 때도 있기 때문에 문제가 발생할 수 있다.

 

9.4.3 null 병합 연산자 (??)

  ES11에서 도입된 null 병합 연산자 (??)는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연사자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. null 병합 연산자는 변수에 기본값을 설정할 때 유용하다. null 병합 연산자가 도입되기 이전에는 논리 연산자 ||를 사용한 단축 평가를 통해 변수에 기본값을 설정했다.

//논리합 연산자 ||를 사용하여 변수에 기본값을 설정하는 방법
var foo = null || 'default string';
console.log(foo);

//null 병합 연산자를 사용하여 변수에 기본값을 설정하는 방법
var foo = null ?? 'default string1';
console.log(foo);

null 병합 연산자가 등장한 이유는 논리합 연산자를 이용하는 경우 좌항의 피연산자가 Falsy 값(null, undefined, 0, -0, false, NaN, '')이면 우항 피연산자를 그대로 반환한다. 하지만 0이나 ''도 기본값으로서 유효하다면 문제가 발생할 수 있다.