자바스크립트 형변환 완벽 가이드

자바스크립트를 다루다 보면 "5" + 1이 "51"이 되고, "5" - 1은 4가 되는 상황을 마주하게 됩니다. 처음에는 혼란스러울 수 있지만, 이는 자바스크립트의 형변환(Type Conversion) 메커니즘 때문입니다.

형변환은 한 데이터 타입을 다른 타입으로 변환하는 과정을 말합니다. 자바스크립트는 동적 타입 언어이기 때문에, 개발자가 명시적으로 타입을 지정하지 않아도 런타임에서 자동으로 타입이 결정되고 변환됩니다. 이런 특성은 개발을 편리하게 만들지만, 예상치 못한 버그의 원인이 되기도 합니다.

이 글에서는 명시적 형변환과 암묵적 형변환의 차이부터 객체의 형변환, 그리고 실무에서 주의해야 할 함정까지 자바스크립트 형변환의 모든 것을 다룹니다. 이 가이드를 통해 형변환의 작동 원리를 정확히 이해하고, 더 안전하고 예측 가능한 코드를 작성할 수 있게 될 거예요.

명시적 형변환 vs 암묵적 형변환

자바스크립트의 형변환은 크게 두 가지로 나뉩니다.

명시적 형변환(Explicit Type Conversion)은 개발자가 의도를 가지고 직접 타입을 변환하는 것입니다. String(), Number(), Boolean() 같은 함수를 사용해 명확하게 타입을 바꿉니다.

암묵적 형변환(Implicit Type Conversion 또는 Type Coercion)은 자바스크립트 엔진이 자동으로 타입을 변환하는 것입니다. 연산자나 함수가 예상하는 타입과 다른 값을 받았을 때 자동으로 변환이 일어납니다.

// 명시적 형변환
const num = Number("123");  // 문자열 → 숫자

// 암묵적 형변환
const result = "5" + 1;  // "51" (숫자 1이 문자열로 변환됨)

명시적 형변환은 코드의 의도를 명확하게 드러내기 때문에 가독성과 유지보수성이 높습니다. 반면 암묵적 형변환은 편리하지만 예상치 못한 결과를 만들 수 있어요.

명시적 형변환 기법

문자열로 변환하기

문자열로 변환하는 방법은 세 가지가 있습니다.

String() 함수 사용

String() 함수는 어떤 값이든 문자열로 변환합니다.

String(123);        // "123"
String(true);       // "true"
String(null);       // "null"
String(undefined);  // "undefined"

.toString() 메서드 사용

대부분의 값은 .toString() 메서드를 가지고 있습니다. 하지만 null과 undefined는 이 메서드가 없어서 에러가 발생합니다.

(123).toString();   // "123"
true.toString();    // "true"
[1, 2, 3].toString(); // "1,2,3"

// null과 undefined는 에러 발생
// null.toString();  // TypeError

빈 문자열과 연결

빈 문자열("")과 + 연산자를 사용하면 간단하게 문자열로 변환할 수 있습니다.

123 + "";     // "123"
true + "";    // "true"
null + "";    // "null"

숫자로 변환하기

숫자로 변환하는 방법도 여러 가지가 있습니다.

Number() 함수 사용

Number() 함수는 문자열이나 불린 값을 숫자로 변환합니다. 변환할 수 없는 값은 NaN(Not a Number)을 반환합니다.

Number("123");      // 123
Number("123abc");   // NaN
Number(true);       // 1
Number(false);      // 0
Number(null);       // 0
Number(undefined);  // NaN
Number("   123   "); // 123 (앞뒤 공백 제거)

parseInt()와 parseFloat() 사용

parseInt()와 parseFloat()는 문자열의 앞부분부터 숫자를 파싱합니다. 숫자가 아닌 문자를 만나면 그 앞까지만 변환합니다.

parseInt("123", 10);     // 123
parseInt("123px", 10);   // 123 (px는 무시)
parseInt("abc123", 10);  // NaN (숫자로 시작하지 않음)
parseFloat("3.14");      // 3.14
parseFloat("3.14.15");   // 3.14 (첫 번째 소수점까지만)

parseInt()의 두 번째 인자는 진법(radix)을 나타냅니다. 10진수로 변환할 때는 10을 명시하는 것이 안전합니다.

단항 더하기 연산자

단항 + 연산자는 값을 숫자로 빠르게 변환하는 방법입니다.

+"123";    // 123
+"10";     // 10
+true;     // 1
+false;    // 0
+"abc";    // NaN

불린으로 변환하기

Boolean() 함수 사용

Boolean() 함수는 값을 불린으로 변환합니다.

Boolean(1);       // true
Boolean(0);       // false
Boolean("hello"); // true
Boolean("");      // false
Boolean([]);      // true (빈 배열도 truthy)
Boolean({});      // true (빈 객체도 truthy)

Falsy 값 vs Truthy 값

자바스크립트에는 false로 변환되는 특별한 값들이 있습니다. 이를 falsy 값이라고 합니다.

Falsy 값 (총 8개):

• false
• 0
• -0
• 0n (BigInt 0)
• NaN
• "" (빈 문자열)
• null
• undefined

이 외의 모든 값은 truthy 값입니다. 주의할 점은 다음과 같은 값들도 truthy라는 것입니다:

Boolean("false");     // true (문자열 "false")
Boolean("0");         // true (문자열 "0")
Boolean([]);          // true (빈 배열)
Boolean({});          // true (빈 객체)
Boolean(" ");         // true (공백 문자)
Boolean(function(){}); // true (함수)

암묵적 형변환의 다양한 상황

문자열 컨텍스트

+ 연산자에서 피연산자 중 하나라도 문자열이면, 다른 쪽도 문자열로 변환됩니다.

"5" + 1;           // "51"
1 + "5";           // "15"
"Hello" + true;    // "Hellotrue"
"Result: " + 100;  // "Result: 100"

하지만 여러 값을 더할 때는 순서가 중요합니다:

1 + 2 + "3";  // "33" (1+2=3, 3+"3"="33")
"1" + 2 + 3;  // "123" ("1"+2="12", "12"+3="123")

숫자 컨텍스트

+를 제외한 산술 연산자(-, *, /, %)는 피연산자를 숫자로 변환합니다.

"5" - 1;     // 4
"5" * "2";   // 10
"5" / 2;     // 2.5
"5" % 2;     // 1
"10" - "3";  // 7

예외적으로 변환할 수 없는 경우 NaN이 됩니다:

"abc" - 1;   // NaN
"5" * "abc"; // NaN

불린 컨텍스트

조건문(if, else)에서는 값이 자동으로 불린으로 변환됩니다.

if ("") {
  console.log("빈 문자열"); // 실행 안 됨
}

if ("Hello") {
  console.log("문자 있음"); // ✅ 실행됨
}

if (0) {
  console.log("0"); // 실행 안 됨
}

if ([]) {
  console.log("배열"); // ✅ 실행됨 (빈 배열은 truthy)
}

논리 연산자(&&, ||, !)도 불린 컨텍스트를 만듭니다:

!!"hello";  // true
!!0;        // false
"text" && 5; // 5 (첫 번째가 truthy면 두 번째 반환)
0 || "default"; // "default" (첫 번째가 falsy면 두 번째 반환)

느슨한 동등 비교 (==)

== 연산자는 타입이 다를 때 암묵적 형변환을 수행합니다.

"5" == 5;        // true (문자열 "5"가 숫자 5로 변환)
"0" == false;    // true (둘 다 0으로 변환)
0 == "";         // true (빈 문자열이 0으로 변환)
null == undefined; // true (특수 케이스)
null == 0;       // false (null은 0으로 변환되지 않음)

이런 예상치 못한 동작 때문에 == 대신 엄격한 동등 비교 연산자 ===를 사용하는 것이 권장됩니다.

"5" === 5;       // false
"0" === false;   // false
0 === "";        // false

객체와 형변환

객체는 원시 값으로 변환될 때 특별한 메서드를 사용합니다.

toString()과 valueOf() 메서드

객체가 문자열이나 숫자로 변환될 때 자바스크립트는 다음 순서로 메서드를 호출합니다:

1. 문자열 컨텍스트: toString() → valueOf()
2. 숫자 컨텍스트: valueOf() → toString()

const obj = {
  toString() {
    return "객체";
  },
  valueOf() {
    return 42;
  }
};

String(obj);  // "객체" (toString 호출)
Number(obj);  // 42 (valueOf 호출)
obj + "";     // "객체" (문자열 컨텍스트)
obj - 0;      // 42 (숫자 컨텍스트)

배열과 객체의 기본 변환 동작:

String([1, 2, 3]);  // "1,2,3"
String({});         // "[object Object]"
Number([]);         // 0 (빈 배열은 0)
Number([5]);        // 5 (요소가 하나면 그 값)
Number([1, 2]);     // NaN (요소가 여러 개)

JSON.stringify()와 JSON.parse()

JSON 형식으로 변환할 때는 전용 메서드를 사용합니다.

// 객체 → JSON 문자열
JSON.stringify({ a: 1, b: 2 }); // '{"a":1,"b":2}'

// JSON 문자열 → 객체
JSON.parse('{"a":1,"b":2}');    // { a: 1, b: 2 }

함수	역할
JSON.stringify()	객체 → JSON 문자열
JSON.parse()	JSON 문자열 → 객체

Date 객체 변환

Date 객체는 상황에 따라 다르게 변환됩니다.

const date = new Date("2025-10-22");

// 숫자로 변환 (타임스탬프)
Number(date);  // 1729544400000

// 문자열로 변환
String(date);  // "Wed Oct 22 2025 00:00:00 GMT+0