09장 타입 변환과 단축 평가

2022-05-10

9.1 타입 변환이란?(09-01)

원시 값은 변경 불가능한 값이므로 다른 타입의 새로운 원시 값을 생성해서 타입변환을 보여준다
명시적 타입변환(=타입 캐스팅) : 개발자가 의도적으로 값을 타입을 변환

var x = 10;

// 명시적 타입 변환
// 숫자를 문자열로 타입 캐스팅한다.
var str = x.toString();
console.log(typeof str, str); // string 10

// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

09-02

암묵적 타입변환(=타입 강제변환) : 표현식 평가도중 자바스크립트 엔진이 암묵적으로 타입 자동 변환

var x = 10;

// 암묵적 타입 변환
// 문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성한다.
var str = x + '';
console.log(typeof str, str); // string 10

// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

9.2 암묵적 타입 변환(09-03)

여기부터는 암묵적 타입변환만을 보여준다
’+’는 연결로 사용시 문자열로 변환, 나머지 -,*,/등은 숫자 타입으로 변환
다만, 예제들 보면 +’1’이런식은 숫자 타입으로 변환

// 피연산자가 모두 문자열 타입이어야 하는 문맥
'10' + 2 // -> '102'

// 피연산자가 모두 숫자 타입이어야 하는 문맥
5 * '10' // -> 50

// 피연산자 또는 표현식이 불리언 타입이어야 하는 문맥
!0 // -> true
if (1) { }

9.2.1 문자열 타입으로 변환(09-04)

문자열 타입으로 변환

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

09-05

템플릿 리터럴(``)

`1 + 1 = ${1 + 1}` // -> "1 + 1 = 2"

09-06

문자열 타입으로 변환 동작

// 숫자 타입
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] }"

9.2.2 숫자 타입으로 변환(09-07)

숫자 타입으로 변환

- '1'   // -> 0
* '10'  // -> 10
/ 'one' // -> NaN

09-08

'1' > 0  // -> true

09-09

숫자 타입으로 변환 동작

// 문자열 타입
+''       // -> 0
+'0'      // -> 0
+'1'      // -> 1
+'string' // -> NaN

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

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

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

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

// 객체 타입
+{}             // -> NaN
+[]             // -> 0
+[10, 20]       // -> NaN
+(function(){}) // -> NaN

9.2.3 불리언 타입으로 변환(09-10)

불리언 타입으로 변환

if ('') console.log(x);

09-11

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

09-12

// 아래의 조건문은 모두 코드 블록을 실행한다.
if (!false)     console.log(false + ' is falsy value');
if (!undefined) console.log(undefined + ' is falsy value');
if (!null)      console.log(null + ' is falsy value');
if (!0)         console.log(0 + ' is falsy value');
if (!NaN)       console.log(NaN + ' is falsy value');
if (!'')        console.log('' + ' is falsy value');

09-13

// 전달받은 인수가 Falsy 값이면 true, Truthy 값이면 false를 반환한다.
function isFalsy(v) {
  return !v;
}

// 전달받은 인수가 Truthy 값이면 true, Falsy 값이면 false를 반환한다.
function isTruthy(v) {
  return !!v;
}

// 모두 true를 반환한다.
isFalsy(false);
isFalsy(undefined);
isFalsy(null);
isFalsy(0);
isFalsy(NaN);
isFalsy('');

// 모두 true를 반환한다.
isTruthy(true);
isTruthy('0'); // 빈 문자열이 아닌 문자열은 Truthy 값이다.
isTruthy({});
isTruthy([]);

9.3 명시적 타입 변환

표준 빌트인 생성자 함수를 new 연산자 없이 호출하는 방법 빌트인 메서드를 사용하는 방법 암묵적 타입 변환을 이용하는 방법

9.3.1 문자열 타입으로 변환(09-14)

여기부터는 명시적 타입변환만을 보여준다. 다만, 개발자가 의도적으로 바꾸는걸 명시적 타입변환이라 하는데 이는 앞서 살펴본 암묵적 타입 변환을 이용하는것도 하나의 방법이다
아래는 문자열 타입 변환

// 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"

9.3.2 숫자 타입으로 변환(09-15)

숫자 타입으로 변환

// 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

9.3.3 불리언 타입으로 변환(09-16)

불리언 타입으로 변환

// 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 단축 평가

9.4.1 논리 연산자를 사용한 단축 평가(09-17)

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

'Cat' && 'Dog' // -> "Dog"
// &&연산자는 앞 true고 뒤에도 true여야 함

09-18

'Cat' || 'Dog' // -> "Cat"
// ||연산자는 둘중 하나만 true여도 가능

09-19

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

// 논리합(||) 연산자
'Cat' || 'Dog'  // -> "Cat"
false || 'Dog'  // -> "Dog"
'Cat' || false  // -> "Cat"

// 논리곱(&&) 연산자
'Cat' && 'Dog'  // -> "Dog"
false && 'Dog'  // -> false
'Cat' && false  // -> false

09-20

단축평가는 if문 대체 가능

var done = true;
var message = '';

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

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

09-21

var done = false;
var message = '';

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

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

09-22

if문은 삼함 조건 연산자로 대체 가능

var done = true;
var message = '';

// if...else 문
if (done) message = '완료';
else      message = '미완료';
console.log(message); // 완료

// if...else 문은 삼항 조건 연산자로 대체 가능하다.
message = done ? '완료' : '미완료';
console.log(message); // 완료

09-23

객체를 가리키기를 기대하는 변수가 null or undefined가 아닌지 확인하고 프로퍼티를 참조할때 단축 평가 사용시 에러X

var elem = null;
var value = elem.value; // TypeError: Cannot read property 'value' of null

09-24

단축 평가로 사용

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

09-25

함수 매개변수에 기본값 설정할때 단축평가도 가능

// 단축 평가를 사용한 매개변수의 기본값 설정
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

9.4.2 옵셔널 체이닝 연산자(09-26)

옵셔널 체이닝 연산자 ?. (널 체크하는것)

var elem = null;

// elem이 null 또는 undefined이면 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
var value = elem?.value;
console.log(value); // undefined

09-27

?.이 나오기전까진 논리곱으로 널 체크를 한것이다.

var elem = null;

// elem이 Falsy 값이면 elem으로 평가되고 elem이 Truthy 값이면 elem.value로 평가된다.
var value = elem && elem.value;
console.log(value); // null

09-28

논리곱은 false, undefined, null, 0, -0, NaN, ‘’ 이면 좌항 피연산자 그대로 반환

var str = '';

// 문자열의 길이(length)를 참조한다.
var length = str && str.length;

// 문자열의 길이(length)를 참조하지 못한다.
console.log(length); // ''

09-29

그러나 ?.은 * false, undefined, null, 0, -0, NaN, ‘’ 이여도 null 또는 undefine가 아니면 우항의 프로퍼티 참조를 이어나감

var str = '';

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

9.4.3 null 병합 연산자(09-30)

null 병합 연산자 ?? 은 변수에 기본값 설정하기 매우 유용

// 좌항의 피연산자가 null 또는 undefined이면 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.
var foo = null ?? 'default string';
console.log(foo); // "default string"

09-31

기존엔 논리합 단축평가로 했음

// Falsy 값인 0이나 ''도 기본값으로서 유효하다면 예기치 않은 동작이 발생할 수 있다.
var foo = '' || 'default string';
console.log(foo); // "default string"

09-32

그러나 ?? 는 null 또는 undefined만 아니면 좌항의 피연산자 반환

// 좌항의 피연산자가 Falsy 값이라도 null 또는 undefined이 아니면 좌항의 피연산자를 반환한다.
var foo = '' ?? 'default string';
console.log(foo); // ""

Twitter Facebook LinkedIn

9.1 타입 변환이란?(09-01)

09-02

9.2 암묵적 타입 변환(09-03)

9.2.1 문자열 타입으로 변환(09-04)

09-05

09-06

9.2.2 숫자 타입으로 변환(09-07)

09-08

09-09

9.2.3 불리언 타입으로 변환(09-10)

09-11

09-12

09-13

9.3 명시적 타입 변환

9.3.1 문자열 타입으로 변환(09-14)

9.3.2 숫자 타입으로 변환(09-15)

9.3.3 불리언 타입으로 변환(09-16)

9.4 단축 평가

9.4.1 논리 연산자를 사용한 단축 평가(09-17)

09-18

09-19

09-20

09-21

09-22

09-23

09-24

09-25

9.4.2 옵셔널 체이닝 연산자(09-26)

09-27

09-28

09-29

9.4.3 null 병합 연산자(09-30)

09-31

09-32

공유하기

댓글남기기

참고

2022-05-10 08장 제어문 Modern_JavaScript_Deep_Dive

2022-05-10 09장 타입 변환과 단축 평가 Modern_JavaScript_Deep_Dive

2022-05-10 10장 객체 리터럴 Modern_JavaScript_Deep_Dive

2022-05-10

08장 제어문

Modern_JavaScript_Deep_Dive

2022-05-10

09장 타입 변환과 단축 평가

Modern_JavaScript_Deep_Dive

2022-05-10

10장 객체 리터럴

Modern_JavaScript_Deep_Dive