TIL-007 | JavaScript_타입변환(Type Casting)

1. 타입 변환

• 자바스크립트 값의 타입은 개발자의 의도 혹은 자바스크립트 엔진에 의해 변환 될 수 있다. 전자의 경우 명시적 타입 변환(Explicit coercion) 또는 타입 캐스팅(Type casting)이라고 하며, 후자의 경우 암묵적 타입 변환(Implicit coercion) 또는 타입 강제 변환(Type coercion)이라고 한다.

2. 명시적 타입 변환(Explicit coercion)

- 2-1. 문자열 타입으로의 변환
- 문자열 타입으로의 변환에는 아래와 같은 방법들이 있다.

String()

String(1); // "1"
String(NaN); // "NaN"
String(True); // "True"

toString()
주어진 값을 문자열로 변환하며 인자에 값이 주어지지 않으면 10진수로 변환되고, 예시로 2가 주어지면 2진법 값의 문자열로 변환된다.

var a = 10;
a.toString(); // "10"
a.toString(2); // "1010"
a.toString(5); // "20"

Object.prototype.toString 메소드

var a = 10;
(a).toString(); // "10"
(a).toString(2); // "1010"
(a).toString(5); // "20"

문자열 연결 연산자

console.log(1 + ''); // "1"
console.log(NaN + ''); // "NaN"
console.log(true + ''); // "true"

- 2-2. 불리언 타입으로의 변환

Boolean("10"); //true
Boolean(10); //true
Boolean(""); //false
Boolean(true); //true
Boolean(Object); //true
Boolean([]); //true
Boolean({}); //true
Boolean(0); //false
Boolean(NaN); //false
Boolean(null); //false
Boolean(undefined); //false
Boolean(); //false

부정 논리 연산자(!)를 두번 사용하는 방법

var myNum = 1;
!!myNum // true
!myNum // false

• 2-3. 숫자 타입으로의 변환

Number 생성자 함수를 사용

Number('10'); // 10
Number(true); // 1
Number(false); // 0

parseInt, parseFloat 함수 사용(문자열만 가능)

parseInt('10'); // 10
parseInt(0010); // 8, 앞에 00으로 시작되는 숫자 나오면 8진수로 인식
parseInt(0x10); // 16, 앞에 0x로 시작하면 16진수로 인식
parseInt(' 10십'); // 10
parseInt(' 십10'); // NaN, 앞에 공백을 두고 문자가 나오면 NaN !

parseFloat('10.10'); // 10.10, parseFloat은 항상 10진수 사용

단항 연산자를 통한 변환

+'10'; // 10
+'-10'; // -10
+'Infinity'; // Infinity
-'1000'; // -1000
+true; // 1
+false; // 0
+[]; /// 0
+null; // 0
+'';// 0

3. 암묵적 타입 변환(Implicit coercion)

• 자바스크립트 엔진이 가급적 에러를 발생시키지 않게 하기 위해 필요에 따라 암묵적으로 타입이 변환되는 것을 뜻한다.

• 3-1. 문자열 타입으로의 변환

console.log(1 + "2"); // "12"

-> 위의 예시는 문맥에 문자열 타입이 아닌 피연산자를 문자열로 암묵적으로 타입 변환한 예시 이다. + 연산자는 숫자보다 문자열이 우선시 되어 문자열로 변환된 것이다. 이와 같이 자바스크립트 엔진은 표현식을 평가할 때 문맥, 즉 컨텍스트에 부합하도록 암묵적 타입 변환을 실행한다.

• 3-2. 숫자 타입으로의 변환

console.log(1 - '1');    // 0
console.log(1 - false); // 1
console.log(1 * '10');   // 10
console.log(1 / '1');  // 1
console.log(1 & "1"); // 0
console.log(1 / true); // 1

-> + 연산자 외에 다른 연산자(-, *, /, %)는 숫자 타입이 문자열 타입보다 우선시되어 숫자 타입으로의 변환이 일어난다.

• 3-3. 불리언 타입으로의 변환

Truthy vs Falsy
자바스크립트 엔진은 불리언 값을 기대하는 문맥에서 불리언 타입이 아닌 값을 true로 변환 되는 Truthy 값(참으로 인식할 값) 또는 false로 변환되는 Falsy 값(거짓으로 인식할 값)으로 구분한다.

1) Falsy
자바스크립트에서는 아래와 같은 총 6가지의 Falsy 값이 존재한다.

false
undefined
null
0, -0
NaN
’’ (빈문자열)

2) Truthy
Truthy는 Falsy 6개의 값을 제외한 모든 값이다.
불리언 값을 요구하는 부분에 존재하는 어떤 변수의 값이 Falsy값이 아니라면 Truthy로 판단하여 True 불리언 값으로 변환 된다.

3) 주의해야 할 점❗
Truthy 값은 True로, Falsy 값은 False로 변환되는 것은 맞지만 Truthy/Falsy 값이 True/False값과 동일한건 아니다.

let caution;

if(caution === false){
  console.log("Falsy는 False 맞네");
} else {
  console.log("Falsy는 False와 다르구만!");
} // "Falsy는 False와 다르구만!"

-> 변수 caution은 undefined이므로 Falsy 값이고 이는 False값으로 변환되지만 위의 코드를 실행하면 Falsy 와 False 값은 다르다는 것을 알 수 있다.

👉 참고자료 : https://poiemaweb.com/js-type-coercion