[Javascript] 타입 변환(type coercion)

nxnaxx·2021년 11월 11일
0

javascript

목록 보기
4/14
post-thumbnail

타입 변환(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

0개의 댓글