타입 변환과 단축 평가

타입 변환과 단축 평가

타입 변환

• 명시적 타입 변환 == 타입 캐스팅
• 암묵적 타입 변환 == 타입 강제 변환(type coercion)

암묵적 타입 변환

• 맥락에 맞춰서 js엔진이 암묵적으로 바꿔줌
• 적절한 암묵적 타입 변환은 가독성에 기여할 수 있음

12 + '' // "12"
true + '' // "true"
NaN + '' // "NaN"
[10,20] + '' // "10,20"
+"32" // 32
+null // 0
+true // 1
+false // 0
+undefined // NaN
+[] // 0
+[1,2] // NaN

• Falsy 값들
  • false
  • undefined
  • null
  • 0, -0
  • NaN
  • '' (빈 문자열)

명시적 타입 변환

• 표준 빌트인 생성자 함수를 new 연산자 없이 호출
• 빌트인 메서드를 사용
• 암묵적 변환 이용

문자열 타입으로 변환

• String 생성자 함수를 new 연산자 없이 호출
• Object.prototype.toString 메서드 사용
• 문자열 연결 연산자 이용

숫자 타입으로 변환

• Number 생성자 함수
• parseInt 혹은 parseFloat 함수 사용(문자열만 숫자 타입으로 변환 가능)
• • 단항 연산자
• • 산술 연산자

불리언 타입으로 변환

• Boolean 생성자 함수
• ! 부정 논리 연산자를 두 번 사용

String(32); // "32"
(32).toString(); // "32"

Number("31"); // 31
parseInt("31"); // 31
+"31"; // 31
"31" * 1; // 31

Boolean('false'); // true
Boolean(''); // false
Boolean(0); // true
Boolean(undefined); // false
Boolean([]); // true
Boolean({}); // true
!![]; // true

단축 평가(short-circuit evaluation)

• 단축 평가 : 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것

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

• 논리 연산의 결과를 결정한 첫 번째 피연산자를 타입 변환하지 않고 그대로 반환
• 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 활용
• 함수 매개 변수에 기본값을 설정할 때 활용

'Cat' || 'Dog'; // 'Cat'
false || 'Dog'; // 'Dog'

let e = null;
//let v = e.value; // TypeError: Cannot read property 'value' of null
let v = e && e.value; // null

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

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

옵셔널 체이닝 연산자

• ES11(ECMAScript2020)에서 도입된 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환, 그렇지 않으면 우항의 프로퍼티 참조를 이어감
• 논리 연산자 &&를 이용한 단축 평가는 좌항의 값이 0이거나 빈 문자열인 경우에도 우항이 아닌 좌항 피연산자를 그대로 반환함.
• 그러나 0이나 빈 문자열은 객체로 평가 될 때도 있으므로 해당 기능은 옵셔널 체이닝 연산자를 사용하는 것을 권장

let e = null;
let v = e?.value; // undefined

let str = '';
let length = str && str.length; // 0이 아닌 ''반환
let len = str?.length; // 0 반환

null 병합 연산자

• ES11(ECMAScript2020)에서 도입된 null 병합(nullish coalescing) 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환, 그렇지 않으면 좌항의 피연산자 반환
• 변수에 기본값을 설정할 때 유용
• 논리 연산자 ||를 이용한 단축 평가는 좌항의 값이 0이거나 빈 문자열인 경우에도 우항이 아닌 좌항 피연산자를 그대로 반환함.
• 그러나 0이나 빈 문자열이 기본 값일 수 있으므로 해당 기능은 null 병합 연산자를 사용하는 것을 권장

let foo = null ?? 'default'; // 'default'
let bar = null || ''; // ''이 아닌 null 할당
let boo = null ?? ''; // '' 할당