"hello"는 문자열인데, 왜 객체처럼 .length를 쓸 수 있을까?

date

Mar 7, 2025

slug

why-string-has-length

author

status

Public

1. 박싱(Boxing)이란?

박싱이란 기본 타입(Primitive Type)을 해당하는 래퍼 객체(Wrapper Object)로 변환하는 과정을 말합니다. Java에서는 Integer나 Double 같은 래퍼 클래스를 명시적으로 사용하여 박싱을 수행해야 합니다.

Java에서의 박싱 예제


int num = 10;
Integer boxedNum = Integer.valueOf(num); // 명시적 박싱
Integer autoBoxedNum = num; // 자동 박싱 (Auto-Boxing)

Java에서는 int 타입을 Integer 객체로 변환해야 합니다. 하지만 JavaScript에서는 기본 타입도 객체처럼 동작합니다.

JavaScript에서의 박싱 예제


let str = 'hello';
console.log(str.length); // 5
console.log(str.toUpperCase()); // "HELLO"

위 코드에서 str은 string 타입이지만 .length와 .toUpperCase()를 사용할 수 있습니다. 이는 JavaScript가 str을 자동으로 String 객체로 박싱하기 때문입니다.

JavaScript의 자동 박싱(Auto-Boxing) 과정

기본 타입(string, number, boolean)에 대한 속성이나 메서드를 호출하면,

JavaScript 엔진이 자동으로 해당 타입의 래퍼 객체(String, Number, Boolean 등)로 변환합니다.

메서드 실행 후, 래퍼 객체는 다시 기본 타입으로 변환됩니다.

즉, str.length를 호출하면 내부적으로 다음과 같은 과정이 발생하는 것입니다.


let str = 'hello';
let temp = new String(str); // 박싱
console.log(temp.length);
temp = null; // 다시 기본 타입으로 변환 (언박싱)

2. 언박싱(Unboxing)이란?

언박싱(Unboxing)이란 래퍼 객체를 다시 기본 타입으로 변환하는 과정을 의미합니다.

Java에서의 언박싱 예제


Integer obj = Integer.valueOf(20);
int unboxedNum = obj.intValue(); // 명시적 언박싱
int autoUnboxedNum = obj; // 자동 언박싱 (Auto-Unboxing)

Java에서는 .intValue() 같은 메서드를 호출하거나, 자동 언박싱(Auto-Unboxing)을 통해 기본 타입으로 변환할 수 있습니다.

JavaScript에서의 언박싱 예제


let strObj = new String("hello"); // String 객체 생성
console.log(typeof strObj); // "object"

let primitiveStr = strObj.valueOf(); // 언박싱
console.log(primitiveStr); // "hello"
console.log(typeof primitiveStr); // "string"

new String("hello")를 사용하면 명시적으로 박싱된 객체를 생성할 수 있습니다.

.valueOf()를 호출하면 언박싱(Unboxing) 되어 기본 문자열로 변환됩니다.

하지만 JavaScript는 자동으로 언박싱을 수행하기 때문에 대부분의 경우 .valueOf()를 직접 호출할 필요가 없습니다.


let objNum = new Number(10);
console.log(objNum + 5); // 15 (자동 언박싱 발생)

위 코드에서는 Number 객체가 + 연산을 수행하면서 자동으로 기본 타입으로 변환됩니다.

3. 박싱과 언박싱이 중요한 이유

1) JavaScript에서는 기본적으로 자동 박싱/언박싱이 발생

자바스크립트는 기본적으로 박싱과 언박싱을 자동으로 수행합니다. 따라서 Java처럼 Integer.valueOf()나 .intValue() 같은 명시적 변환이 필요하지 않습니다.


let bool = true;
console.log(bool.toString()); // "true"

위 코드에서는 true가 자동 박싱되어 Boolean 객체가 생성된 후 .toString()이 호출됩니다.

2) 컬렉션에서의 차이 (Java vs JavaScript)

Java에서는 기본 타입을 List 같은 컬렉션에 직접 저장할 수 없습니다.


List<Integer> list = new ArrayList<>();
list.add(10); // 자동 박싱 발생
int value = list.get(0); // 자동 언박싱 발생

하지만 JavaScript에서는 Array에 기본 타입을 그대로 저장할 수 있으며, 필요할 때 자동 박싱/언박싱이 발생합니다.


let arr = [10, 20, 30];
console.log(arr[0].toString()); // "10" (자동 박싱)

3) `==` vs `===` 연산자의 주의점

JavaScript에서는 기본 타입과 객체를 비교할 때 자동 언박싱이 발생할 수 있습니다.


let str1 = "hello";
let str2 = new String("hello");

console.log(str1 == str2); // true (자동 언박싱)
console.log(str1 === str2); // false (타입이 다름)

== 연산자는 자동 언박싱을 수행하여 두 값을 비교합니다.

=== 연산자는 타입까지 비교하기 때문에 false가 나옵니다.

4. 정적 언어 개발자들이 어려움을 느낄 수 있는 JavaScript의 유연함

JavaScript는 동적 타입 언어로서 자동 변환(Auto-Boxing/Unboxing)이 자유롭게 일어납니다. 이는 편리한 기능이지만, 정적 타입 언어(Java 등)를 주로 사용하는 개발자들에게는 예측하기 어려운 동작으로 느껴질 수도 있습니다.

정적 언어 개발자들이 혼란스러워할 수 있는 JavaScript의 특징 😂

== 연산자가 자동 변환을 수행하여 결과가 직관적이지 않을 수 있음.

기본 타입과 객체 타입이 자유롭게 변환되어 의도치 않은 결과가 발생할 가능성이 있음.

null == undefined가 true가 되는 등 비교 연산의 일관성이 부족할 수 있음.

5 + "5"가 "55"로 변환되는 등의 자동 형 변환이 개발자 의도와 다를 수 있음.

이러한 특징은 JavaScript의 유연성을 높이는 요소이기도 하지만, 예상치 못한 결과를 초래할 수도 있습니다.

따라서 언어의 특성을 이해하고 올바르게 활용하는 것이 중요합니다!

5. 결론

JavaScript에서도 박싱(Boxing)과 언박싱(Unboxing)이 일어남

기본 타입(string, number, boolean)은 필요할 때 자동으로 래퍼 객체로 변환됨 (자동 박싱).

연산을 수행할 때는 자동으로 기본 타입으로 변환됨 (자동 언박싱).

Java는 Integer.valueOf(), .intValue() 같은 명시적 변환이 필요하지만, JavaScript는 자동으로 처리됨.

불필요한 객체 생성을 피하고, === 연산자를 적절히 사용하여 코드의 안정성을 높이자

JavaScript의 유연함이 때로는 장점이 될 수도 있고, 단점이 될 수도 있습니다. 자동 형변환을 과신하지 말고, TypeScript를 쓰면서 안정적으로 개발합시다!