타입 변환

자바스크립트에서 타입 변환이란 원시값을 바탕으로 새로운 원시값을 생성하는 것이다.
기존 원시값이 변경되는 것이 아니다! (원시값은 변경 불가능)

암묵적 타입 변환 (implicit coercion)

자바스크립트 엔진이 개발자의 의도와 상관없이 코드 문맥에 따라 강제로 타입을 변환하는 것을 말한다.

암묵적 타입 변환이라도 개발자가 의도한 것이라면 항상 나쁜 것은 아니다. 코드에서 중요한 것은 의도대로 동작하게 하는 것이다.

문자열 타입 변환

• + 이항연산자의 피연산자 중 하나라도 문자열이 있다면 나머지 피연산자는 문자열로 암묵적 형변환 된다.
  (문맥상 +를 산술 연산자가 아니라 문자열 연결 연산자로 해석하기 때문)

숫자 타입 변환

• +를 단항연산자로 사용할 경우 피연산자를 숫자 타입으로 암묵적 형변환 한다.
• -, *, / 등 무조건 산술연산자로 쓰이는 이항연산자는 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 형변환 한다.
  만약 변환이 불가능한 경우 NaN으로 평가한다.
• <, > 등 비교 연산자는 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 형변환한다.
  피연산자 중 하나라도 NaN인 경우 평가 결과는 false이다.

불리언 타입 변환

• 조건식에 있는 표현식의 결과는 항상 불리언 타입으로 암묵적 형변환 딘다.
  • false인 경우 : undefined, null, 0, -0, NaN, ''
  • true인 경우 : false 인 경우를 제외한 나머지
    ※ 빈 배열, 빈 객체도 true로 평가된다는 것에 유의

암묵적 형변환의 응용

• !!value : value를 무조건 불리언 타입으로 형변환 한다.
• value * 1 : value를 무조건 숫자 타입으로 형변환 한다.

명시적 타입 변환 (explicit coercion)

자바스크립트 내장 객체를 통해 개발자가 의도적으로 타입 변환하는 것을 말한다.

형변환의 원리는 암묵적 타입 변환과 동일하다.

문자열 타입 변환

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

숫자 타입 변환

• Number() 생성자 함수를 new 연산자 없이 호출
• parseInt(), parseFloat() 내장 함수 호출

불리언 타입 변환

• Boolean() 생성자 함수를 new 연산자 없이 호출

단축 평가

조건식에서 사용되는 ||, && 논리연산자는 불리언값으로 평가되는 것이 아니라, 평가가 확정된 순간의 피연산자 값으로 평가된다.

console.log(true || "hello"); // true
console.log(false || "hello"); // hello
console.log(true && "hello"); // hello
console.log(false && "hello"); // false

or(||) 연산자는 좌항이 true인 순간 평가 결과가 확정이기 때문에 좌항으로 평가되었다.
반면 좌항이 false인 경우 우항까지 확인해야 평가 결과를 확정할 수 있기 때문에 우항으로 평가되었다.

and(&&) 연산자도 동일하게 동작한다.

평가된 값이 조건식에서 쓰인다면 암묵적 형변환에 의해 불리언값으로 평가될 것이다.

단축 평가 응용

// 좌항이 falsy값일 경우 default value 할당
const foo = value || 'default value'

// value가 truthy일 경우(null, undefined 등이 아닐경우) value의 메서드 사용
{value && value.useMethod(...)}

하지만 이 단축 평가 방법에는 허점이 있다.
1. 빈 객체, 빈 배열을 true로 평가
2. 빈 문자열을 defalut value로 할당할 수 없음
등등...

때문에 ES6에서 이를 보충하는 연산자들이 추가되었다.

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

좌항이 null 또는 undefined일 경우 undefined를 반환한다.

// 좌항이 null이면 null반환, 아니면 우항의 참조를 이어감
isNull?.value; 

기존 && 단축 평가에서 '', NaN, 0 등의 값이 false로 평가되지 않아야 하는 상황에서 더 정확하게 사용할 수 있다.

null 병합 연산자 (??)

좌항이 null 또는 undefined인 경우 우항의 피연산자를 반환한다.

const foo = value ?? 'defaultValue';

기존 || 단축 평가에서 '', NaN, 0 등의 값을 할당할 수 없다는 단점을 해결한다.