[JavaScript] 모던 자바스크립트 Deep Dive 9장 타입 변환과 단축 평가
타입 변환과 단축 평가
타입 변환이란?
- 명시적 타입 변환(타입 캐스팅) : 개발자가 의도적으로 값의 타입을 변환하는 것
- 암묵적 타입 변환(타입 강제 변환) : 개발자의 의도와 상관없이 표현식을 평가하는 도중에 자바스트립트 엔진에 의해 암묵적으로 타입이 변환되는 것
- 타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다. 즉, 원시 값은 변경 불가능한 값이다.
- 즉, 암묵적 타입 변환은 기존 변수 값을 재할당하여 변경하는 것이 아니다. 자바스크립트 엔진은 표현식을 에러 없이 평가하기 위해 피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한 번 사용하고 버린다.
10.toString() <<<<<< 10 + ''
// 가독성 측면에서 때로는 암묵적 타입변환이 더 좋기 때문에 사용한다.
// 중요한 것은 코드를 예측할 수 있어야 한다는 것
문자열 타입으로 변환
- 아래 예제의 + 연산자는 피연산자 중 하나 이상이 문자열이므로 문자열 연결 연산자로 동작한다. 문자열 연결 연산자의 역할은 문자열 값을 만드는 것이다.
- 따라서 문자열 연결 연산자의 모든 피연산자는 코드의 문맥상! 모두 문자열 타입이어야 한다.
- 문자열 타입으로 변환하기 위해서는 toString() 대신 +''을 사용하자!
1 + '2' // '12'
// 숫자 타입
0 + '' // '0'
NaN + '' // 'NaN'
// 불리언 타입
true + '' // 'true'
숫자 타입으로 변환
- 산술 연산자의 역할은 숫자 값을 만드는 것이다. 따라서 모든 피연산자는 문맥상 모두 숫자 타입이어야 한다.
- 숫자 타입으로 변환할 수 없는 경우는 표현식의 평가 결과는 NaN이 된다.
1 - '1' // 0
1 * '10' // 10
1 / 'one' // NaN
'1' > 0 // true
문자열을 숫자로 만드는 법
+'' // 0
+'0' // 0
+'1' // 1
+ 'string' // NaN
+true // 1
+false // 0
Falsy 값
false
undefined
null
0, -0
NaN
""(빈 문자열)
명시적 타입 변환
문자열 타입으로 변환
- String 생성자 함수를 new 연산자 없이 호출하는 방법
String(1) // "1"
String(NaN) // "NaN"
- Object.prototype.toString 메서드를 사용하는 방법
(1).toString(); // "1"
(NaN).toString(); // "NaN
- 문자열 연결 연산자를 사용하는 방법
1 + ''; // "1" NaN + ''; // "NaN"
#### 숫자 타입으로 변환
1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
```js
Number('0') // 0
Number('-1') // -1
- parseInt.parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능)
parseInt('0') // 0
parseInt('-1') // -1
- 단항 산술 연산자를 이용하는 방법
+'0' // 0
+'-1' // -1
- 산술 연산자를 이용하는 방법
'0' * 1 // 0
'-1' * 1 // -1
불리언 타입으로 변환
Boolean('x'); // true
!!'x'; // true
!! 'false' // true
단축 평가
단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.
// 논리합(||) 연산자
'Cat' || 'Dog' // 'Cat'
false || 'Dog' // 'Dog'
'Cat' || false // 'Cat'
// 논리곱(&&) 연산자
'Cat' && 'Dog' // 'Dog'
false && 'Dog' // false
'Cat' && false // false
let done = true;
let message = '';
if (done) messgae = '완료';
message = done && '완료';
console.log(message); // 완료;
객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때
let elem = null;
let value = elem.value; // Type Error;
let elem = null;
let value = elem && elem.value; // null
옵셔널 체이닝 연산자
옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
let elem = null;
let value = elem?.value;
console.log(value); undefined
null 병합 연산자
null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undeifned인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다.
let foo = null ?? 'default string';
console.log(foo); // "default string"
Author And Source
이 문제에 관하여([JavaScript] 모던 자바스크립트 Deep Dive 9장 타입 변환과 단축 평가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lifefm_j/JavaScript-모던-자바스크립트-Deep-Dive-9장-타입-변환과-단축-평가저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)