JavaScript

[모던 자바스크립트 Deep Dive] 09장 - 타입 변환과 단축 평가

sangchu 2023. 1. 7. 13:08

9.1 타입 변환이란?

  • 자바스크립트의 모든 값은 타입이 있고, 개발자의 의도에 따라 다른 타입으로 변환 가능
    • 명시적 타입 변환(=타입 캐스팅): 개발자가 의도적으로 값의 타입을 변환하는 것
    • 암묵적 타입 변환(=타입 강제 변환)
  • 원시 값은 변경 불가능한 값 → 타입 변환은 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것
  • 단 한번 사용하고 버림 → 기존 변수 값을 재할당하여 변경하는 것이 아님

 

9.2 암묵적 타입 변환

  • 개발자 의도와 상관없이 표현식을 평가하는 도중에 js 엔진에 의해 암묵적으로 타입이 자동 변환되는 것

문자열 타입으로 변환

1 + "2" // -> "12"
  • +연산자는 피연산자 중 하나 이상이 문자열일 때 문자열 연결 연산자로 동작
    • 문자열 연결 연산자: 문자열 값을 만듦, 모든 피연산자는 모두 문자열 타입이어야 함
`1 + 1 = ${1 + 1}` // -> "1 + 1 = 2"
  • 템플릿 리터럴의 표현식 삽입은 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환
// 숫자 타입
0 + ''         // -> "0"
-0 + ''        // -> "0"
1 + ''         // -> "1"
-1 + ''        // -> "-1"
NaN + ''       // -> "NaN"
Infinity + ''  // -> "Infinity"
-Infinity + '' // -> "-Infinity"

// 불리언 타입
true + ''  // -> "true"
false + '' // -> "false"

// null 타입
null + '' // -> "null"

// undefined 타입
undefined + '' // -> "undefined"

// 심벌 타입
(Symbol()) + '' // -> TypeError: Cannot convert a Symbol value to a string

// 객체 타입
({}) + ''           // -> "[object Object]"
Math + ''           // -> "[object Math]"
[] + ''             // -> ""
[10, 20] + ''       // -> "10,20"
(function(){}) + '' // -> "function(){}"
Array + ''          // -> "function Array() { [native code] }"

숫자 타입으로 변환

1 - '1'   // -> 0
1 * '10'  // -> 10
1 / 'one' // -> NaN
  • 산술 연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입이어야 함
  • 피연산자를 숫자 타입으로 변환할 수 없는 경우는 산술 연산을 수행할 수 없으므로 표현식의 평가 결과는 NaN
'1' > 0  // -> true
  • 비교 연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입이어야 함
  • +단항 연산자: 피연산자가 숫자 타입이 아니면 숫자 타입의 값으로 암묵적 타입 변환 수행
// 문자열 타입
+''       // -> 0
+'0'      // -> 0
+'1'      // -> 1
+'string' // -> NaN

// 불리언 타입
+true     // -> 1
+false    // -> 0

// null 타입
+null     // -> 0

// undefined 타입
+undefined // -> NaN

// 심벌 타입
+Symbol() // -> TypeError: Cannot convert a Symbol value to a number

// 객체 타입
+{}             // -> NaN
+[]             // -> 0
+[10, 20]       // -> NaN
+(function(){}) // -> NaN
  • 빈 문자열(””), 빈 배열([]), null, false는 0으로, true는 1로 변환
  • 객체와 빈 배열이 아닌 배열, undefined는 변환되지 않아 NaN이 됨

불리언 타입으로 변환

if ('')    console.log('1');
if (true)  console.log('2');
if (0)     console.log('3');
if ('str') console.log('4');
if (null)  console.log('5');

// 2 4
  • if 문이나 for문과 같은 제어문은 불리언 값(참/거짓)으로 평가되어야 하는 표현식이므로 암묵적으로 불리언 타입으로 변환
  • false로 평가되는 Falsy 값: false, undefined, null, 0, -0, NaN, “”
  • true로 평가되는Truthy 값: Falsy 값 외의 모든 값

 

9.3 명시적 타입 변환

문자열 타입으로 변환

  1. String 생성자 함수를 new 연산자 없이 호출하는 방법
  2. Object.prototype.toString 메서드를 사용하는 방법
  3. 문자열 연결 연산자를 이용하는 방법
// 1. String 생성자 함수를 new 연산자 없이 호출하는 방법
// 숫자 타입 => 문자열 타입
String(1);        // -> "1"
String(NaN);      // -> "NaN"
String(Infinity); // -> "Infinity"
// 불리언 타입 => 문자열 타입
String(true);     // -> "true"
String(false);    // -> "false"

// 2. Object.prototype.toString 메서드를 사용하는 방법
// 숫자 타입 => 문자열 타입
(1).toString();        // -> "1"
(NaN).toString();      // -> "NaN"
(Infinity).toString(); // -> "Infinity"
// 불리언 타입 => 문자열 타입
(true).toString();     // -> "true"
(false).toString();    // -> "false"

// 3. 문자열 연결 연산자를 이용하는 방법
// 숫자 타입 => 문자열 타입
1 + '';        // -> "1"
NaN + '';      // -> "NaN"
Infinity + ''; // -> "Infinity"
// 불리언 타입 => 문자열 타입
true + '';     // -> "true"
false + '';    // -> "false"

숫자 타입으로 변환

  1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
  2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능)
    • 단항 산술 연산자를 이용하는 방법
    • 산술 연산자를 이용하는 방법
// 1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 숫자 타입
Number('0');     // -> 0
Number('-1');    // -> -1
Number('10.53'); // -> 10.53
// 불리언 타입 => 숫자 타입
Number(true);    // -> 1
Number(false);   // -> 0

// 2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
// 문자열 타입 => 숫자 타입
parseInt('0');       // -> 0
parseInt('-1');      // -> -1
parseFloat('10.53'); // -> 10.53

// 3. + 단항 산술 연산자를 이용하는 방법
// 문자열 타입 => 숫자 타입
+'0';     // -> 0
+'-1';    // -> -1
+'10.53'; // -> 10.53
// 불리언 타입 => 숫자 타입
+true;    // -> 1
+false;   // -> 0

// 4. * 산술 연산자를 이용하는 방법
// 문자열 타입 => 숫자 타입
'0' * 1;     // -> 0
'-1' * 1;    // -> -1
'10.53' * 1; // -> 10.53
// 불리언 타입 => 숫자 타입
true * 1;    // -> 1
false * 1;   // -> 0

불리언 타입으로 변환

  1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
  2. ! 부정 논리 연산자를 두 번 사용하는 방법
// 1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 불리언 타입
Boolean('x');       // -> true
Boolean('');        // -> false
Boolean('false');   // -> true
// 숫자 타입 => 불리언 타입
Boolean(0);         // -> false
Boolean(1);         // -> true
Boolean(NaN);       // -> false
Boolean(Infinity);  // -> true
// null 타입 => 불리언 타입
Boolean(null);      // -> false
// undefined 타입 => 불리언 타입
Boolean(undefined); // -> false
// 객체 타입 => 불리언 타입
Boolean({});        // -> true
Boolean([]);        // -> true

// 2. ! 부정 논리 연산자를 두번 사용하는 방법
// 문자열 타입 => 불리언 타입
!!'x';       // -> true
!!'';        // -> false
!!'false';   // -> true
// 숫자 타입 => 불리언 타입
!!0;         // -> false
!!1;         // -> true
!!NaN;       // -> false
!!Infinity;  // -> true
// null 타입 => 불리언 타입
!!null;      // -> false
// undefined 타입 => 불리언 타입
!!undefined; // -> false
// 객체 타입 => 불리언 타입
!!{};        // -> true
!![];        // -> true

 

9.4 단축 평가

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

'Cat' && 'Dog' // -> "Dog"
  • 논리곱 연산자는 좌항에서 우항으로 평가가 진행되며, 두 번째 피연산자까지 평가해 봐야 위 표현식을 평가할 수 있음
  • 두 번째 피연산자가 논리곱 연산자 표현식의 평가 결과 결정 → 두 번째 피연산자를 반환함
'Cat' || 'Dog' // -> "Cat"
  • 논라합 연산자도 좌항에서 우항으로 평가가 진행됨.
  • 논리 연산의 결과를 결정한 피연산자를 반환
  • 단축 평가
    • 이처럼 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환하는 것
    • 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것
  • 단축 평가를 이용하여 if문 대체 가능
var done = true;
var message = '';

// 주어진 조건이 true일 때
if (done) message = '완료';

// if 문은 단축 평가로 대체 가능하다.
// done이 true라면 message에 '완료'를 할당
message = done && '완료';
console.log(message); // 완료

var done = false;
var message = '';

// 주어진 조건이 false일 때
if (!done) message = '미완료';

// if 문은 단축 평가로 대체 가능하다.
// done이 false라면 message에 '미완료'를 할당
message = done || '미완료';
console.log(message); // 미완료

단축 평가 사용이 유용한 경우

객체 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때

  • 만약 객체를 가리키기를 기대하는 변수의 값이 객체가 아니라 null 또는 undefined인 경우 객체의 프로퍼티를 참조하면 타입 에러가 발생(프로그램 강제 종료)
var elem = null;
var value = elem.value; // TypeError: Cannot read property 'value' of null
  • 단축 평가를 사용하면 에러 발생안됨

 

var elem = null;
// elem이 null이나 undefined와 같은 Falsy 값이면 elem으로 평가되고
// elem이 Truthy 값이면 elem.value로 평가된다.
var value = elem && elem.value; // -> null

 

함수 매개변수에 기본 값을 설정 할 때

  • 함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당됨
  • 단축 평가를 사용해 매개변수의 기본값을 설정하면 undefined로 인해 발생할 수 있는 에러를 방지할 수 있음

 

// 단축 평가를 사용한 매개변수의 기본값 설정
function getStringLength(str) {
  str = str || '';
  return str.length;
}

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

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

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

 

옵셔널 체이닝 연산자

  • ?. : 촤항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어감
var str = '';

// 문자열의 길이(length)를 참조한다. 이때 좌항 피연산자가 false로 평가되는 Falsy 값이라도
// null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.
var length = str?.length;
console.log(length); //

null 병합 연산자

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

'JavaScript' 카테고리의 다른 글

[모던 자바스크립트 Deep Dive] 11장 - 원시 값과 객체의 비교  (0) 2023.01.07
[모던 자바스크립트 Deep Dive] 10장 - 객체 리터럴  (0) 2023.01.07
[모던 자바스크립트 Deep Dive] 08장 - 제어문  (0) 2022.12.19
[모던 자바스크립트 Deep Dive] 07장 - 연산자  (0) 2022.12.19
JavaScript | 자바스크립트 개발 환경과 실행 방법  (0) 2022.12.12

'JavaScript'의 다른글

  • 현재글[모던 자바스크립트 Deep Dive] 09장 - 타입 변환과 단축 평가

관련글

티스토리툴바