[JS] 타입 변환(암묵적, 명시적)

▶ 암묵적 타입 변환

개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되는 것을 말한다. 타입 강제 변환(Type Coercion)이라고도 한다.

console.log("5" + 1); //문자열 '51' 출력
console.log(5 * "5"); // 숫자 25 출력

▷ 문자열 타입으로 변환

문자열에서 +는 문자열 연결 연산자로 이용된다. 문자열 연결 시 피연산자 중 문자열 타입이 아닌 경우 문자열로 암묵적 타입 변환을 실행한다.

//숫자 타입
0 +
  "1" - // '01'
  0 +
  ""; // '0'
NaN + ""; // "NaN"

// 불리언 타입
true + ""; // 'true'
false +
  ""(
    // 'false'

    // 심볼 타입
    Symbol()
  ) +
  ""(
    // TypeError

    // 객체 타입
    {}
  ) +
  ""[(10, 20)] + // "[object Object]"
  ""; // "10,20"

▷ 숫자 타입으로 변환

산술 연산자의 피연산자 중에서 숫자 타입이 나닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다.

console.log(1 - "1"); // 0
console.log(1 * 10); // 10
console.log(1 / "one"); // NaN(피연산자를 숫자 타입으로 변환할 수 없음 -> 산술연산 수행 불가)

JS 엔진은 비교 연산자 표현식을 평가하기 위해 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다.

"1" > 0; // true

즉, +단항 연산자는 피연산자가 숫자 타입의 값이 아니면 숫자 타입의 값으로 암묵적 타입 변환을 수행한다.

// 문자열 타입
+"" + // 0
  "0" + // 0  ( 1+'0'일 경우 '10'의 문자열이 된다. 숫자 타입보다 문자열 타입 변환이 우선한다는 걸 알 수 있다 )
  "string" + // NaN
  // 불리언 타입
  true + // 1
  false + // 0
  // null 타입
  null + // 0
  // 객체 타입
  undefined + // NaN
  {} + // NaN
  [] + // 0
  [10, 20]; // NaN

▷ 불리언 타입으로 변환

false로 평가되는 Falsy값: false, undefined, null, 0, -0, NaN, ‘’ (빈문자열)

위의 Falsy값 외에는 모두 true로 평가되는 Truthy 값이다.

const booleanValue = Boolean(value);

var value = undefined;
console.log(booleanValue); // false

var value = 0;
console.log(booleanValue); // false

value = NaN;
console.log(booleanValue); // false

---

▶ 명시적 타입 변환

프로그래머가 의도적으로 데이터 타입을 변환하는 것을 말한다.

• 프로그래밍 언어에서 제공하는 타입 변환 함수나 연산자를 사용하여 데이터 타입을 직접 변환한다. 타입 캐스팅(Type Casting) 이라고도 한다.

▷ 문자열 타입으로 변환

타입 변환 함수: parseInt(), parseFloat(), String(), Number() 등

// 1. String 생성자 함수를 new 연산자 없이 호출

String(1); // '1'
String(true); // 'true'
String(NaN)(
  // 'NaN'

  // 2. Object.prototype.toString 메서드를 사용
  1
).toString(); // '1'
NaN.toString(); // 'NaN'
true.toString(); // 'true'

// 3. 문자열 연결 연산자 사용
1 + ""; // '1'
true + ""; // 'true

▷ 숫자 타입으로 변환

// 1. Number 생성자 함수 사용
Number("0"); // 0
Number(true); // 1
Number(false); // 0

// 2. parseInt, parseFloat 함수 사용(문자열만 변환 가능)
parseInt("0"); // 0
parseFloat("10.53") + // 10.53
  // 3. +단항 산술 연산자 사용
  "0" + // 0
  true + // 1
  false; // 0

// 4. * 산술 연산자 사용
"0" * 1; // 0
true * 1; // 1
false * 1; // 0

▷ 불리언 타입으로 변환

// 1. Boolean 생성자 함수 사용
Boolean("x"); // true
Boolean(""); //false
Boolean("false"); // true

Boolean(0); // false
Boolean(1); // true

Boolean({}); // true
Boolean([]); // true

// 2. ! 부정 논리 연산자를 두 번 사용
!!"x"; // true
!!""; // false
!!"false"; // true
!!0; // false
!!1; // true
!!{}; // true
!![]; // true

---

📎참조

자바스크립트 암묵적 타입 변환 자바스크립트 암묵적 타입 변환과 명시적 타입 변환