TypeScript - 파라미터 추출

안녕하세요, 미래의 코딩 슈퍼스타 여러분! 오늘은 TypeScript에서 매우 흥미로운 주제에 대해 다룰 것입니다: 파라미터 추출. 처음에는 조금 두려울 수 있지만, 걱정 마세요 - 저는 우리가 이를 쉽게 이해할 수 있도록 조각별로 쪼개서 설명해 드릴 것입니다. 당신의 좋아하는 음료를 준비하고, 편안하게 앉아 이 학습 여정에 동참해 주세요!

파라미터 추출이란?

이제 구체적인 내용에 들어가기 전에 간단한 비유로 시작해 보겠습니다. 당신이 아름답게 포장된 선물 상자를 가지고 있다고 상상해 보세요. 파라미터 추출은 그 선물 상자를 조심스럽게 개봉하고 그 내용물을 바로 테이블에 정리하는 것과 같습니다. 프로그래밍 용어로는, 객체나 배열에서 값을 추출하고 이를 함수 파라미터 내에서 변수로 할당하는 단계로, 한 번에 이루어집니다.

문법

TypeScript에서 파라미터 추출의 문법은 매우 간단합니다. 단계별로 살펴보겠습니다:

객체 추출

function greetPerson({ name, age }: { name: string, age: number }) {
console.log(`Hello, ${name}! You are ${age} years old.`);
}

이 예제에서 우리는 함수 파라미터에서 객체를 추출하고 있습니다. { name, age } 부분이 마법이 일어나는 곳입니다 - 이는 "저는 name과 age 프로퍼티를 가진 객체를 기대하며, 함수 내에서 이를 변수로 직접 사용하고 싶다"고 말하고 있습니다.

배열 추출

function getFirstTwo([first, second]: number[]) {
console.log(`The first number is ${first} and the second is ${second}`);
}

여기서 우리는 배열을 추출하고 있습니다. [first, second] 문법은 TypeScript에게 배열의 첫 두 요소를 가져와 first와 second라는 변수로 할당하도록 지시합니다.

예제

이제 더 많은 예제를 통해 이해를 더욱 확고히 하겠습니다.

예제 1: 간단한 객체 추출

function introduceHero({ name, power, age }: { name: string, power: string, age: number }) {
console.log(`Meet ${name}, aged ${age}, with the power of ${power}!`);
}

// 사용법
introduceHero({ name: "Spider-Man", power: "web-slinging", age: 23 });

이 예제에서 우리는 슈퍼히어로를 소개하는 함수를 만들고 있습니다. 함수는 name, power, age 프로퍼티를 가진 객체를 기대합니다. 파라미터 추출을 사용하여, 우리는 함수 내에서 이 프로퍼티를 변수로 직접 접근할 수 있습니다.

함수를 호출할 때, 우리는 이 구조와 일치하는 객체를 전달합니다. 출력은 다음과 같습니다:

Meet Spider-Man, aged 23, with the power of web-slinging!

예제 2: 기본 값과 함께 추출

function orderCoffee({ type = "Espresso", size = "Medium" }: { type?: string, size?: string } = {}) {
console.log(`Preparing a ${size} ${type}`);
}

// 사용법
orderCoffee({}); // Preparing a Medium Espresso
orderCoffee({ type: "Latte" }); // Preparing a Medium Latte
orderCoffee({ size: "Large", type: "Cappuccino" }); // Preparing a Large Cappuccino

이 예제는 기본 값과 함께 파라미터 추출을 사용하는 방법을 보여줍니다. 함수 호출 시 프로퍼티가 제공되지 않으면 기본 값을 사용합니다. 빈 객체로 호출하거나 일부 프로퍼티를 생략해도 작동합니다!

예제 3: 중첩 추출

function printBookInfo({ title, author: { name, birthYear } }:
{ title: string, author: { name: string, birthYear: number } }) {
console.log(`"${title}" was written by ${name}, born in ${birthYear}`);
}

// 사용법
printBookInfo({
title: "The Hitchhiker's Guide to the Galaxy",
author: {
name: "Douglas Adams",
birthYear: 1952
}
});

여기서 우리는 더 복잡한 객체 구조를 다루고 있습니다. 중첩된 객체를 추출하여 저자의 이름과 출생 연도를 얻습니다. 이 예제는 복잡한 데이터 구조에서 추출의 강력한 기능을 보여줍니다.

예제 4: 배열 추출과 나머지 매개변수

function analyzeScores([first, second, ...rest]: number[]) {
console.log(`Top score: ${first}`);
console.log(`Runner-up: ${second}`);
console.log(`Other scores: ${rest.join(', ')}`);
}

// 사용법
analyzeScores([95, 88, 76, 82, 70]);

이 예제는 배열 추출과 나머지 매개변수를 결합하는 방법을 보여줍니다. 우리는 배열의 첫 두 요소를 개별적으로 추출하고 나머지 요소를 rest 배열로 수집합니다.

메서드 표

이제 우리가 다루었던 주요 메서드와 개념을 요약한 표를 제공합니다:

메서드/개념	설명	예제
객체 추출	객체에서 프로퍼티를 별도의 변수로 추출	{ name, age }: { name: string, age: number }
배열 추출	배열에서 요소를 별도의 변수로 추출	[first, second]: number[]
기본 값	프로퍼티가 정의되지 않으면 기본 값을 사용	{ type = "Espresso" }: { type?: string }
중첩 추출	중첩된 객체나 배열을 추출	{ author: { name, birthYear } }
나머지 매개변수	남은 요소를 배열로 수집	[first, second, ...rest]: number[]

결론

축하합니다! 지금까지 TypeScript의 강력한 기능인 파라미터 추출을 열쇠를 풀었습니다. 이 기술은 코드를 더 간결하고 가독성 있게 만들어주며, 복잡한 데이터 구조를 효율적으로 처리할 수 있게 해줍니다.

새로운 기술을 습득하는 것은 연습이 필요합니다. 처음에는 조금 어색할 수 있지만, 경험 많은 개발자들도 가끔씩 구문을 되돌아보는 경우가 있습니다.

TypeScript의 세계는 방대하고 흥미롭습니다. 당신은 TypeScript 닌자가 되기 위해 잘 진행하고 있습니다. 다음 만남까지, 즐겁게 코딩하세요!

Credits: Image by storyset