형 변환
- 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환되는데 이를 형변환이라고 한다.
- 수학관련 연산자가 전달받은 값을 숫자로 변환하는 경우가 형 변환의 대표적인 예시
- 전달 받은 값을 의도를 갖고 원하는 타입으로 변환(명시적 변환)해 주는 경우도 형 변환이라고 한다.
문자형으로 변환
- alert메서드는 매개변수로 문자형을 받기 때문에 alert(value)에서 value는 문자형이어야 한다. 다른 형의 값을 전달받으면 이 값은 문자형으로 자동 변환된다.
- String(value) 함수를 호출해 전달받은 값을 문자열로 변환할 수 있다.
숫자형으로 변환
- 숫자형으로 변환은 수학과 관련된 함수와 표현식에서 자동으로 일어난다.
- Number(value)함수를 사용하면 주어진 값(value)을 숫자형으로 명시해서 변환할 수 있다.
- Number(undefined)는 NaN
- Number(null)은 0
- Number(true)은 1, Number(false)는 0
- Number(string)의 경우에는 문자열의 처음과 끝 공백이 제거된다. 공백 제거 후 남아있는 문자열이 없다면 0, 그렇지 않다면 문자열에서 숫자를 읽는다. 변환에 실패하면 NaN이 된다.
불린형으로 변환
- 논리 연산을 수행할 때 변환이 발생한다.
- Boolean(value)를 호출하면 명시적으로 불리언으로 형 변환을 수행할 수 있다.
- 숫자 0, 빈 문자열, null, undefined,NaN과 같이 직관적으로 비어있다고 느껴지는 값들은 false가 된다.
- 그 외의 값은 true로 변환됨.(공백이 있는 문자열도 비어있지 않은 문자열이기 때문에 true를 반환함.)
자바스크립트 딥 다이브(9장)
- 개발자의 의도와 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 것을 암묵적 타입 변환 또는 타입 강제 변환이라고 한다.
- 명시적 타입 변환이나 암묵적 타입 변환이 기존 원시값을 직접 변경하는건 아니다.( 원시값은 불변하는 값이기 때문에 변경할 수 없다.)
⇒ 기존 원시값을 사용해 새로운 원시값을 생성하는것
- 명시적 타입 변환은 나(개발자)의 의도가 명확히 드러나는 반면 암묵적 타입 변환은 그렇지 않다. 때문에 자신이 작성한 코드에 암묵적 타입 변환이 일어나는지 발생한다면 어떤 타입의 값으로 변환되는지 등 예측할 수 있어야 한다.(오류 방지를 위해서)
- 가독성 측면에서 암묵적 타입 변환이 더 좋을 수 있다.
암묵적 타입 변환
// 피연산자가 모두 문자열 타입이어야 하는 문맥
'10' + 2 // '102'
// 피연산자가 모두 숫자 타입이어야 하는 문맥
5 * '10' // 50
// 피연산자 또는 표현식이 불리언 타입이어야 하는 문맥
!0 //true
if(1){ }-
자바스크립트 엔진은 개발자의 의도와 다르게 코드의 문맥을 고려해 암묵적으로 타입을 강제 변환할 때가 있다.
-
문자열 타입으로 변환
1 + '2' // '12'- 예제의 + 연산자는 피연산자 중 하나 이상이 문자열이므로 문자열 연결 연산자로 동작한다.
- 문자열 연결 연산자의 모든 피연산자는 코드의 문맥상 모두 문자열 타입이어야 한다.
- 자바스크립트 엔진은 문자열 연결 연산자의 피연산자 중에서 문자열이 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환한다.
- 템플릿 리터럴의 표현식 삽입은 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변화한다.
`1 + 1 = ${1 + 1}` // "1 + 1 = 2"
- 숫자 타입으로 변환
1 - '1' // 0 1 * '10' // 10 1 / 'one' // NaN-
예제에서 사용한 연산자는 모두 산술 연산자이다.
-
산술 연산자의 역할은 숫자 값을 만드는 것이다.
-
산술 연산자의 모든 피연산자는 코드 문맥상 숫자 타입이어야 한다.
-
자바스크립트 엔진은 산술 연산자 표현식을 평가하기 위해 산술 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다.
-
피연산자를 숫자 타입으로 변환할 수 없는 경우는 산술 연산을 수행할 수 없으므로 표현식 평가 결과는 NaN이 된다.
-
피연산자를 숫자 타입으로 변환해야 할 문맥은 산술 연산자뿐만이 아니다.
'1' > 0 // true -
비교 연산자의 역할은 불리언 값을 만드는 것이다.
-
비교 연산자는 피연산자의 크기를 비교하므로 모든 피연산자는 코드 문맥상 숫자 타입이어야 한다.
-
자바스크립트 엔진은 비교 연산자 표현식을 평가하기 위해 비교 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다.
-
+단항 연산자는 피연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환을 수행한다.
// 문자열 타입 +'' // 0 +'1' // 1 +'string' // NaN // 불리언 타입 +true // 1 +false // 0 // null 타입 +null // 0 // undefined +undefined // NaN // 심벌 타입 +Symbol() // TypeError // 객체 타입 +{} // NaN +[] // 0 +[10, 20] // NaN +(function(){}) // NaN -
빈 문자열, 빈 배열, null, false는 0
-
true는 1
-
객체와 빈 배열이 아닌 배열, undefined는 변환되지 않아 NaN이 된다.
-
- 불리언 타입으로 변환
if('') console.log(x);-
if 문이나, for문과 같은 제어문 또는 삼항 조건 연산자의 조건식은 불리언 값으로 평가되어야 하는 표현식이다.
-
자바스크립트 엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환한다.
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값이다.
-
명시적 타입 변환
- 개발자의 의도에 따라 명시적으로 타입을 변경하는 방법은 다양하다.
- 표준 빌트인 생성자 함수를 new 연산자 없이 호출하는 방법
- 빌트인 메서드를 사용하는 방법
- 암묵적 타입 변환을 이용하는 방법
- 문자열 타입으로 변환
- String 생성자 함수를 new 연산자 없이 호출하는 방법
- Object.prototype.toString 메서드를 사용하는 방법
- 문자열 연결 연산자를 이용하는 방법
String(1); // '1'
(1).toString(); // '1'
1 + ''; // '1'- 숫자 타입으로 변환
- Number 생성자 함수를 new 연산자 없이 호출하는 방법
- parseInt, parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능)
- +단항 산술 연산자를 이용하는 방법
- 산술 연산자를 이용하는 방법
Number('1'); // 1
Number(false); // 0
Number(true); // 1
parseInt('0'); // 0
parseFloat('10.53'); // 10.53
+ '0'; // 0
+true; // 1
'0' * 1; // 0
false * 1; // 0- 불리언 타입으로 변환
- Boolean 생성자를 new 연산자 없이 호출하는 방법
- ! 부정 논리 연산자를 두번 사용하는 방법
Boolean('x'); // true
Boolean(''); // false
Boolean(0); // false
Boolean(NaN); // fasle
Boolean({}); // true
!!'x'; // true
!!Infinity // true