TypeScript - 박싱과 언박싱

안녕하세요, 미래의 코딩 슈퍼스타 여러분! 오늘 우리는 TypeScript의 흥미로운 주제인 박싱과 언박싱에 대해 다룰 거예요. 이 용어가 boxing ring에서 들리는 것 같아서 걱정 마세요 - 이 것은 훨씬 신체적인 것이 아니고 훨씬 더 재미있을 거예요! 이 모험을 함께 시작해보세요.

박싱과 언박싱이란?

TypeScript의 특정한 세부 사항에 뛰어들기 전에, 프로그래밍에서 박싱과 언박싱이 무엇을 의미하는지 이해해 보겠습니다.

상상해 보세요, 작은 장난감 차를 가지고 있다면. 이 차를 이동 중에 보호하고 싶다면, 그것을 상자에 넣을 수도 있겠죠. 이것이 프로그래밍에서 박싱이란 것입니다 - 간단한 값을 객체로 래핑하는 것입니다.

언박싱은 당신이 짐작할 수 있듯이 반대 과정입니다. 장난감 차를 상자에서 꺼내어 놀아주는 것과 같습니다.

이제 TypeScript에 이를 어떻게 적용할지 보겠습니다!

TypeScript에서의 박싱

TypeScript에서 박싱은 우리가 프라imitive value(예: 숫자나 문자열)를 객체로 변환할 때 발생합니다. 이 것은 좀 이상하게 들릴 수도 있지만 - 왜 더 복잡하게 만들고 싶을까요? 잘 알겠지만, 가끔 이러한 간단한 값을 객체로 취급해야 특정 메서드나 속성을 사용할 수 있습니다.

다음은 몇 가지 예제를 보여드리겠습니다:

// 숫자 박싱
let myNumber = 42;
let boxedNumber = new Number(myNumber);

console.log(typeof myNumber);    // Output: "number"
console.log(typeof boxedNumber); // Output: "object"

이 예제에서 우리는 간단한 숫자 42를 Number 객체로 박싱했습니다. typeof 연산자가 각각 다른 결과를 보여줍니다.

이제 문자열의 예제를 보겠습니다:

// 문자열 박싱
let myString = "Hello, TypeScript!";
let boxedString = new String(myString);

console.log(myString.toUpperCase());    // Output: "HELLO, TYPESCRIPT!"
console.log(boxedString.toUpperCase()); // Output: "HELLO, TYPESCRIPT!"

이 경우, myString과 boxedString 모두 toUpperCase() 메서드를 사용할 수 있습니다. TypeScript는 우리가 메서드를 사용할 때 프라imitive value를 자동으로 박싱하기 때문에, 항상 수동으로 박싱할 필요는 없습니다.

박싱이 유용한 경우

박싱은 제네릭을 사용할 때나 값에 추가 속성을 추가할 때 특히 유용할 수 있습니다. 다음은 예제입니다:

function logValue<T>(value: T): void {
if (typeof value === "object") {
console.log("Object value:", value);
} else {
let boxedValue = Object(value);
console.log("Boxed primitive value:", boxedValue);
}
}

logValue(42);           // Output: Boxed primitive value: [Number: 42]
logValue("TypeScript"); // Output: Boxed primitive value: [String: 'TypeScript']
logValue({name: "TypeScript"}); // Output: Object value: { name: 'TypeScript' }

이 함수에서 우리는 박싱을 사용하여 모든 값을 일관되게 객체로 취급합니다.

TypeScript에서의 언박싱

이제 우리의 값을 상자에 넣었으니, 어떻게 그것을 꺼낼까요? 이제 언박싱이 등장합니다. 언박싱은 객체 래핑에서 프라imitive value를 추출하는 과정입니다.

TypeScript에서 언박싱은 자동으로 일어나거나, 명시적으로 할 수 있습니다:

let boxedNumber = new Number(42);
let unboxedNumber = boxedNumber.valueOf();

console.log(typeof boxedNumber);  // Output: "object"
console.log(typeof unboxedNumber); // Output: "number"

여기서 우리는 valueOf() 메서드를 사용하여 숫자를 명시적으로 언박싱했습니다.

문자열의 예제를 보겠습니다:

let boxedString = new String("Hello, TypeScript!");
let unboxedString = boxedString.toString();

console.log(typeof boxedString);  // Output: "object"
console.log(typeof unboxedString); // Output: "string"

이 경우, 우리는 toString()을 사용하여 문자열을 언박싱했습니다.

자동 언박싱

TypeScript(그리고 JavaScript)는 특정 문맥에서 값들을 자동으로 언박싱해 줄 수 있습니다. 예를 들어:

let boxedNumber = new Number(42);
let result = boxedNumber + 8;

console.log(result); // Output: 50
console.log(typeof result); // Output: "number"

boxedNumber는 객체이지만, 수학적 연산에서 사용될 때 자동으로 언박싱됩니다.

박싱과 언박싱 메서드

TypeScript에서 일반적인 박싱과 언박싱 메서드를 요약한 표입니다:

프라imitive Type	박싱 메서드	언박싱 메서드
number	new Number()	valueOf()
string	new String()	toString()
boolean	new Boolean()	valueOf()

결론

그렇습니다, 여러분! TypeScript에서 박싱과 언박싱의 미스터리를 풀었습니다. 기억해 두세요, 이 개념은 중요하지만, 일상적인 TypeScript 코딩에서 자주 수동으로 박싱하고 언박싱할 필요는 없습니다. TypeScript와 JavaScript는 이러한 변환을 위해 매우 지능적입니다.

TypeScript의 여정을 계속하면서, 이 저-level 개념을 이해하면 더 효율적이고 버그 없는 코드를 작성하는 데 도움이 될 것입니다. 자동차의 엔진이 어떻게 작동하는지 알 필요는 없지만, 성능 최적화나 문제 진단을 할 때는 정말 도움이 됩니다!

계속 코딩하고, 계속 배우며, 기억하세요 - 프로그래밍의 세계에서 박스를 바깥으로 나가는 것은 멋지지만, 때로는 박스 자체에 대해 생각하는 것도 중요할 수 있습니다!

Credits: Image by storyset