TypeScript Academy · 강의

함수의 나머지 매개변수

임의 개수의 인수를 받는 함수에 타입을 지정합니다.

함수의 나머지 매개변수은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

인수가 많은 함수

나머지 매개변수를 사용하면 함수가 임의 개수의 인수를 받아 하나의 배열로 모을 수 있습니다. TypeScript가 해당 배열의 타입을 지정하므로 인수 개수가 달라지는 호출에서도 안전성을 확보할 수 있습니다.

기본 나머지 매개변수

마지막 매개변수 앞에 ...를 붙이고 배열 타입을 지정하십시오. 함수 안에서는 일반 배열처럼 동작합니다.

function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0)
}
console.log(sum(1, 2, 3, 4)) // 10

인수 없이 호출하기

나머지 매개변수는 인수가 0개인 경우에도 사용할 수 있으며 배열은 비어 있게 됩니다. 인수가 없는 경우를 특별히 처리할 필요가 없습니다.

function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0)
}
console.log(sum()) // 0

고정 매개변수 뒤의 나머지 매개변수

나머지 매개변수는 고정 매개변수 뒤에 올 수 있지만 반드시 마지막이어야 합니다. 고정 매개변수가 먼저 바인딩되고 남은 모든 항목이 나머지 배열로 들어갑니다.

function join(separator: string, ...parts: string[]): string {
  return parts.join(separator)
}
console.log(join("-", "a", "b", "c")) // a-b-c

나머지 매개변수는 하나만, 항상 마지막에

나머지 매개변수는 최대 하나만 사용할 수 있으며 그 뒤에는 아무것도 올 수 없습니다. 나머지 매개변수 뒤에 매개변수를 작성하면 구문 오류가 발생합니다.

// function bad(...nums: number[], last: number) {} // Error
function ok(first: number, ...rest: number[]) {
  return first + rest.length
}
console.log(ok(10, 1, 2)) // 12

요소 타입 제약

나머지 배열의 요소 타입이 모든 인수를 제한합니다. 잘못된 타입을 전달하면 컴파일 시점에 확인됩니다.

function tags(...labels: string[]): string {
  return labels.join(",")
}
console.log(tags("a", "b"))
// tags("a", 5) // Error: 5 is not a string

유니언 타입과 나머지 매개변수

요소 타입을 유니언으로 지정하면 서로 다른 타입의 인수를 허용할 수 있습니다. 함수 안에서는 각 항목을 사용하기 전에 타입의 범위를 좁히십시오.

function show(...items: (string | number)[]): string {
  return items.map(String).join(" ")
}
console.log(show("x", 1, "y", 2)) // x 1 y 2

튜플 타입과 나머지 매개변수

나머지 매개변수에 튜플 타입을 지정하여 고정된 요소와 가변적인 요소가 이어지는 형태를 설명할 수 있습니다. 여기서는 첫 번째 인수가 문자열이고 그 뒤에 임의 개수의 숫자가 옵니다.

function record(...args: [string, ...number[]]): string {
  const [label, ...values] = args
  return label + ": " + values.join(",")
}
console.log(record("scores", 9, 8, 7))

튜플 나머지 매개변수로 인수 개수 강제하기

튜플 나머지 타입을 사용하면 앞부분의 요소가 필수가 됩니다. 필수인 첫 번째 인수를 생략하면 컴파일 오류가 발생하므로 일반 배열보다 더 강력하게 제한할 수 있습니다.

function record(...args: [string, ...number[]]): number {
  return args.length
}
console.log(record("x")) // 1
// record() // Error: missing string argument

나머지 매개변수 호출에 전개 사용하기

호출하는 곳에서 전개를 사용하면 기존 배열을 나머지 매개변수에 전달할 수 있습니다. 배열의 요소 타입은 매개변수의 요소 타입과 일치해야 합니다.

function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0)
}
const values = [1, 2, 3]
console.log(sum(...values)) // 6

실전에서의 나머지 매개변수

나머지 매개변수는 기록 도우미, 서식 지정기, 수학 도구처럼 공통되거나 구조화된 타입으로 가변 개수의 입력을 처리하는 모든 기능을 구현하는 데 유용합니다.

function max(first: number, ...rest: number[]): number {
  return rest.reduce((m, n) => (n > m ? n : m), first)
}
console.log(max(3, 7, 2, 9, 1)) // 9

빠른 확인

타입이 지정된 나머지 매개변수에 대한 이해도를 확인해 보십시오.

복습

나머지 매개변수는 마지막 매개변수에 ...를 사용하여 추가 인수를 타입이 지정된 배열로 모읍니다. 반드시 마지막에 와야 하며 하나만 사용할 수 있습니다. 단순 배열, 유니언 배열 또는 튜플로 타입을 지정하여 고정된 요소와 가변적인 요소가 이어지는 형태를 표현하고 인수 개수를 강제할 수 있습니다. 호출하는 곳에서 기존 배열을 전개하여 나머지 매개변수에 전달하십시오.

자주 묻는 질문

“함수의 나머지 매개변수” 강의는 무료인가요?

네 — “함수의 나머지 매개변수” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“함수의 나머지 매개변수”에서 뭘 배우나요?

임의 개수의 인수를 받는 함수에 타입을 지정합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“함수의 나머지 매개변수” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← TypeScript Academy(으)로 돌아가기