모던 자바스크립트 - 타입 변환과 단축 평가

1. 타입변환: 값의 타입을 변환하는 것으로 명시적 타입 변환과 암묵적 타입 변환이 있다. 구분 기준은 개발자의 의도성이다.

개발자의 의도성이라는 상당히 주관적인 기준을 가지고 명시적이냐 암묵적이냐를 판단하기 때문에 특정 방법이 명시적 타입 변환이다 또는 암묵적 타입 변환이다 하는 것은 의미가 없다고 생각한다.

따라서 이론적으로만 명시적 타입 변환과 암묵적 타입 변환이 있다고만 이해하고 아래의 설명에서는 별도로 구분짓지 않고 설명할 것이다.

1-1. 문자열 타입으로 변환

• String 생성자 함수(이게 뭔지는 21장에서) new 없이 사용하기.
• toString 메서드 사용하기.
• 문자열 연결 연산자(+) 사용하기.
• 템플릿 리터럴(`) 표현식 삽입하기.

// 1. String 생성자 함수 new 연산자 없이 사용하기

// 숫자 -> 문자열 타입
String(1); // "1"
String(NaN); // "NaN"
String(Infinity); // "Infinity"

// 불리언 -> 문자열 타입
String(true); // "true"
String(false); // "false"

// 2. 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"

//null -> 문자열 타입
null + '' // "null"

//undefined  -> 문자열 타입
undefined + '' // "undefined"

//심벌타입 -> 문자열 타입
(Symbol()) + '' // @@심벌은 문자열로 변환이 안됨@@

//객체 타입-> 문자열 타입 (경우에 따라 상당히 달라짐)
({}) + ''; // [object object]

// 4. 템플릿 리터럴 표현식 삽입

`1 + 1 = ${1 + 1}`

 

번외: .toString() vs String() : null, undefined에 대해서 적용하면 toString은 에러가 난다. 범용성 측면에서 String 승

 

1-2. 숫자 타입으로 변환

• Number 생성자 함수를 new 연산자 없이 사용
• parseInt, parseFloat 함수 사용하는 방법(문자열만 숫자 타입으로 변환 가능)
• + 단항 산술 연산자(산술이 목적인 연산자)를 이용하는 방법
• *, /, <> 연산자를 이용하는 방법. 비교 연산자는 불리언 값을 만들기 위해 대소 비교를 하는 역할 떄문에 숫자타입으로 형변환한다.

// 1. Number 생성자 함수 new 연산자 없이 사용하기

// 문자열 -> 숫자 타입
Number('1'); // 1

// 불리언 -> 숫자 타입
Number(true); // 1
Number(false); // 0

// 2. parseInt, parseFloat 함수를 사용하기(문자열만 가능)

// 문자열 -> 숫자 타입
parseInt('1') // 1
parseFloat('10.53') //10.53

// 3. + 단항 산술 연산자 이용하기

//문자열 -> 숫자 타입
+'0'; // 0

// 불리언 -> 숫자 타입
+true; // 1
+false; // 0

// null 타입
+null // 0

//undefined 타입
+undefined // NaN

// 심벌 타입
+Symbol() // 에러나옴(심벌에서 숫자타입 못바꿈)

// 객체 타입
+{} // NaN

// 4. *, -, /, <> 연산자 이용

// 문자열 -> 숫자 타입
'0' * 1; // 0
1 - '1'; // 0
1 / '10'; // 0.1
1 < '0'; // false

// 불리언 -> 숫자 타입
false * 1; // 0
true - 1; // 0
true / 1; // 1
true < '0'; // false

 

1-3. 불리언 타입으로 변환

• 조건문, 반복문, 삼항 연산자의 조건식
• Boolean 생성자 함수를 new 연산자 없이 호출
• !! 부정 논리 연산자 두번 사용하기.

// 1. 조건식

if('') //false
if(0) // false
if('str') // true
if(null) // false

//falsy 값(false로 평가되는 값들)들 이외에는 전부 truthy값(true로 평가되는 값들)들이다. 아래는 falsy값들
// false
// undefined
// null
// 0, -0
// NaN
// ''

// 2. Boolean 생성자 함수 사용

//문자열 -> 불리언
Boolean('x'); // true
Boolean(''); // false

//숫자 -> 불리언
Boolean(0); // false
Boolean(1); // true
Boolean(NaN); //false
Boolean(Infinity); // true

//null -> 불리언
Boolean(null) // false

//undefined -> 불리언
Boolean(undefined) // false

//객체타입 -> 불리언
Boolean({}) // true

//3. !! 부정 논리 연산자 두번

//문자열 -> 불리언
!!'x'; // true
!!''; // false

//숫자 -> 불리언
!!0; // false
!!1; // true
!!NaN; //false
!!Infinity; // true

//null -> 불리언
!!null // false

//undefined -> 불리언
!!undefined // false

//객체타입 -> 불리언
!!{} // true

 

2. 타입 변환은 값의 직접 변경이 아니라 타입만 변환한다는 점을 주의하자. 

const a = 10;

// 아래 결과가 a 변수의 값인 10을 바꾸진 않는다.
a.toString();

암묵적 타입 변환이 명백히 들어나지 않는다고 해서 사용하지 않아야 하는 것이 아니다. 중요한 것은 예측 가능한 코드를 만드는 것이다.

 

3. 단축평가: 논리곱(&&) 연산자와 논리합(||) 연산자를 통해서 피연산자를 불리언 타입으로 변환하지 않고 그대로 반환하는 방법이다. 평가결과가 계산 중간에 확정되면 나머지 평가과정을 생략하는 방법이다.

 

true || anything // true 에서 멈춤(뒤는 보나마나)
false || anything // anything 까지 끝까지 감
true && anything // anything 까지 끝까지 감
false && anything // false에서 멈춤(뒤는 보나마나)

// 예시

'반원재' || 'ㅁ나ㅓ옴니ㅏ오미노이ㅏ' // 반원재
0 || '이규리' // 이규리
'반원재' && '이규리' // 이규리
null && '반원재' // null

 

4. 단축평가 언제 사용하는가? 

• if 문 간단하게 대체하고 싶을 때

const a = '반원재';
let b = true;

if(a) {
	b = false;
}

// 아래처럼 대체 가능
b = a && false;

if(!a) {
	b = true;
}

// 아래처럼 대체 가능
b = a || true;

• 객체가 null 또는 undefined일 수도 있는데 객체의 property를 참조할 때

const a = undefined;

console.log(a.name); //  에러..

console.log(a && a.name); // undefined

• 어떤 변수가 null 또는 undefined일 떄 특정 값을 주고 싶을 떄(책과 다르게 감).

let a = undefined;

a = a || '';

 

5. 옵셔널 체이닝 연산자 (?.): 좌항의 피연산자가 null 또는 undefined일 경우 undefined 반환, 아니면 우항의 프로퍼티 참조 진행한다. 객체가 undefined, null인지 아닌지 체크할 때 유용하다. 업무에서도 굉장히 많이 쓰고 있다. 

 

let a = null;

console.log(a?.name); // undefined

a = {name: '반원재'};

console.log(a?.name); // '반원재'

 

&&과의 차이점은 &&은 좌항이 falsy이면 우항까지 접근하지 못하지만 ?.는 null 또는 undefined만 아니면 우항에 접근이 가능하다.

 

const a = '';

console.log(a && a.length); // ''

console.log(a?.length); // 0

 

6. null 병합 연산자 (??) : 좌항이 null 또는 undefined인 경우 우항 까지 진행, 아니면 좌항까지만. 변수의 기본값을 설정할 떄 유용하다.

const a = null ?? '반원재' // 반원재

 

|| 과의 차이점은 || 은 좌항이 falsy이어도 우항까지 접근하지만 ??는 null 또는 undefined만 아니면 좌항까지만 가고 멈춘다.

 

const a = '';

console.log(a || '반원재'); // '반원재'

console.log(a ?? '반원재'); // ''