[JavaScript 기본] 형 변환 (Type Casting) 정리

`JavaScript`는 동적 타입 언어임.

즉, 변수를 선언할 때 타입을 지정하지 않고, 실행 중에 데이터 타입이 자유롭게 바뀔 수 있음.

 

이때문에 자동으로 형 변환이 일어나기도 하고, 개발자가 직접 변환을 명시하기도 함

---

1. 묵시적 형 변환

• `JavaScript` 엔진이 알아서 타입을 변환하는 것

let num = 10;
let str = "20";

const result = num + str;
console.log(rseult); // "1020"

• `+` 연산자는 숫자 덧셈뿐 아니라 문자열 연결에도 사용됨
• 한쪽이 문자열이면, JS 엔진이 자동으로 다른 쪽도 문자열로 변환함.

즉,

10 + "20" -> "10" + "20" -> "1020"

 

다른 예시를 보면,

console.log("5" * 2);   // 10  (문자열이 숫자로 바뀜)
console.log("5" - 2);   // 3   (문자열이 숫자로 바뀜)
console.log("5" + 2);   // "52" (문자열 연결)
console.log("5" * "2"); // 10  (둘 다 숫자로 변환)
console.log(1 + true);  // 2   (true → 1)
console.log(1 + false); // 1   (false → 0)

 

• `+` 는 문자열 연결 우선
• `-`, `*`, `/`, `%` 는 숫자 변환 우선
• `true` -> 1, `false` -> 0 으로 변환됨

 

---

2. 명시적 형 변환

• 개발자가 직접 의도적으로 형 변환을 하는 것.
• 내장 함수(`Number()`,  `String()`, `Boolean()`, `parseInt()`, `parseFloat()` 등을 사용함

문자열 -> 숫자

let str1 = "10";
let strToNum1 = Number(str1);
console.log(10 + strToNum1); // 20

 

 

`Number()`는 전체 문자열이 숫자 형태여야 함.

문자가 섞여 있으면 `NaN`을 반환함

let str2 = "10개";
let strToNum2 = Number(str2);
console.log(strToNum2); // NaN

---

`parseInt()`와 `parseFloat()`

`parseInt()`는 문자열에서 숫자만 읽다가 문자를 만나면 멈춤

`parseFloat()`는 소수점까지 허용함

parseInt("10개");   // 10
parseInt("10.5개"); // 10
parseFloat("10.5개"); // 10.5

• 실무에서는 사용자 입력을 처리할 때 `parseInt()`와 `parseFloat()`를 더 자주 씀

---

숫자 -> 문자열

let num1 = 20;
let numToStr1 = String(num1);
console.log(numToStr1 + "입니다"); // "20입니다"

 

`String()`은 가장 명확한 방법이고,

간단히 `num1.toString()`으로도 가능함

let num2 = 15;
console.log(num2.toString()); // "15"

---

`Boolean`변환도 가능

console.log(Boolean(0));       // false
console.log(Boolean(""));      // false
console.log(Boolean(null));    // false
console.log(Boolean(undefined)); // false
console.log(Boolean("hello")); // true
console.log(Boolean(123));     // true

---

정리하자면

변환 대상함수예시결과

변환 대상	함수	예시	결과
문자열 → 숫자	`Number("10")`	10	숫자
문자열 → 정수	`parseInt("10개")`	10	숫자
문자열 → 실수	`parseFloat("10.5")`	10.5	숫자
숫자 → 문자열	`String(10)`	"10"	문자열
숫자 → 문자열	`10.toString()`	"10"	문자열
값 → 불리언	`Boolean("")`	false	논리형