기록하는 곳

9장. 타입변환과 단축평가

타입 변환

  • 명시적 타입 변환 : 개발자가 의도적으로 값의 타입을 변환하는 것 (=타입 캐스팅)
  • 암묵적 타입 변환 : 자바스크립트 엔진에 의해 암묵적으로 타입이 변환하는 것 (=타입 강제 변환)

ex) 템플릿 리터럴은 표현식의 평과 결과를 문자열 타입으로 암묵적 타입 변환한다.

0 +
  '' - // -> "0"
  0 +
  ''; // -> "0"
1 +
  '' - // -> "1"
  1 +
  ''; // -> "-1"
NaN + ''; // -> "NaN"
Infinity +
  '' - // -> "Infinity"
  Infinity +
  ''; // -> "-Infinity"

true + ''; // "true"

null + ''; // "null"

undefined +
  ''(
    // "undefined"

    Symbol()
  ) +
  ''(
    // TypeError

    {}
  ) +
  ''; // "[object Object]"
Math +
  ''[(10, 20)] + // "[object Math]"
  ''(
    // "10,20"
    function () {}
  ) +
  ''; // "function(){}"
Array + ''; // "function Array() { [native code] }"
  • 숫자 타입 변환 : 산술 연산자 표현식을 평가할 때 숫자 타입이 아니면 암묵적으로 숫자 타입으로 변환한다.
1 - '1'; // 0
1 * '10'; // 10
1 / 'one'; // NaN
  • boolean 타입으로 변환 : 아래의 false값들 외에는 전부 true다.
// false로 평가되는 값들
false;
undefined;
null;
0, -0;
NaN;
(''); // 빈 문자열

명시적 타입 변환

  • 표준 빌트인 생성자 함수 : 객체를 생성하기 위한 함수이며 new 연산자와 함께 호출한다.

  • 표준 빌트인 메서드 : 빌트인 객체의 메서드 (21장에서 자세히!)

  • 문자열 타입으로 변환

// String 생성자 함수를 new 연산자 없이 호출하는 방법
String(값);

// Object.prototype.toString 메서드를 사용하는 방법
값.toString();

// 문자열 연결 연산자를 이용하는 방법
값 + '';
  • 숫자 타입으로 변환
// Numebr 생성자 함수를 new 연산자 없이 호출하는 방법
Numebr(값);

// parseInt, parseFloat 함수를 사용하는 방법(문자열만 가능)
parseInt('1'); // 1
parseFloat('10.53'); // 10.53

// + 단항 산술 연산자를 이용하는 방법
+'0'; // 0
+true; // 1
+false; // 0

// * 산술 연산자를 이용하는 방법
// 문자열 -> 숫자
'0' * 1; // 0
true * 1; // 1
false * 1; // 0
  • 불리언 타입으로 변환
// boolean 생성자 함수를 new 연산자 없이 호출하는 방법
Boolean('x'); // true
Boolean(''); // false

Boolean(0); // false
Boolean(1); // true
Boolean(NaN); // false
Boolean(Infinity); // true

Boolean(null); // false
Boolean(undefined); // false

Boolean({}); // true
Boolean([]); // true

// 다중 부정(!!)을 이용한 방법
// 1. 첫번째 부정으로 원래 값을 boolean타입으로 바꾸고 반대로 변환해준다.
// 2. 반대로 출력된 값을 다시 반대로(원래대로) 변환해준다.

!!'x'; // true
!!''; // false

!!0; // false
!!1; // true

단축 평가

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

논리합(||) 혹은 논리곱(&&) 연산의 평가 결과는 불리언 값이 아닐 수도 있다.

// && : 마지막 피연산자를 출력한다.
'Cat' && 'Dog'; // "Dog"

// || : 첫번째 피연산자를 출력한다.
'Cat' || 'Dog'; // "Cat"

위처럼 논리합, 논리곱은 피연산자를 타입 변환하지 않고 그대로 반환한다(=단축평가).

단축평가 : 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것

'Cat' || 'Dog'; // "Cat"
false || 'Dog'; // "Dog"
'Cat' || false; // "Cat"

'Cat' && 'Dog'; // "Dog"
false && 'Dog'; // false
'Cat' && false; // false
  • 프로퍼티를 참조할 때
var elem = null;
var value = elem.value; // TypeError : Cannot read property 'value' of null

/* ----------------------------------- */

var elem = null;
// elem이 값을 가지고 있으면 elem으로 평가되고
// 값이 없다면(null, undefined) elem.value로 평가된다.
var value = elem && elem.value; // null
  • 함수 매개변수에 기본값을 설정할 때 (undefined로 인한 에러 방지)
function getStringLength(str) {
  str = str || '';
  return str.length;
}

getStringLength(); // 0 (undefined 에러가 발생하지 않는다.)
getStringLength('hi'); // 2

/* ------------------------------------------- */

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

getStringLength(); // 0
getStringLength('hi'); // 2
  • 옵셔널 체이닝 연산자 (좌항의 피연산자가 null 또는 undefined인 경우만 undeifned를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.)
var elem = null;

var value = elem?.value;
console.log(value); // elem이 null이기 때문에 undefined를 반환
  • null 병합 연산자 (좌항이 null 또는 undefined인 경우 우항을 반환하고, 그렇지 않으면 좌항을 반환한다.)
// null 병합 연산자는 변수에 기본값을 설정할 때 유용하다.
var foo = null ?? 'default string';
console.log(foo); // "default string
Last Updated: