9장 타입변환과 단축평가

9.1 타입 변환이란?

var x = 10;

var str = x.toString();
console.log(typeof str, str); // string 10

console.log(typeof x, x); // number 10

타입변환을 하면 값이 변경되지 않는다.

이점은 다시 생각해볼만하다

var x = 10;
var srt = x + '';
console.log(typof str, str); // string 10
console.log(typeof x, x); // number 10

위의 경우는 자바스크립틍 엔진에의해서 의도적으로 바뀐 암묵적 타입변환이다.

이렇게 암묵적타입은 새로운값의 타입을 만들고 단한번 사용하고 버리게된다.

드러나지않게 타입이 자동변환되어 예측가능하기 어렵다.

예측가능한 코드로 만들기위해 코드를 쉽게 이해가능하게끔 하는것도 방법이다.

 

9.2 암묵적 타입 변환

 

9.2.1 문자열 타입으로 변환

자바스크립트 엔진이 문자열타입으로 암묵적 타입변환을 하는것을 알아보자

0 + '' // "0"
-0 + '' // "0"
Infinity + 'Infinity'

// 불리언타입
true + '' // "true"
false + '' // "false"

// null타입
null + ''; // "null"

9.2.2 숫자 타입으로 변환

+ '' // 0
+ '0' // 0
+ 'sting' // NaN
+ true // 1
+ false // 0

자바스크립트 엔진은 + 단항연산자일때 숫자타입으로 변환시킨다.

9.2.3 불리언 타입으로 변환

자바스크립트엔진은 불리언 타입이 아닌값을 truety, falsy 값으로 구분한다.

false
undefined
null
0, -0
NaN
'' (빈문자열)

이값들을 false로 변환된다.

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이다.");

 

9.3 명시적 타입 변환

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

 

9.3.1 문자열 타입으로 변환

	String(1);    //"1"
	String(NaN);  //"NaN"
	String(true); //"true"
	1 + '';       //"1"
	NaN + '';     //"NaN"
	true + '';    //"true"

 

9.3.2 숫자 타입으로 변환

변환하는방법을 다음과같다.

1. Number() 호출하는방법
2. parseInt, parseFloat 함수 사용하는방법

• • 단항 산술 연산자를 이용하는방법
• • 산술 연산자 이용하는방법

Number('0); // 0
Number('-1); // -1
Number(true); // 1

parseInt('0'); // 0
parseInt('-1'); // -1
parseFloat('10.53'); // 10.53

+ "10" // 10
+ true // 1

'0' * 1 // 0
true * 1 // 1

 

9.3.3 불리언 타입으로 변환

1. Boolean() 호출하는방법
2. ! ! 사용하는 방법

Boolean('x') // true
Boolean('false') // ture
Boolean(0) // false
Boolean(null) // false

!!'x'; //true
!!''; //false
!!undefiend // false

 

9.4 단축평가

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

|| && 평과결과는 불리언 값이 아닐수도있다.

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

var elem = null;
var value = elem && elem.value; //null

이렇게 쓰이는것을 프로젝트에서 많이봤는데

if문을 사용해서 undefined채크하는것보다 훨씬 간결하고 괜찮은 방법이였구나 라는 생각이든다.

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

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

// ES6 매개변수 기본값 설정
function getChicken(str = '') {
	return str.length;
}

9.4.2 옵셔널 체이닝 연산자

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

ES11에 도입된 옵셔널 체이닝연산자는 피연산자가 null, undefined경우 undefined를 반환하고

아니면 우항의 프로퍼티 참조를 이어간다.

필자는 이옵셔널 체이닝 연산자를 더많이사용한거같다.

9.4.3 null병합 연산자

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

null 연산자는 변수에 기본값을 설정할때 유용하다.

null또는 undefined 경우 왼쪽을반환, 아니면 오른쪽을 반환한다.

옵셔널체이닌연산자랑 null병합 연산자랑 잘사용해보고싶단 생각이든다.