9장. 타입 변환과 단축 평가

9.1 타입변환이란?

• 자바스크립트의 모든 값은 타입이 있다. 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입변환(타입 캐스팅)이라 하고, 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동변환되는 것을 암묵적 타입변환(타입강제변환)이라고 한다.

명시적 타입전환

let number = 10;
let str = number.toString(); // number to string
console.log(typeof str, str); // string 10
console.log(typeof number, number); //number 10

암묵적 타입변환

let age = 30;
let str = age+ '세';
console.log(typeof str, str); // string 30세
console.log(typeof age, age); number 30

• 암묵적 타입 강제 변환은 개발자의 의지가 코드에 명백하게 나타나는 것이 아니므로, 자신이 작성한 코드에서 이런 변환이 나타나는지 예측해야 한다. 그렇지 않으면 타입에러 메세지를 계속 보게 될지도..

9.2 암묵적 타입변환

9.2.1 문자열 타입으로 변환

1 + '2' // '12'
`1 + 1 = ${1+1}` // '1 + 1 = 2'

9.2.2 숫자 타입으로 변환

• 빈 문자열(''), 빈 배열([]), null, false는 0으로 true는 1로 변환된다. 객체와 빈 배열이 아닌 배열, undefined는 변환되지 않아 NaN이 된다는 것을 주의해야한다.

1 - '1' // 0
1 * '10' // 10
1 / 'one' // NaN

문자열타입
+'' // 0
+'0' // 0
+'1' // 1
+ 'string' //NaN

불리언타입
+true // 1
+false // 0

null타입
+null // 0

undefined타입
+undefined // NaN

객체타입
+{} // NaN
+[] // 0
+[10, 20] // NaN
+(function(){}) // NaN

9.2.3 불리언 타입으로 변환

• 자바스크립트 엔진은 불리언 타입이 아닌 갑을 truthy 또는 falsy로 구분한다. 다음 값들은 false로 평가되는 값들이다.

false, undefined, null, 0, -0, NaN, ''(빈문자열)

// 따라서 다음은 ture를 반환한다.
isFalsy(false);
isFalsy(undefined);
isFalsy(null);
isFalsy(0);
isFalsy(NaN);
isFalsy('');

9.3 명시적 타입 변환

9.3.1 문자열 타입으로 변환

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

// 2. Object.prototype.toString 메서드 이용
(1).toString(); // '1'

// 3. 문자열 연결 연산자를 이용
1 + '' // '1'

9.3.2 숫자 타입으로 변환

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

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

// 3. + 단항 산술 연산자 이용
+'-1' // -1
+ture // 1

// 4. * 산술 연산자 이용
'11.23' * 1 // 11.23
true * 1 // 1

9.3.3 불리언 타입으로 변환

// 1.Boolean 생성자 함수를 new 연산자 없이 호출
Boolean(1); // true
Boolean(null); // false

// 2. ! 부정 논리 연산자 두번 사용
!!null; // false
!!1; // true

9.4 단축 평가

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

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

객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때

let box = null;
let value = box.value; // TypeError 발생

단축평가를 사용하면 에러가 나지 않는다.
let box = null;
let value = box && box.value; // null

함수 매개변수에 기본값을 설정할 때 : 함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined이 할당되 에러가 발생할 수 있다. 다음과 같이 설정하면 에러를 방지할 수 있다.

function getLength(value) {
  value = value || "";
  return value.length;
}

getLength(); // 0
getLength('hello') // 5

function getStringLength(value = "") {
  return value.length;
}

getStringLength(); // 0
getStringLength('hello') // 5

9.4.2 옵셔널 체이닝 연산자

옵셔널 체이닝 연산자 ?.는 피연산자가 null또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

let name = null;
let value = name?.value;
console.log(value); // undefined

let age = '';
let value = age?.value;
console.log(value); // 0