Mingyu Kim

Type Casting

자바스크립트의 타입 변환(Type Casting) 또는 타입 강제(Type Coercion)는 한 데이터 타입을 다른 데이터 타입으로 바꾸는 과정으로 크게 명시적 변환 (Explicit Coercion)과 암시적 변환 (Implicit Coherent) 으로 나뉜다.

1. 명시적 변환 (Explicit Coercion)

명시적 변환은 개발자가 직접 내장 함수나 메서드를 사용하여 타입을 변환하는것을 말한다.

A. 문자열로 변환 (To String)

방법	설명	예시	결과
String(value)	전역 String() 함수 사용	String(123)	"123"
		String(true)	"true"
value.toString()	대부분의 데이터 타입 메서드 사용	(123).toString()	"123"
		[1, 2].toString()	"1,2"

B. 숫자로 변환 (To Number)

방법	설명	예시	결과
Number(value)	전역 Number() 함수 사용	Number("123")	123
		Number("hello")	NaN
		Number(true)	1
parseInt(string)	문자열에서 정수 부분만 추출	parseInt("42px")	42
parseFloat(string)	문자열에서 부동 소수점 수 추출	parseFloat("3.14원")	3.14

C. 불리언으로 변환 (To Boolean)

방법	설명	예시	결과
Boolean(value)	전역 Boolean() 함수 사용	Boolean(1)	true
		Boolean("")	false
		Boolean(null)	false

⚠️ Falsy 값: 자바스크립트에서 false로 변환되는 6가지 값은 false, 0, “” (빈 문자열), null, undefined, NaN이다. 이 외의 모든 값은 true로 변환된다 (Truthy 값).

2. 암시적 변환 (Implicit Coercion)

암시적 변환은 자바스크립트 엔진이 연산자나 특정 구문이 요구하는 타입에 맞춰 자동으로 타입을 변환하는것을 말한다.

A. 문자열 변환 (주로 + 연산자에서 발생)

덧셈(+) 연산자는 피연산자 중 하나라도 문자열이면 나머지 피연산자도 문자열로 변환하고 문자열 연결을 수행한다.

• "5" + 2 $\rightarrow$ "52"
• 5 + "2" $\rightarrow$ "52"
• "5" + true $\rightarrow$ "5true"

B. 숫자 변환 (주로 산술 연산자에서 발생)

덧셈(+)을 제외한 다른 산술 연산자(-, *, /, %)나 비교 연산자(>, <, <=, >=)는 피연산자를 숫자로 변환하여 연산을 수행한다.

• "5" - 2 $\rightarrow$ 3 ("5"가 5로 변환됨)
• "5" * "2" $\rightarrow$ 10
• "5" < 6 $\rightarrow$ true
• null + 1 $\rightarrow$ 1 (null이 0으로 변환됨)
• undefined + 1 $\rightarrow$ NaN (undefined가 NaN으로 변환됨)

C. 불리언 변환 (주로 논리 연산자나 조건문에서 발생)

논리 연산자(&&, ||, !)나 if와 같은 조건문은 피연산자를 불리언 타입으로 변환하여 평가한다.

• if ("hello") $\rightarrow$ true로 평가됨
• !0 $\rightarrow$ true (0이 false로 변환됨)

3. 동등 비교 연산자 (== vs ===)

타입 변환을 논할 때 가장 중요한 것은 동등 비교 연산자다.

• == (느슨한 동등 비교): 비교 전 암시적 타입 변환을 시도하여 두 피연산자의 타입이 같도록 만든 후 비교한다. 이 때문에 예상치 못한 결과를 초래할 수 있어 사용을 권장하지 않는다.
• === (엄격한 동등 비교): 타입 변환 없이 두 피연산자의 타입과 값이 모두 같아야 true를 반환한다.

연산자	타입 변환	권장 사용	예시	결과
==	O (암시적 변환)	비권장	1 == "1"	true
===	X	권장	1 === "1"	false