[JS] Type coercion & Short-circuit evaluation

1. 타입 변환

1) 명시적 타입 변환 (explicit coercion)

개발자가 의도적으로 값의 타입을 변환하는 것.

// 1) 문자열 타입으로 변환
const num = 10;
const str1 = num.toString(); 
const str2 = String(num);
console.log(typeof str1, str1, str2, num);  // string '10' '10' 10

// 2) 숫자 타입으로 변환
Number('0');  // 0
Number(true);  // 1
parseInt('10.2')  // 10
parseFloat('10.2')  // 10.2
false * 1;  // 0

// 3) 불리언 타입으로 변환
Boolean('');  // false
!!'x';  // true
!!null;  // false
// ! 부정 논리 연산자를 두번 사용하면 불리언 타입이 아닌 값을 불리언 타입으로 변환.

2) 암묵적 타입 변환 (implicit coercion)

개발자의 의도와는 상관없이 표현식을 평가하는 도중, 자바스크립트 엔진에 의해 자동으로 타입이 변환되는 것. 타입 변환된 결과를 예측할 수 있어야 함.

// 1) 문자열 타입으로 변환
1 + '2'  // '12' 
// '+' 연산자는 문자열 연결 연산자이므로, 문자열이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환

`1 + 1 = ${1 + 1}`  // '1 + 1 = 2' 
// 템플릿 리터럴 표현식은 평가 결과를 문자열로 변환

1 + ''  // '1'
true + ''  // 'true'
[] + ''  // ''

// 2) 숫자 타입으로 변환
1 * '10'  // 10
1 > '0'  // true
+null  +[] +false  // 0
+{}  +'string'  // NaN
// 산술 연산자이므로 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환
// 피연산자를 숫자 타입으로 변환할 수 없을 때는 평가결과가 NaN

// 3) 불리언 타입으로 변환
if ('') console.log('1');
if ('str') console.log('2');
// 2
// 불리언 타입이 아닌 값을 Truthy 또는 Falsy 값으로 구분.
// Falsy 한 값: false, undefined, null, 0, -0, NaN, ''

2. 단축 평가

피연산자를 타입 변환하지 않고, 그대로 반환하는 것. 표현식을 평가하는 도중, 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것.

1) 논리 연산자 ( && / || )

논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가됨. 즉, 피연산자를 타입 변환하지 않고 그대로 반환. (좌항 -> 우항으로 평가!!)

// 1) 논리곱: 두 개의 피연산자가 모두 true일 때 true를 반환.
'cat' && 'dog'  // 'dog' 
'cat' && 0   // 0 
'cat' && false  // false

// 2) 논리합: 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환.
'cat' || 'dog'  // 'cat'
0 || 'dog'  // 'dog'
false || 'dog'  // 'dog'

// 사용 예시)
// 1) Truthy한 값일 때 무언가를 해야한다면 논리곱 사용
const done = true;
// if 문 사용 시
if (done) message = '완료';
// 단축 평가 사용 시
message = done && '완료';

// 2) Falsy한 값일 때 무언가를 해야한다면 논리합 사용
const done = false;
if (!done) message = '미완료';
message = done || '미완료';

// 참고 - 삼항연산자는 if else 문을 대체
message = done ? '완료' : '미완료';

// 3) 객체의 프로퍼티를 참조할 때
const obj = null;
const value = obj.value;  // obj가 null/undefined인 경우 타입 에러 발생

const value = obj && obj.value;  // null

// 4) 함수 매개변수에 기본값 설정
function getStringLength(str) {
  str = str || '';  // undefined로 인해 발생하는 에러 방지
  return str.length;
}
// es6 매개변수 기본값 설정
function getStringLength(str = '') {
  return str.length;
}

2) 옵셔널 체이닝 연산자 ( ?. )

좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
( &&의 경우 좌항 피연산자가 falsy 값이면 연산을 멈추고 좌항 피연산자를 반환하는데, 옵셔널 체이닝 연산자는 좌항 피연산자가 null/undefined를 제외한 falsy 값이라도 우항의 프로퍼티 참조를 이어간다.)

const obj = null;
const value = obj?.value;
console.log(value);  // undefined

const str = '';
const length = str?.length;
console.log(length);  // 0

3) null 병합 연산자

좌항의 피연산자가 null/undefined인 경우, 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. 변수에 기본값을 설정할 때 유용.

const str = null ?? 'default string';
console.log(str);  // 'default string'

// || 연산자로도 가능하지만, 만약 falsy 값 중 0이나 ''도 기본값으로도 유효하다면, ??를 써야한다.
const str = '' || 'default string';
console.log(str);  // 'default string'

const str = '' ?? 'defualt string';
console.log(str);  // ''