타입 변환과 단축 평가 (Type coercion and Short-circuit evaluation)

11hertz·2024년 2월 11일

Javascript

목록 보기
6/10
post-thumbnail

타입 변환 (Type coercion)

기존 원시값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것
명시적 타입 변환과 암묵적 타입 변환의 두 가지 종류가 있음
원시값은 변경 불가능한 값(Immutable value)이므로, 두 가지 경우 모두 기존 원시값 직접 변경 불가

명시적 타입 변환 (Explicit coercion) 또는 타입 캐스팅(Type casting)

개발자가 의도적으로 값의 타입을 변경하는 것
명시적 타입 변환 방법으로는 세 가지가 있음
1. 표준 빌트인 생성자 함수(String, Number, Boolean)를 new 없이 호출하는 방법
2. 빌트인 메서드를 사용하는 방법
3. 암묵적 타입 변환 이용 방법

  • 문자열 타입으로 변환
    1) String 생성자 함수를 new 없이 호출
    2) Object.prototype.toString 메서드 사용
    3) 문자열 연결 연산자 사용

  • 숫자 타입으로 변환
    1) Number 생성자 함수를 new 없이 사용
    2) parseInt, parseFloat 함수를 사용 (문자열만 숫자 타입으로 변환 가능)
    3) + 단항 산술 연산자를 이용
    4) * 산술 연산자 이용

  • 불리언 타입으로 변환
    1) Boolean 생성자 함수를 new 없이 호출
    2) 부정 논리 연산자(!)를 두 번 사용

암묵적 타입 변환 (Implicit coercion) 또는 타입 강제 변환(Type coercion)

개발자의 의도와는 상관 없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것
암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환
암묵적 타입 변환은 기존 변수 값을 재할당하여 변경하는 것이 아님
자바스크립트 엔진이 표현식을 에러 없이 평가하기 위해,
피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 한 번 사용하고 버림

  • 문자열 타입으로 변환
    자바스크립트 엔진은 문자열 연결 연산자 표현식을 평가하기 위해,
    문자열 연결 연산자 중에서 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환
    템플릿 리터럴의 표현식 삽입의 경우에도, 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환

  • 숫자 타입으로 변환
    자바스크립트 엔진은 산술 연산자 표현식을 평가하기 위해,
    산술 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환
    피연산자를 숫자 타입으로 변환할 수 없는 경우, 산술 연산을 수행할 수 없음
    이러한 경우 표현식의 평가 결과는 NaN (Not a Number)가 됨
    자바스크립트 엔진은 비교 연산자 표현식을 평가하기 위해,
    비교 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환
    '+' 단항 연산자는 피연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환 수행
    빈 문자열(''), 빈 배열([]), null, false는 0으로 true는 1로 변환
    객체, 빈 배열이 아닌 배열, undefined는 변환되지 않아 NaN으로 평가

  • 불리언 타입으로 변환
    자바스크립트 엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환
    불리언 값이 아닌 값을 Truthy값(참으로 평가되는 값)/Falsy값(거짓으로 평가되는 값)으로 구분
    제어문의 조건식과 같이 불리언 값으로 평가되어야 하는 문맥에서 Truthy값을 true로,
    Falsy값(false, undefined, null, 0, -0, NaN, '')은 false로 암묵적 타입 변환
    Falsy값 외 모든 값은 true로 평가받는 Truthy값이 됨

단축 평가 (Short-circuit evaluation)

표현식을 평가하는 도중에 평가 결과가 확정된 경우, 나머지 평가과정을 생략하는 것
대부분의 프로그래밍 언어는 단축 평가를 통해 논리 연산을 수행하며, 단축 평가는 다음 규칙을 따름

true || anything => true
false || anything => anything
true && anything => anything
false && anything => false

단축 평가를 사용하면 if문 대체 가능
어떤 조건이 Truthy값일 때 무언가를 해야 한다면 논리곱 연산자(&&) 사용,
어떤 조건이 Falsy값일 때 무언가를 해야 한다면 논리합 연산자(||) 사용

다음의 두 경우에 단축 평가가 유용
1) 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때
2) 함수 매개변수에 기본값을 설정할 때

ES11(ECMAScript2020)에서 유용한 단축 평가 활용 연산자들이 도입

  • 옵셔널 체이닝 연산자 (Optional chaining Operator - ?.)
    좌항의 피연산자가 null 또는 undefined인 경우 undefined 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어감

  • null 병합 연산자 (Nullish coalescing operator - ??)
    좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환
    변수에 기본값을 설정할 때 유용

profile
Practice Makes Perfect!

0개의 댓글