JavaScript

[JS Deep Dive] 09. 타입 변환과 단축 평가

Gaeun Lee 2024. 1. 17. 03:16

1. 타입 변환이란?

  • 명시적 타입 변환 · 타입 캐스팅: 개발자가 의도적으로 값의 타입을 변환하는 것
  • 암묵적 타입 변환 · 타입 강제 변환: 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것
  • 두 타입 변환 모두 기존 원시값을 직접 변경하는 것 아님
    • 원시값 = 변경 불가능한 값 ⇒ 변경할 수 없음
  • 타입 변환: 기존 원시값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것

 

2. 암묵적 타입 변환

  • 빈 문자열, 빈 배열, null, false는 0으로 변환
  • true는 1로 변환
  • 자바스크립 엔진은 불리언 타입이 아닌 값을 Truthy 값 (참으로 평가되는 값) 또는 Falsy 값 (거짓으로 평가되는 값)으로 구분함
    • 제어문의 조건식과 같이 불리언 값으로 평가되어야 할 문맥에서 Truthy 값은 true로, Falsy 값은 false로 암묵적 타입 변환이 됨
  • Falsy 값
    • false
    • undefined
    • null
    • 0, -0
    • NaN
    • ‘’ (빈문자열)
    • 이외의 값은 모두 Truthy 값임

// 전달받은 인수가 Falsy 값인지
function isFalsy(v) { return !v; }

// 전달받은 인수가 Truthy 값인지
function isTruthy(v) { return !!v; }

 

3. 명시적 타입 변환

  • 명시적 타입 변경 방법
    • 표준 빌트인 생성자 함수를 new 연산자 없이 호출
      • 표준 빌트인 생성자 함수: 객체를 생성하기 위한 함수이며 new 연산자와 함께 호출
    • 빌트인 메서드 사용
      • 자바스크립트에서 기본 제공하는 빌트인 객체의 메서드
    • 암묵적 타입 변환
  1. 문자열 타입으로 변환
    1. String 생성자 함수를 new 연산자 없이 호출String(1)
    1. Object.prototype.toString 메서드 사용(1).toString()
    1. 문자열 연결 연산자 이용1+’’
  1. 숫자 타입으로 변환
    1. Number 생성자 함수를 new 연산자 없이 호출Number(’0’) → 0
    2. Number(true) → 1
    1. parseInt, parseFloat 함수를 사용 (문자열만 가능)parseInt(’1’) → 1
    1. + 단항 연산자 이용+’0’
    2. +false → 0
    1. * 산술 연산자 이용‘-1’ * 1 → -1
    2. false * 1 → 0
  1. 불리언 타입으로 변환
    1. Boolean 생성자 함수를 new 연산자 없이 호출Boolean(’’) → falseBoolean(Infinity) → true
    2. Boolean(null) → false
    3. Boolean(’false’) → true
    1. !부정 논리 연산자를 두 번 사용!!’’ → false
    2. !!undefined → false

 

4. 단축 평가

(1) 논리 연산자

  • 논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가됨 (평가 결과가 불리언 값이 아닐 수 있음)
  • 두 연산 모두 좌항에서 우항으로 평가가 진행됨
  • 논리곱 연산‘Cat’ && ‘Dog’ ⇒ ‘Dog’ 반환
    • 두 개의 연산자가 모두 true로 평가될 때 true 반환
      • 두 번째 피연산자까지 평가해 보아야 위 표현식 평가할 수 있음
    • 논리 연산의 결과를 결정하는 두 번재 피연산자를 그대로 반환함
  • 논리합 연산‘Cat’ || ‘Dog’ ⇒ ‘Cat’ 반환
    • 두 개의 피연산자 중 하나만 true로 평가되어도 true 반환
      • ‘Cat’ 은 Truthy 값이므로 두 번째 피연산자까지 평가해보지 않아도 위 표현식 평가할 수 있음
    • 논리 연산의 결과를 결정한 첫 번재 피연산자를 그대로 반환함
  • 단축 평가
    • 논리곱 논리합 연산자가 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환하는 것
    • 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것
    • 예시
      • true || anything ⇒ true
      • false || anything ⇒ anything
      • true && anything ⇒ anything
      • false && anything ⇒ false
    • 단축 평가 사용시 if문 대체 가능
      • 어떤 조건이 Truthy 값일 때 무언가를 해야 한다면 논리곱 사용message = done && ‘완료’ ⇒ done이 true일 때 message === ‘완료’
      • 어떤 조건이 Falsy 값일 때 무언가를 해야 한다면 논리합 사용message = done || ‘미완료’ ⇒ done이 false일 때 message === ‘미완료’
  • 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때
    • 객체 : 키와 값으로 구성된 프로퍼티의 집합
    • 객체를 가리키기를 기대한 변수의 값이 null 또는 undefined인 경우 객체의 프로퍼티를 참조하면 타입 에러 발생하는데 이때 단축 평가를 사용하면 됨 
    •    
      var elem = null;
var value = elem && elem.value; // null
  • 함수 매개변수에 기본값을 설정할 때
    • 함수 호출시 인수 전달하지 않으면 매개변수에는 undefined가 할당되는데 이때 단축 평가를 사용하여 매개변수의 기본값을 설정하면 에러 방지 가능 
      function getStringLength(str) {
	str = str || ''; // str이 undefined이면 '' 반환
	return str.length;
}

getStringLength(); // 0
getStringLength('hi'); // 2

// ES6의 매개변수의 기본값 설정
function getStringLength(str = '') {
	return str.length;
}

getStringLength(); // 0
getStringLength('hi'); // 2

(2) 옵셔널 체이닝

  • ES11에 도입됨
  • 옵셔널 체이닝 연산자 ?. 는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어감 
    var elem = null;

var value = elem?.value
console.log(value) //undefined
  • 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용함
  • Falsey 값인 0이나 ‘’는 객체로 평가될 때도 있어 논리곱 연산자 사용시 의도하지 않은 참조가 이루어졌는데 옵셔널 체이닝은 null이나 undefined가 아닌 Falsy 값이라면 우항의 프로퍼티를 참조 가능하게 함 
    var str = '';
var length = str && str.length
console.log(length) // ''

var length = str?.length
conosole.log(length) // str이 undefined나 null이 아니므로 length는 0

(3) null 병합 연산자

  • nullish coalescing 연산자 ??
  • 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고 그렇지 않으면 좌항의 피연산자를 반환함
  • 변수에 기본값을 설정할 때 유용함 
    var foo = null ?? 'default string';
console.log(foo) // default string , 좌항의 피연산자가 null이므로 우항 반
저작자표시

'JavaScript'의 다른글

  • 현재글[JS Deep Dive] 09. 타입 변환과 단축 평가

관련글

티스토리툴바