▶ 암묵적 타입 변환

개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되는 것을 말한다.
타입 강제 변환(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 

// 객체 타입
({}) + '' // "[object Object]"
[10,20] + '' // "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

---

📎참조

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