TypeScript Academy · 강의

구조 분해의 기본값

기본값과 타입 주석을 안전하게 결합합니다.

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

빈칸 채우기

구조 분해의 기본값은 속성이나 요소가 없거나 undefined일 때 대체값을 제공합니다. TypeScript의 타입 추론과 함께 사용하면 선택적 설정을 편리하고 안전하게 다룰 수 있습니다.

객체 구조 분해의 기본값

바인딩 뒤에 = value를 작성하여 대체값을 지정하십시오. 속성이 없거나 undefined이면 대신 기본값이 사용됩니다.

const opts: { count?: number } = {}
const { count = 0 } = opts
console.log(count) // 0

선택적 속성과 기본값

기본값은 선택적 속성(?)과 자연스럽게 어울립니다. 기본값이 undefined인 경우를 제거하므로 결과 변수는 선택 사항이 아닌 타입이 됩니다.

interface Opts { retries?: number }
function connect(opts: Opts) {
  const { retries = 3 } = opts
  // retries is number, not number | undefined
  return retries * 2
}
console.log(connect({}))

기본값과 추론되는 타입

타입 주석을 달지 않으면 TypeScript는 기본값에서 변수의 타입을 추론합니다. 여기서는 0이 count를 number로 만듭니다.

const settings: { count?: number; label?: string } = { label: "hi" }
const { count = 0, label = "none" } = settings
console.log(count, label) // 0 hi

undefined일 때만 기본값 적용

미묘하지만 중요한 점이 있습니다. 기본값은 undefined일 때만 적용되며, 0, "", null과 같은 다른 거짓 값에는 적용되지 않습니다. 이러한 값은 변경되지 않고 그대로 전달됩니다.

const { x = 10 } = { x: 0 }
console.log(x) // 0, not 10 — 0 is not undefined
const { y = 10 } = { y: undefined as number | undefined }
console.log(y) // 10

함수 매개변수의 기본값

구조 분해된 매개변수에 기본값을 지정하면 선택적 옵션을 간편하게 처리할 수 있습니다. 선언부에서 각 필드에 고유한 대체값을 바로 지정할 수 있습니다.

function draw({ x = 0, y = 0 }: { x?: number; y?: number }) {
  return x + "," + y
}
console.log(draw({ x: 5 })) // 5,0

전체 매개변수에 기본값 지정하기

호출자가 인수 객체 전체를 생략할 수 있게 하려면 매개변수 자체에 {}를 기본값으로 지정하십시오. 이렇게 하지 않으면 인수 없이 호출할 때 오류가 발생합니다.

function draw({ x = 0, y = 0 }: { x?: number; y?: number } = {}) {
  return x + "," + y
}
console.log(draw()) // 0,0

이름을 바꾸면서 기본값 지정하기

한 번의 바인딩에서 이름을 바꾸고 기본값을 지정할 수 있습니다. 먼저 이름을 바꾼 다음 새 이름 뒤에 기본값을 추가하십시오.

const { count: total = 0 } = { } as { count?: number }
console.log(total) // 0

계산되는 기본값

기본값에는 앞에서 바인딩한 값을 참조하는 표현식을 비롯해 어떤 표현식이든 사용할 수 있습니다. 값이 실제로 없을 때만 지연되어 평가됩니다.

function make({ width = 100, height = width }: { width?: number; height?: number } = {}) {
  return width + "x" + height
}
console.log(make({ width: 50 })) // 50x50

배열 기본값 복습

배열 구조 분해에서도 기본값이 작동하며, 요소가 없거나 undefined일 때 위치별로 적용됩니다.

const [a = 1, b = 2, c = 3] = [10, undefined]
console.log(a, b, c) // 10 2 3

기본값이 특히 유용한 경우

기본값은 옵션 객체에 적합합니다. 호출자는 필요한 항목만 지정하고 함수는 적절한 대체값을 채울 수 있습니다. 또한 추론된 타입에서 undefined를 제거하여 함수 본문을 단순하게 만듭니다.

interface Config { debug?: boolean; level?: number }
const init = ({ debug = false, level = 1 }: Config = {}) => debug ? level : 0
console.log(init({ debug: true, level: 5 }))

빠른 확인

구조 분해의 기본값에 대한 이해도를 확인해 보십시오.

복습

구조 분해의 기본값(= fallback)은 값이 없거나 undefined일 때만 적용되며 다른 거짓 값에는 적용되지 않습니다. 기본값은 선택적 속성 타입에서 undefined를 제거하고, 추론하거나 직접 타입을 지정할 수 있으며, 이름 바꾸기를 지원하고, 앞에서 바인딩한 값을 참조할 수도 있습니다. 옵션 객체에서는 매개변수에 {}를 기본값으로 지정하여 호출자가 객체 전체를 생략할 수 있게 하십시오.

자주 묻는 질문

“구조 분해의 기본값” 강의는 무료인가요?

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

“구조 분해의 기본값”에서 뭘 배우나요?

기본값과 타입 주석을 안전하게 결합합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“구조 분해의 기본값” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← TypeScript Academy(으)로 돌아가기