TypeScript Academy · 강의

선택적 호출과 요소 접근

안전한 메서드 호출과 인덱싱에 ?.()와 ?.[]를 사용합니다.

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

속성 접근 외에도

옵셔널 체이닝은 obj?.prop에만 한정되지 않습니다. 두 가지 형식이 더 있습니다. 선택적 호출에는 ?.()를 사용하고, 선택적 요소 접근에는 ?.[index]를 사용합니다. 두 형식 모두 속성 접근과 마찬가지로 값이 null 또는 undefined이면 단락 평가됩니다.

type Obj = { greet?: () => string };
const o: Obj = {};
console.log(o.greet?.()); // undefined, no crash

선택적 메서드 호출

obj.method?.()를 사용하면 메서드가 존재할 때만 호출할 수 있습니다. method가 null 또는 undefined이면 호출을 건너뛰고 식의 결과로 undefined를 반환합니다.

type Logger = { log?: (m: string) => void };
const silent: Logger = {};
silent.log?.('hello'); // skipped, no error
console.log('continued safely');

?.를 어디에 둘까요

?.는 호출 괄호 바로 앞에 둡니다. obj.method?.()는 메서드를 확인하며 obj를 확인하는 것이 아닙니다. obj도 보호하려면 obj?.method?.()로 작성합니다.

type Api = { send?: (x: number) => number };
const api: Api | null = null;
console.log(api?.send?.(5)); // undefined; guards both api and send

선택적 콜백 호출

매우 흔한 사용 사례는 선택적 콜백 매개변수를 호출하는 것입니다. if로 확인하는 대신 callback?.()을 작성하면 콜백이 제공된 경우에만 호출할 수 있습니다.

function run(onDone?: () => void): void {
  console.log('working...');
  onDone?.(); // call only if passed
}
run();
run(() => console.log('finished'));

선택적 요소 접근

null 또는 undefined일 수 있는 배열이나 인덱스 시그니처에는 arr?.[index]를 사용합니다. arr이 null 또는 undefined이면 접근이 단락 평가되고, 그렇지 않으면 평소처럼 요소를 읽습니다.

const list: string[] | undefined = undefined;
console.log(list?.[0]); // undefined, no crash

동적 키를 사용한 요소 접근

선택적 요소 접근은 null 또는 undefined일 수 있는 객체의 동적 키나 계산된 키에도 대괄호 표기법으로 사용할 수 있습니다.

type Dict = { [key: string]: number };
const data: Dict | null = { a: 1, b: 2 };
const key = 'a';
console.log(data?.[key]); // 1

요소 접근과 호출 결합

이러한 형식은 자유롭게 조합할 수 있습니다. 선택적 배열에서 요소에 접근한 다음 해당 요소의 메서드를 선택적으로 호출할 수 있으며, 각 ?.가 자신의 단계를 보호합니다.

type Handlers = Array<{ fire?: () => string }>;
const hs: Handlers | undefined = [{ fire: () => 'boom' }];
console.log(hs?.[0]?.fire?.());

함수 결과와 함께 사용하는 옵셔널 체이닝

함수가 반환하는 값에서 계속 연결할 수 있습니다. 함수가 null 또는 undefined를 반환하면 이후 호출이나 접근이 안전하게 단락 평가됩니다.

function getHandler(): (() => string) | undefined {
  return undefined;
}
console.log(getHandler()?.()); // undefined

결과 타입에는 undefined가 포함됩니다

속성 연결과 마찬가지로 선택적 호출과 요소 접근은 결과 타입에 undefined를 추가합니다. 기본값을 제공하고 undefined를 제거하려면 ??와 함께 사용합니다.

type Obj = { compute?: () => number };
const o: Obj = {};
const value = o.compute?.() ?? 0;
console.log(value);

이벤트 처리기 보호

사용자 인터페이스와 이벤트 코드에서는 선택적 호출을 사용해 설정되지 않았을 수 있는 처리기를 우아하게 호출할 수 있습니다. 장황한 존재 여부 확인이 필요 없고 처리기가 없어도 오류가 발생하지 않습니다.

type Props = { onClick?: (id: number) => void };
function click(p: Props, id: number): void {
  p.onClick?.(id); // safe if onClick is missing
}
click({ onClick: (id) => console.log('clicked', id) }, 7);
click({}, 8);

플러그인 디스패처 예제

지금까지 배운 내용을 함께 사용해 보겠습니다. 비어 있는 항목이 있을 수 있는 레지스트리에서 이름이 지정된 플러그인 후크를 선택적으로 호출하고, 아무것도 처리하지 않으면 결과를 기본값으로 설정하는 디스패처입니다.

type Hooks = { [name: string]: (() => string) | undefined };
const hooks: Hooks = { save: () => 'saved' };
function fire(name: string): string {
  return hooks[name]?.() ?? 'no handler';
}
console.log(fire('save'), fire('delete'));

빠른 확인

선택적 호출과 요소 접근에 대한 이해도를 확인해 보세요.

복습: 선택적 호출과 접근

옵셔널 체이닝의 다른 형식에 대해 배웠습니다:

obj.method?.()는 메서드가 존재할 때만 호출합니다.
arr?.[index]는 null 또는 undefined일 수 있는 컨테이너에서 요소를 안전하게 읽습니다.
모든 형식은 피연산자가 null 또는 undefined이면 undefined로 단락 평가됩니다.
??와 결합하여 결과의 기본값을 지정할 수 있습니다.

다음 과정에서는 readonly와 불변성의 기초를 살펴봅니다.

type Cfg = { init?: () => void };
const c: Cfg = {};
c.init?.();
console.log('ran safely');

자주 묻는 질문

“선택적 호출과 요소 접근” 강의는 무료인가요?

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

“선택적 호출과 요소 접근”에서 뭘 배우나요?

안전한 메서드 호출과 인덱싱에 ?.()와 ?.[]를 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“선택적 호출과 요소 접근” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← TypeScript Academy(으)로 돌아가기