09장 타입 변환과 단축 평가

모던 자바스크립트 딥다이브 09장 타입 변환과 단축 평가

타입 변환

• 자바스크립트 모든 값은 타입이 존재한다.

• 명시적 타입 변환 : 개발자의 의도에 따라 다른 타입으로 값을 변환하는 것 (= 타입캐스팅)

• 암묵적 타입 변환 : 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환 되는 것 (= 타입 강제 변환)

• 기존 원시 값을 직접 변경하는 것이 아니라 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것

암묵적 타입 변환

• 자바스크립트 엔진은 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환할 때가 있다.

• 문자열 타입으로 변환

  • 문자열 연결 연산자 '+'

  • 템프릿 리터럴

• 숫자 타입으로 변환

  • 산술 연산자

  • 비교 연산자

  • 빈문자열, 빈배열, null, false는 0으로, true는 1로 변환된다.

• 불리언 타입으로 변환

  • 조건식 : 제어문 또는 삼항조건연산자의 조건식은 불린언으로 평가되어야 하기 때문에 조건식의 값들은 불리언 타입으로 암묵적 형 변환이 이루어진다.

  • Falsy 값

    1. false

    2. undefined

    3. null

    4. 0,-0

    5. NaN

    6. ''

명시적 타입 변환

• 문자열 타입으로 변환

  1. String(1)

  2. (1).toString()

  3. 1+''

• 숫자 타입으로 변환

  1. Number('0')

  2. parseInt('0'), parseFloat('10.02')

  3. 단항 산술연산자 사용 +'0'

  4. 산술연산자 사용 '0'*1

• 불리언 타입으로 변환

  1. Boolean('') // false, Boolean('가나다') //true

  2. 부정논리연산자 두번 사용, !!'x' // true

단축 평가

• 표현식을 평가하는 도중에 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.

• 여러 패턴에서 유용하게 사용된다.

1. if 대체

var done = true 
var message = '' 
message = done && '완료'
// 완료

var done = false
var message = ''
message = done || '미완료'
// 미완료

1. 객체를 참조하기전 객체 유무 확인하고 접근하기

var obj = null
var value = obj.key1 // 타입 에러 바로 던져버림

//////////////////
var value = obj&&obj.key1 // null로 평가, 따라서 타입에러 안남

1. 함수 매개변수에 기본값 설정할 때

function test(value) { 
    value = value || '기본값'; 
    // 매개변수가 넘어오지 않으면 '기본값'을 사용한다. 
}

옵셔녈 체이닝

• ES11에서 추가됨

• 좌항의 피연산자가 null이나 undefined로 참조할 수 없을 경우 undefined를 반환하고, 참조 가능할경우 참조를 이어간다.

var obj = null
var value = obj.key1 // 타입 에러 바로 던져버림 
///////////////
var obj = null 
var value = obj?.obj.key1 // undefiend를 반환함.

null병합 연산자

• ES11에서 추가됨

• 좌항이 null이나 undefined일 경우, 우항을 반환, 아니면 좌항을 반환

• 삼항조건식이랑 비슷해보임

var test = null ?? '테스트테스트'
console.log(test) // 테스트테스트