logo
Published on

모던자바스크립트 9.타입 변환과 단축 평가

Authors
  • avatar
    Name
    Bora Choi
    Twitter

타입변환이란 ? 기존의 원시값을 사용해 다른 타입의 새로운 원시값을 생성하는 것.

타입 변환

  1. 암묵적 타입변환(implict coercion) / 타입 강제 변환(type coercion)
  2. 명시적 타입변환(explict coercion) / 타입 캐스팅 (type casting)

암묵적 타입 변환

개발자의 의도와는 상관없이 코드의 문맥을 고려하여 암묵적으로 데이터 타입을 강제 변환 하는 것.

암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환한다.

문자열 타입으로 변환

+ 연산자는 피연산자 중 하나 이상의 문자열이 있을경우 문자열 연결 연산자로 동작한다.

1 + '2' // => "12"

숫자 타입으로 변환

산술 연산자의 피연산자 중 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환 한다.

피연산자를 숫자 타입으로 변환할 수 없는 경우는 산술 연산을 수행할 수 없으므로 NaN 이 된다.

빈 문자열'', 빈 배열[], null, false 는 **0**으로 true 는 **1**로 반환.

객체, 원소가 있는 배열, undefined 는 NaN

1 - '1' // 0
1 * '10' // 10
1 / 'one' + // NaN
  //boolean 타입
  true + // 1
  false + // 0
  //null 타입
  null + // 0
  //undefined 타입
  undefined + // NaN
  //객체타입
  [] + // 0
  {} + // NaN
  [1, 2] // NaN

boolean타입으로 변환

참으로 평가되는 값 또는 거짓으로 평가되는 값으로 구분하여 boolean 타입으로 암묵적 타입 변환한다.

거짓으로 평가되는 값

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

명시적 타입변환

개발자의 의도에 따라 명시적으로 타입을 변경하는 방법.

  1. 표준 빌트인 생성자 함수를 new 연산자 없이 호출
  2. 빌트인 메서드 사용

문자열 타입으로 변환

  1. String 생성자 함수를 new 연산자 없이 호출하는 방법

    String(1) //"1"
String(NaN) //"NaN"

  2. Object.prototype.toString 메서드를 사용하는 방법

    Infinity.toString() //"Infinity"
true.toString() //"true"

  3. 문자열 연결 연산자를 이용하는 방법

    2 + '' //"2"
false + '' //"false"

숫자 타입으로 변환

  1. Number 생성자 함수를 new 연산자 없이 호출하는 방법

    Number('1') //1
Number(true) //1

  2. parseInt,parseFloat 메서드를 사용하는 방법(문자열만 숫자타입으로 변환 가능)

    parseInt('0') // 0
parseFloat('10.24') //10.24

  3. + 단항 산술 연산자를 이용하는 방법

    ;+'2' + //2
  false //0

  4. * 산술 연산자를 이용하는 방법

    '0' * 1 //0
true * 1 //1

boolean 타입으로 변환

  1. boolean 생성자 함수를 new 연산자 없이 호출하는 방법

    boolean('x') //true
boolean('') //false

  2. !부정 논리 연산자를 두 번 사용하는 방법

    !!1 //true
!!null //false

단축평가

표현식을 평가하는 도중에 평가 결과가 확정된 후 나머지 과정을 생략하는 것.

논리 연산자 (&&,||)

논리연산자의 표현식의 평과결과는 불리언값이 아닐 수도 있다. 논리합(||) 또는 논리곱(&&) 연산자의 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.

  • 논리곱연산자(&&)

    'cat'은 truthy한 값

    && 논리연산을 수행하기 위해서는 두번째 피연산자 값을 알아야 한다.

    'dog'반환

'cat' && 'dog' // "dog"

  • 논리합연산자(||)

    'cat'은 truthy한 값

    || 논리연산은 첫번째 피연산자 값만으로도 연산을 수행할 수 있다.

    'cat'반환

'cat' || 'dog' // "cat"

옵셔널 체이닝 (?.)

좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이해한다.

옵셔널 체이닝을 사용 안했을 경우

옵셔널 체이닝을 사용 안했을 경우

null값의 속성은 읽을 수 없으므로 TypeError

옵셔널 체이닝을 사용했을 경우

옵셔널 체이닝을 사용했을 경우

undefined라는 값을 반환한다.

  • 논리연산자 &&와 차이점

    &&는 좌항 피연산자가 false로 평가되는 Falsy값(false,undefined,null,0,-0,NaN,'')이면 좌항의 피연산자를 그대로 반환한다. 하지만 옵션널 체이닝 연산자는 좌항의 피연산자가 false로 평가되는 Falsy값이라도 null또는 undefined가 아니면 우항의 프로퍼티의 참조를 이어간다.

const input = document.querySelector('input')
const userId = input?.value()
console.log(userId) // undefined or "bora"

str = ''
str && str.length

null 병합 연산자 (??)

좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.

변수의 기본값을 설정할때 유용하다.

var foo
foo = null ?? 'default String'
console.log(foo) //"default string"

var greeting = 'hello'
var greeting = ''
foo = greeting ?? 'default String'
console.log(foo) //"hello" ""

  • 논리연산자 ||와 차이점

    ||는 좌항 피연산자가 false로 평가되는 Falsy값(false,undefined,null,0,-0,NaN,'')이면 우항의 피연산자를 그대로 반환한다. 하지만 null 병합 연산자는 좌항의 피연산자가 false로 평가되는 Falsy값이라도 null또는 undefined가 아니면 좌항의 피연산자를 반환한다.

  • 퀴즈 ❓ 아래에의 출력값은?
let login = false

let status = !login && '로그인을 해주세요'
console.log(status)

정답

  • '로그인을 해주세요'

본 포스팅은 모던자바스크립트 deep dive를 공부하면서 정리한 내용입니다.

Discuss on Twitter • View on GitHub