[Javascript] 타입 변환(type coercion)

타입 변환(type coercion)

 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환(explicit coercion), 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것을 암시적 타입 변환(implicit coercion)이라고 한다.

두 타입 변환은 기존 원시 값을 직접 변경하는 것이 아니라 기존의 값으로 다른 타입의 새로운 원시 값을 생성하는 것이다.

명시적 타입 변환(explicit coercion)

 명시적으로 타입을 변경하는 방법은 표준 built-in 생성자 함수를 new 연산자 없이 호출하는 방법과 built-in 메서드를 사용하는 방법 등이 있다.

📌 표준 built-in 생성자 함수와 표준 built-in 메서드는 자바스크립트에서 기본 제공하는 함수이다. 표준 built-in 생성자 함수는 객체를 생성하기 위한 함수이며 new 연산자와 함께 호출한다.

string 타입으로 변환

1. 문자열 연결 연산자 이용
2. string 생성자 함수를 new 연산자 없이 호출
3. Object.prototype.toString 메서드를 사용

// to string type
// 1. 문자열 연결 연산자 이용
// number -> string
5 + '2'; // "52"
NaN + ''; // "NaN"

// boolean -> string
true + ''; // "true"
false + ''; // "false"

// 2. string 생성자 함수를 new 연산자 없이 호출
// number -> string
String(5); // "5"

// boolean -> string
String(true); // "true"
String(false); // "false"

// 3. Object.prototype.toString 메서드 사용
// number -> string
(5).toString(); // "5"
(NaN).toString(); // "NaN"

// boolean -> string
(true).toString(); // "true"
(false).toString(); // "false"

number 타입으로 변환

1. + 단항 산술 연산자 / * 산술 연산자 이용
2. number 생성자 함수를 new 연산자 없이 호출
3. parseInt.parseFloat 함수 사용(문자열만 가능)

// to number type
// 1. + 단항 산술 연산자 / * 산술 연산자 이용
// string -> number
+'2'; // 2
'2' * 1; // 2

// boolean -> number
+true; // 1
false * 1; // 0

// 2. number 생성자 함수를 new 연산자 없이 호출
// string -> number
Number('2'); // 2
Number('18.23'); // 18.23

// boolean -> number
Number(true); // 1
Number(false); // 0

// 3. parseInt.parseFloat 함수 사용 (문자열만 가능)
// string -> number
parseInt('2'); // 2
parseInt('-5'); // -5

boolean 타입으로 변환

1. ! 부정 논리 연산자를 두 번 사용
2. boolean 생성자 함수를 new 연산자 없이 호출

// to boolean type
// 1. ! 부정 논리 연산자를 두 번 사용
// string -> boolean
!!'a'; // true
!!''; // false

// number -> boolean
!!1; // true
!!0; // false
!!NaN; // false
!!Infinity; // true

// null, undefined -> boolean
!!null; // false
!!undefined; // false

// object -> boolean
!!{}; // true
!![]; // true

// 2. boolean 생성자 함수를 new 연산자 없이 호출
// string -> boolean
Boolean('a'); // true
Boolean('false'); // true

// number -> boolean
Boolean(1); // true
Boolean(0); // false
Boolean(NaN); // false
Boolean(Infinity); // true

// null, undefined -> boolean
Boolean(null); // false
Boolean(undefined); // false

// object -> boolean
Boolean({}); // true
Boolean([]); // true

---

암시적 타입 변환(implicit coercion)

 코드 문맥에 부합하지 않는 다양한 상황에서 에러를 발생시키지 않도록 암묵적 타입 변환이 발생한다.

string 타입으로 변환

 피연산자 중 하나 이상이 문자열이면 + 연산자는 문자열 연결 연산자로 동작한다.

// to string type
// number
5 + '' // "5"
-10 + '' // "-10"
NaN + '' // "NaN"

// boolean
true + '' // "true"
false + '' // "false"

// null, undefined
null + '' // "null"
undefined + '' // "undefined"

// symbol
(Symbol()) + '' // -> TypeError

// object
({}) + '' // "[object Object]"
[5, 10] + '' // "5, 10"
(function()) + '' // "function(){}"
Array + '' // "function Array() { [native code] }"

number 타입으로 변환

 + 단항 연산자는 피연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 타입 변환한다.

// to number type
// string
+'' // 0
+'10' // 10
+'carrot' // NaN

// boolean
+true // 1
+false // 0

// null, undefined
+null // 0
+undefined // NaN

// symbol
+Symbol() // -> TypeError

// object
+{} // NaN
+[] // 0
+[5, 10] // NaN
+(function(){}) // NaN

빈 문자열(''), 빈 배열([]), null, false => 0
true => 1
객체, 빈 배열이 아닌 배열, undefined => NaN (변환되지 않음)

boolean 타입으로 변환

 제어문이나 삼항 조건 연산자의 조건식은 boolean 값이어야 한다. boolean 타입이 아닌 값이라면 자바스크립트 엔진은 true, false로 암묵적 타입 변환한다.

💡 false로 평가되는 Falsy 값
✔ false   ✔ undefined   ✔ null   ✔ 0, -0   ✔ NaN   ✔ ' '

이외의 값은 모두 true로 평가된다.

// to boolean type
// 인수가 Falsy 값이면 false, Truthy 값이면 true 반환
function isFalsy(a) {
  return !!a;
}

console.log(isFalsy(false));
console.log(isFalsy(undefined));
console.log(isFalsy(null));
console.log(isFalsy(0));
console.log(isFalsy(-0));
console.log(isFalsy(NaN));
console.log(isFalsy(''));

console.log(isFalsy('0'));
console.log(isFalsy([]));
console.log(isFalsy({}));
console.log(isFalsy(true));

[실행결과]
false
false
false
false
false
false
false
true
true
true
true