09장 - 타입 변환과 단축 평가

본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다.

 

9.1 타입 변환이란?

• 명시적 타입 변환(타입 캐스팅) : 개발자가 의도적으로 값의 타입을 변환
• 암묵적 타입 변환(타입 강제 변환) : 자바스크립트 엔진에 의해 타입이 자동 변환
• 어떤 타입 변환이든 기존 원시값을 직접 변경하는 것은 아님
  • 변환한 타입의 새로운 원시 값을 생성하는 것
• 쉽게 이해할 수 있는 코드를 위해서 암묵적 타입 변환은 지양

 

9.2 암묵적 타입 변환

• 암묵적 타입 변환의 의도
  • 표현식을 평가할 때 코드의 문맥에 부합하지 않으면 오류가 발생하는데, 자바스크립트는 이 오류를 최소화하기 위해서 암묵적 타입 변환을 함
  • 자바스크립트 엔진은 표현식을 평가할 때 코드 문맥에 부합하도록 암묵적 타입 변환을 실행

 

9.2.1 문자열 타입으로 변환

• 문자열 연결 연산자
  • (+) 이항 연산자는 피연산자중 하나가 문자열이면 문자열 연결 연산자로 동작
  • 피연산자중 문자열이 아닌 것은 문자열로 암묵적 타입 변환
  • 심벌 타입은 암묵적 타입 변환을 하지 않음
• 템플릿 리터럴
  • ES6
  • 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환

 

9.2.2 숫자 타입으로 변환

• 산술 연산자의 피연산자는 코드 문맥상 모두 숫자 타입이어야 함
• 피연산자를 숫자로 바꿀 수 없는 경우 NaN이 됨(Not a Number)
• (+) 단항 연산자는 피연산자를 숫자로 암묵적 타입 변환
  • true -> 1
  • false -> 0
  • null -> 0
  • 객체와 빈 배열이 아닌 배열, undefined는 변환하지 않음(NaN)

 

9.2.3 불리언 타입으로 변환

• 조건식은 평가 결과가 불리언이어야 함
• 조건식의 평과 결과를 암묵적으로 불리언으로 변환
• 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy Falsy 값으로 구분
• Falsy
  • false
  • undefined
  • null
  • 0, -0
  • NaN
  • ''(빈 문자열)
  • Falsy값 이외는 모든 Truty 값

 

9.3 명시적 타입 변환

• 개발자의 의도에 따라 타입을 변환한느 것
• 표준 빌트인 생성자 함수
  • String, Number, Boolean
• 빌트인 메서드
• 이하 방법들은 암묵적 타입 변환 생략

 

9.3.1 문자열 타입으로 변환

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

 

9.3.2 숫자 타입으로 변환

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

 

9.3.3 불리언 타입으로 변환

• Boolean 생성자 함수 호출

 

9.4 단축 평가

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

• 논리합(||), 논리곱(&&) 연산자 표현식의 결과는 불리언 값이 아닐 수도 있음
  • 2개의 피연산자 중 어느 한쪽으로 평가

 

단축 평가

• 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환하는 것
• 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략
• 이를 활용하여 if문 대체
  • React.js에서의 조건부 렌더링
• 어떤 조건이 Truthy 값일 때, 무엇을 해야하면 논리곱(&&) 사용
• 어떤 조건이 Falsy 값일 때, 무엇을 해야한다면 논리합(||) 사용
• 객체에서 프로퍼티를 참조시 null, undefined가 아닌지 확인할때 논리곱(&&) 사용
  • Falsy 값일 때 좌항 피연산자 그대로 반환
• 함수 매개변수에 기본값을 설정할 때 논리합(||) 사용

 

9.4.2 옵셔널 체이닝 연산자

• ES11
• 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환
  • 그렇지 않으면 참조를 이어감
• Falsy라도, null 또는 undefined가 아니면 참조를 이어감
  • 논리곱(&&) 연산자와의 차이

 

9.4.3 null 병합 연산자

• ES11
• 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자 반환
  • 그렇지 않으면 좌항의 피연산자 반환
• 변수에 기본값 설정할 때 유용
• Falsy라도, null 또는 undefined가 아니면 참조를 이어감
  • 논리합(||) 연산자와의 차이