[모던 자바스크립트]'타입변환과 단축평가' 알아보기!

 

자바스크립트의 모든 값에는 타입이 있다.

값의 타입을 개발자의 의도에 따라 변환하는 것을 '명시적 타입 변환' 또는 '타입 캐스팅'이라고 한다.

let a = 7;

let str = x.toString() //숫자를 문자열로 명시적 타입 변환 혹은 타입 캐스팅
console.log(type of str, str) // string, 7

반면, 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되기도 하는데 이를 '암묵적 타입 변환' 또는 '타입 강제 변환' 이라고 한다.

let a = 7;

let str = a + ''; 
console.log(type of str, str) // string, 7

여기서 주의해야할 점, 명시적 타입 변환이나 암묵적 타입 변환이 기존 변수 값을 재할당하여 변경하는 것은 아니다.

* a의 값은 변하지 않는 다는 점

 

암묵적 타입 변환

1. 문자열 타입으로 변환

3 * "3" // 9
1 + "2" + 1 // 121

true + true // 2
10 - true // 9

const foo = {
	valueOf: () => 2
}
3 + foo // 5
4 * foo // 8

const bar = {
	toString: () => "promise is a boy :)"
}

1 + bar // "1 promise is a boy :)"

4 * [] // 0
4 * [2] // 8
4 + [2] // "42"
4 + [1, 2] // "41, 2"
4 * [1, 2] // NaN

"string" ? 4 : 1 // 4
undefined ? 4 : 1 // 1

2. 숫자 타입으로 변환

3 * "3" // 3 * 3
3 * Number("3") // 3 * 3
Number("5") // 5

Number("1.") // 1
Number("1.34") // 1.34
Number("0") // 0
Number("012") // 12

Number("1,") // NaN
Number("1 + 1") // NaN
Number("1a") // NaN
Number("la") // NaN
Number("one") // NaN
Nuber("text") // NaN

3. 불리언 타입으로 변환

if('') console.log('1') // undefined
if(true) console.log('2')
if(0) console.log('3') // 
if(1) consoloe.log('4') // 1은 true로 평가
if('str') console.log('5') // 'str' true로 평가
if(null) console.log('6') // undefined

// 2, 4, 5

명시적 타입 변환

1. 문자열 타입으로 변환

// 1. String 생성자 함수를 new 연산자 없이 호출
String(1) // '1'
String(true) // 'true'
String(NaN) // 'NaN'

// 2. Object.prototype.toString 메서드를 사용
(1).toString(); // '1'
(NaN).toString(); // 'NaN'
(true).toString(); // 'true'

// 암묵적 타입 변환 활용 : 문자열 연결 연산자
// 숫자 타입 -> 문자열
1 + '' // '1'

2. 숫자 타입으로 변환

// 1. Number 생성자 함수 사용
Number('0') // 0
Number(true) // 1
Number(false) // 0

// 2. parseInt, parseFloat 함수 사용
parseInt('0') // 0
parseFloat('10.53') // 10.53

// 암묵적 타입 변환 활용 : +단항 산술 연산자 사용
+'0' // 0
+true // 1
+false // 0

// 암묵적 타입 변환 활용 : *산술 연산자 사용
'0' * 1; // 0
true * 1 // 1
false * 1 // 0

3. 불리언 타입으로 변환

// 1. Boolean 생성자 함수
Boolean('x') // true
Boolean('') //false
Boolean('false') // true

Boolean(0) // false
Boolean(1) // true

Boolean({}) // true
Boolean([]) // true

// 2. ! 부정 논리 연산자를 두 번 사용하는 방법
!!'x'; // true
!!'' // false
!!'false' // true
!!0; // false
!!1; // true
!!{} // true
!![] // true

 

단축 평가

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

true || anything // true
false || anything // anything
true && anything // anything
false && anything // false


var done = true;
var message = '';

//주어진 조건이 true일 때
if (done) message = '완료';

//done이 true라면 message에 '완료'할당
message = done && '완료';
console.log(message); //완료

2. 옵셔널 체이닝 연산자

var elem = null;

// elem이 null또는 undefined이면 undefined 반환, 그렇지 않으면 우항의 프로퍼티 참조를 이어감
var value = elem?.value;
console.log(value); // undefined


var elem = null;

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

3. null 병합 연산자

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

null 병합 연산자 ??가 도입되기 전에는 논리 연산자 || 를 사용한 단축 평가를 통해 변수에 기본값을 설정했다. 논리 연산자 ||를 사용한 단축 평가의 경우 좌항의 피연산자가 false로 평가되는 Falsy 값이면 우항의 피연산자를 반환한다. 만약 Falsy 값인 0이나 ''도 기본값으로서 유효하다면 예기치않은 동작이 발생할 수 있다.

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

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

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