티스토리 뷰
타입 변환이란?
타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것입니다. 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라고 합니다. 개발자의 의도와는 상관 없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환하는것을 암묵적 타입 변환 또는 타입 강제 변환이라 합니다.
var x = 10;
var str = x + '';
console.log(typeof str, str); // string 10
// x 변수의 값이 변경된것은 아닙니다.
console.log(typeof x, x); // number 10
암묵적 타입 변환
암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환합니다.
문자열 타입으로 변환
`+` 연산자는 피연산자 중 하나 이상이 문자열로 이루어져 있으면 문자열 연결 연산자로 동작합니다.
// 숫자 타입
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: Connot convert a Symbol value to a string
// 객체 타입
({}) + '' // "[obejct Object]"
Math + '' // "[obejct Math]"
[] + '' // ""
[10, 20] + '' // "10,20"
(function(){}) // "function(){}"
Array + '' // function Array() { [native code] }숫자 타입으로 변환
1 - '1' // 0
1 * '10' // 10
1 / 'one' // NaN
'1' > 0 // true
// 문자열 타입
+'' // 0
+'0' // 0
+'1' // 1
+'string' // NaN
// 불리언 타입
+true // 1
+false // 0
// null 타입
+null // 0
// undefined 타입
+undefined // NaN
// 심벌 타입
+Symbol() // TypeError: Connot convert a Symbol value to a number
// 객체 타입
+{} // NaN
+[] // 0
+[10, 20] // NaN
+(function(){}) // 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자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy(참으로 평가되는 값) 또는 Falsy(거짓으로 평가되는 값)으로 구분합니다.
`false`로 평가되는 Falsy 값
- `false`
- `undefined`
- `null`
- `0`, `-0`
- `NaN`
- `''`(빈 문자열)
Falsy 값 이외의 모든 값은 모두 `true`로 평가되는 Truthy값입니다.
명시적 타입 변환
명시적으로 타입을 변경하는 방법은 표준 빌트인 생성자 함수(`String`,`Number`,`Boolean`)를 `new` 연산자 없이 호출하는 방법과 빌트인 매서드를 사용하는 방법, 암묵적 타입변환을 활용하는 방법이 있습니다.
문자열 타입으로 변환
문자열 타입이 아닌 값을 문자열 타입으로 변환하는 방법은 다음과 같습니다.
- `String` 생성자 함수를 `new` 연산자 없이 호출하는 방법
- `Object.prototype.toString` 메서드를 사용하는 방법
- 문자열 연결 연산자를 이용하는 방법
// 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"숫자 타입으로 변환
숫자 타입이 아닌 값을 숫자 타입으로 변환하는 방법은 다음과 같습니다.
- `Number` 생성자 함수를 `new` 연산자 없이 호출하는 방법
- `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
불리언 타입으로 변환
불리언 타입이 아닌 값을 불리언 타입으로 변환하는 방법은 다음과 같습니다.
- `Boolean` 생성자 함수를 `new` 연산자 없이 호출하는 방법
- `!` 부정 논리 연산자를 두 번 사용하는 방법
// 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
단축 평가
논리 연산자를 사용한 단축 평가
- 논리 AND (`&&`)와 논리 OR (`||`) 연산자는 단축 평가를 수행하여 첫 번째 피연산자로 결과가 결정될 경우 두 번째 피연산자를 평가하지 않습니다.
- `&&` 연산자는 첫 번째 피연산자가 `true`일 때만 두 번째 피연산자를 평가합니다. 예를 들어, `'Cat' && 'Dog'`는 'Dog'를 반환합니다.
- `||` 연산자는 첫 번째 피연산자가 `true`일 경우 해당 값을, 둘 다 `false`일 경우 마지막 피연산자를 반환합니다.
단축 평가 규칙:
- OR (`||`): `true || anything` → `true`, `false || anything` → anything`
- AND (`&&`): `true && anything` → `anything`, `false && anything` → `false`
옵셔널 체이닝 연산자 (`?.`)
- ES11 (ES2020)에서 도입된 선택적 체이닝 연산자 (`?.`)는 참조가 `null` 또는 `undefined`인 경우에도 안전하게 접근할 수 있도록 해줍니다.
- 예시: `var value = elem?.value;`
- 만약 `elem`이 `null` 또는 `undefined`라면, `value`는 오류 없이 `undefined`가 됩니다.
널 병합 연산자 (??)
- 널 병합 연산자 (`??`)는 왼쪽 피연산자가 `null` 또는 `undefined`일 때만 오른쪽 피연산자를 반환합니다.
- 기본값을 설정할 때 유용합니다: `var foo = null ?? '기본값'`;은 '기본값'을 반환합니다.
- `||`와 달리, `??`는 `null` 또는 `undefined`만 체크하며, 0이나 ''와 같은 다른 falsy 값은 무시합니다.
단축 평가의 실용적인 활용
- 널 값에 대한 오류 방지:
- `&&`나 `?.`을 사용하여 객체의 속성에 접근하기 전에 존재 여부를 확인할 수 있습니다.
- 기본 매개변수 설정:
- `||`나 `??`를 사용하여 변수가 `undefined`일 때 기본값을 설정할 수 있습니다.
예시
- `var length = str?.length ?? 0;`는 `str.length`에 안전하게 접근하고, `str`이 `null` 또는 `undefined`일 경우 0을 기본값으로 설정합니다.
- `var foo = false ?? '기본값';`은 `false`를 반환합니다. 이는 `??`가 `null`이나 `undefined`가 아닌 falsy 값은 무시하기 때문입니다.
참고
모던 자바스크립트 Deep Dive : 네이버 도서
네이버 도서 상세정보를 제공합니다.
search.shopping.naver.com
'Javascript' 카테고리의 다른 글
| [모던자바스크립트 Deep Dive] 11장 원시 값과 객체의 비교 (2) | 2024.11.10 |
|---|---|
| [모던자바스크립트 Deep Dive] 10장 객체 리터럴 (0) | 2024.11.08 |
| [모던 자바스크립트 Deep Dive] 08장 - 제어문 (0) | 2024.11.04 |
| [모던 자바스크립트 Deep Dive] 07장 - 연산자 (1) | 2024.10.30 |
| [모던 자바스크립트 Deep Dive] 06장 - 데이터 타입 (0) | 2024.10.29 |