JS Deep Dive - 타입 변환과 단축 평가

타입 변환

---

명시적 타입 변환

개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라 한다.

var x = 10;

// 명시적 타입 변환
// 숫자를 문자열로 타입 캐스팅한다.
var str = x.toString();
console.log(typeof str, str); // string 10

// x 변수의 값이 변경된 것은 아니다.
console.log(typeod x, x); // number 10


// 문자열 타입으로 변환
String(1); // 1
(1).toString(); // 1
Number('0'); // 0

// 불리언 타입으로 변환
Boolean(''); // false

// 문자열, 숫자, 객체 타입 => 불리언 타입
!!'x'; // true
!!''; // false
!!'false'; // true
!!0; // false
!!{}; // true

암묵적 타입 변환

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

var x = 10;

// 암묵적 타입 변환
// 문자열 연결 연산자는 숫자 타입, x의 값을 바탕으로 새로운 문자열을 생성한다.
var str = x + '';
console.log(typeof str, str); // string 10

// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x);

// 문자열 타입으로 변환
1 + '2' // '12'

// 숫자 타입
0 + '' // '0'
NaN + '' // 'NaN'

// 불리언, null, 객체타입에 ''를 붙일경우 모두 str형으로 변환된다.


// 숫자 타입으로 변환(산술 연산자를 사용)
1 - '1' // 0
+true // 1

//boolean으로 변환(조건문을 이용)
if('')console.log(1); // false

단축 평가

---

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

/* 
	true || anything => true
    false || anything => anything
    true && anything => anything
    false && anything => false
*/

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

예제

var done = true;
var message = '';

if (done) message = '완료';
// 해당 단축 평가로 대체 가능
message = done && '완료';
console.log(message); // 완료

예제 - 삼항 연산자

var done = true;
var message = '';

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

// if ... else 문은 삼항 조건 연산자로 대체 가능하다.
message = done ? '완료' : '미완료';
console.log(message); // 완료

객체를 가리키기를 기대하는 변수가 null 또는 undefined일 경우, 단축 평가를 사용하면 참조시에도 에러가 발생하지 않는다.

var elem = null;
// var value = elem.value; // TypeError 발생
var value = elem && elem.value; // -> null

옵셔널 체이닝 연산자

ES11(ECMAScript2020)에서 도입된 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

var elem = null;

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

예제

var str = '';

// 단축 평가로는 str.length를 참조하지 못할 경우, ''를 반환하였으나, 옵셔널 체이닝 연산자는 Falsy 값이라도 null 또는 undefined가 아닌 우항의 프로퍼티 참조를 이어간다.
var str = '';
var length = str?.length;
console.log(length); // 0

null 병합 연산자

ES11에서 도입된 null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다.

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