.png)
1. 타입 변환
- 암묵적 타입 변환(implicit coercion) 또는 타입 강제 변환(Type coercion)
개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것
자바스크립트 엔진은 문맥에 따라 데이터의 타입을 암묵적 변환한다.
- 명시적 타입 변환(Explicit coercion) 또는 타입 캐스팅(Type casting)
개발자에 의해 의도적으로 값의 타입을 변환하는 것
1-1. 암묵적 타입 변환
1. 문자열 타입으로 변환
- 문자열 연결 연산자
+
1 + '2' // '12'
// 객체 타입
({}) + '' // '[object object]'
Math + '' // '[object Math]'
[] + '' // ''
[10, 20] + '' // '10,20'
(function(){}) + '' // "function(){}"
Array + '' // "function Array() { [native code] }"+ 연산자를 문자열 연결 연산자로 인식하여 피연산자 중에서 문자열 타입이 아닌 피연산자를 문자열 타입으로 변환한다.
2. 숫자 타입으로 변환
- 산술 연산자
-,*,/ - 비교 연산자
>,< - 단항 연산자
+
1 - '1' // 0
1 * '10' // 10
1 / '2' // 0.5
1 > '0' // true
+ '' // 0
+ [] // 0
+ null // 0
+ false // 0
+ true // 1
+ {} // NaN
+ [1,2] // NaN
+ undefined // NaN단항 연산자 + 가 숫자 타입이 아닌 피연산자를 만났을 경우, 빈 문자열 '', 빈 배열 [], null, false는 0으로, true는 1로 변환한다. 객체와 빈 배열이 아닌 배열, 빈 문자열이 아닌 문자열, undefined는 변환되지 않아 NaN이 된다.
3. 불리언 타입으로 변환
-
if 문이나 for문과 같은 제어문의 조건식
-
false로 취급되는 falsy한 값
- false
- undefined
- null
- 0, -0
- NaN
- '' (빈 문자열)
1-2. 명시적 타입 변환
1. 문자열 타입으로 변환
- String 생성자 함수를 new 연산자 없이 호출하는 방법
String(value)
String(1) // '1'
String(NaN) // 'NaN'
String(true) // 'true'- Object.prototype.toString 메소드를 사용하는 방법
value.toString()
(1).toString() // '1'
(NaN).toString() // 'NaN'
(true).toString() // 'true'- 문자열 연결 연산자를 이용하는 방법
value + ''
1 + '' // '1'
NaN + '' // 'NaN'
true + '' // 'true'2. 숫자 타입으로 변환
- Number 생성자 함수를 new 연산자 없이 호출하는 방법
Number(value)
Number('0') // 0
Number(true) // 1
Number(false) // 0- parseInt, parseFloat 함수를 사용하는 방법
-
parseInt( string, radix )
특정 진수의 정수를 반환하는 함수
radix
수의 진법 체계에 기준이 되는 값
2와 36사이의 수 -
parseFloat(value)
문자열을 실수로 반환하는 함수
첫 번째 문자를 숫자로 반환할 수 없는 경우NaN을 반환
parseInt('0') // 0
parseFloat('10.53') // 10.53- 단항 연결 연산자를 이용하는 방법
+ value
+ '0' // 0
+ '10.53' // 10.53
+ true // 1*산술 연산자를 이용하는 방법
value * 1
'0' * 1 // 0
'10.53' * 1 // 10.53
true * 1 // 1
false * 1 // 03. 불리언 타입으로 변환
- Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
Boolean(value)
Boolean('') // false!부정 논리 연산자를 두번 사용하는 방법
!! value
!!'x' // true
!!'' // false2. 단축평가
| 단축 평가 표현식 | 평가 결과 |
|---|---|
| true OR anything | true |
| false OR anything | anything |
| true AND anything | anything |
| false AND anything | false |
'Cat' && 'Dog' // 'Dog'
'Cat' || 'Dog' // 'Cat'논리합 연산자 ||는 피연산자 중 하나라도 참이면 결과 또한 참이고, 논리곱 연산자 &&는 피연산자가 모두 참이어야 결과가 참이다. 반대로 말하면 논리곱 연산자 &&는 피연산자 중 하나라도 거짓이면 결과는 거짓이다.
논리합 연산자 || 와 논리곱 연산자 &&는 표현식을 평가하는 중간에라도 평가가 결정되면 논리 평가를 결정한 피연산자를 그대로 반환한다.(타입 변경없이) 이를 단축 평가라고 한다.
2-1. 단축 평가 사용 사례
1. 객체의 프로퍼티를 참조하기 전에 객체가 null인지 확인할 때
var elem = null;
console.log(elem.value); // TypeError: Cannont read property 'value' of null
console.log(elem && elem.value); // null객체가 null인 경우 객체의 프로퍼티를 참조하면 타입 에러가 발생하지만, 단축 평가를 사용하면 객체의 값(null)을 반환하기 때문에 에러가 발생하지 않는다.
2. 함수의 인수의 기본값을 설정할 때
function getStringLenth_error(str) {
return str.length;
}
//매개변수의 기본값 설정
//단축평가 사용
function getStringLength(str) {
str = str || '';
return str.length;
}
//ES6
function getStringLength(str = '') {
return str.length;
}
getStringLength_error(); // TypeError: Cannot read ... property 'length' ...
getStringLength(); //0
getStringLength('hi'); // 2함수를 호출할 때 인수를 전달하지 않으면 매개변수는 undefined를 갖고 타입 에러를 발생시킨다. 이때 단축 평가를 사용하여 매개변수의 기본값을 설정하면 undefined로 인해 발생할 수 있는 에러를 방지할 수 있다.
