반응형
9.1 타입 변환이란?
- 자바스크립트의 모든 값은 타입이 있음.
- 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환 가능
- 개발자가 의도적으로 값의 타입을 변환하는 것 = 명시적 타입 변환
- 타입 캐스트 연산자를 사용하여 강제적으로 수행하는 타입 변환을 의미
- 명시적 타입 변환이나 암묵적 타입 변환이 기존 원시 값을 직접 변경하는 것은 아님.
- 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성
let x = 10;
let str = x.toString();
console.log(typeof str, str); // string 10
console.log(typeof x, x); // number 10
9.2 명시적 형변환
- 타입을 변경하는 기본적인 방법
- Number: 정수형과 실수형의 숫자로 변환, 보통 문자형을 숫자형으로 변경할 때 사용. 숫자로 변환되지 않는 경우는 NaN(Not a Number)을 반환
- parseInt: 정수형의 숫자로 변환
- String: 다른 자료형을 문자형으로 변환
- toString: 주어진 값을 문자열로 변환 후 반환
- Boolean: Boolean 값을 만들어냄
9.3 암묵적 타입 변환
- 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환 = 암묵적 타입 변환
let str = x + '';
console.log(typeof str, str); string 'x'
- 9.2.1 문자열 타입으로 변환
- 문자열 연결 연산자의 피연산자 중에서 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환을 함.
1 + '2' // '12'
- 9.2.2 숫자 타입으로 변환
1 - '1' // 0
1 * '10' // 10
1 / 'one' // NaN
+'0' // 0
+'1' // 1
+'string' // NaN
+true // 1
+false // 0
+null // 0
+undefined // NaN
// 단항연산자는 피연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환 수행
+{} // NaN
+[10, 20] // NaN
+(function(){}) // NaN
- 9.2.3 불리언 타입으로 변환
- if문이나 for문 같은 제어문 또는 삼항 조건 연산자의 조건식은 불리언 값, 즉 논리적 참/거짓으로 평가되어야 하는 표현식임.
- false로 평가되는 값: false, undefined, null, 0, -0, NaN, ‘’(빈 문자열)
if ('') console.log('1');
if (true) console.log('2');
if (0) console.log('3');
if ('str') console.log('4');
'2' '4'
9.4 명시적 타입 변환
- 개발자의 의도에 따라 명시적으로 타입을 변경하는 방법은 다양함.
9.4.1. 문자열 타입으로 변환
- String 생성자 함수를 new 연산자 없이 호출하는 방법
String(1); "1"
String(NaN); "NaN"
String(Infinity);
String(true);
String(false);
- Object.prototype.toString 메서드를 사용하는 방법
(1).toString(); // "1"
(NaN).toString(); // "NaN"
(Infinity).toString(); // "Infinity"
(true).toString(); // "true"
(false).toString(); // "false"
9.4.2. 숫자 타입으로 변환
- Number 생성자 함수를 new 연산자 없이 호출하는 방법
- parseInt, parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능)
- + 단항 산술 연산자를 이용하는 방법
- * 산술 연산자를 이용하는 방법
Number('0');
Number('-1');
Number('10.53');
Number(true);
Number(false);
// 문자열만 변환 가능
parseInt('0');
parseInt('-1');
parseInt('10.53');
+'0';
+'-1';
'0' * 1; // 0
'-1' * 1; // -1
9.4.3 불리언 타입으로 변환
- 불리언 타입이 아닌 값을 불리언 타입으로 변환하는 방법
- ! 부정 논리 연산자를 두 번 사용하는 방법
Boolean('x'); // true
Boolean(''); // false
Boolean('false'); // true
Boolean(0); // false
Boolean(1); // true
Boolean(NaN); // false
Boolean(null); // false
!!'x'; // true
!!''; // false
!!Infinity // true
9.5 단축 평가
9.5.1 논리 연산자를 사용한 단축 평가
- 논리곱(&&) 연산자나 논리합(||) 연산자 표현식은 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환함.
- 논리곱(&&) 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환함.
- 두 번째 피연산자 위 논리곱 연산자 표현식의 평가 결과를 결정함.
'Cat' && 'Dog' // "Dog"
false && 'Dog' // false
'Cat' && false // false
- 논리합(||) 연산자는 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환함.
- 첫 번째 피연산자 ‘Cat’은 Truthy 값이므로 true로 평가됨.
'Cat' || 'Dog' // "Cat"
false || 'Dog' // "Dog"
'Cat' || false // "Cat"
- 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티 참조할 때
- 변수의 값이 객체가 아니라 null 또는 undefined인 경우 객체의 프로퍼티를 참조하면 타입 에러(TypeError)가 발생
let elem = null;
let value = elem.value; // TypeError: Cannot read property 'value' of null
반응형
'자바스크립트 DeepDive' 카테고리의 다른 글
자바스크립트 DeepDive 11장 원시 값과 객체의 비교 (0) | 2022.10.10 |
---|---|
자바스크립트 DeepDive 10장 객체리터럴 (0) | 2022.10.09 |
자바스크립트 DeepDive 8장 제어문 (1) | 2022.10.06 |
자바스크립트 DeepDive 7장 연산자 (0) | 2022.10.01 |
자바스크립트 DeepDive 6장 데이터 타입 (1) | 2022.10.01 |