TypeScript Academy · 강의

함수에서의 void 타입

함수 반환 위치에서 void가 undefined와 어떻게 다른지 알아봅니다.

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

void 반환 타입

void는 유용한 값을 반환하지 않는 함수를 나타냅니다. 함수는 여전히 완료되지만, 사용해야 할 값을 만들어 내지는 않습니다. 부수 효과를 위해 호출되는 함수의 타입입니다.

function log(message: string): void {
  console.log(message);
}
log('Hello void');

추론된 void

함수에 return 문이 없거나 (또는 return;만 있는 경우) TypeScript는 자동으로 void를 추론합니다. 의도를 문서화할 수 있지만, 명시적으로 작성할 필요는 거의 없습니다.

function greet(name: string) {
  console.log('Hi ' + name);
  // no return -> inferred void
}
greet('Ada');

void와 undefined 비교

둘은 관련 있지만 동일하지 않습니다. void 함수는 실제로 undefined를 반환할 수도 있고 그렇지 않을 수도 있으며, 반환값에 의존해서는 안 됩니다. undefined를 반환하도록 지정된 함수는 이를 명시적으로 반환해야 합니다.

function a(): void { /* returns nothing useful */ }
function b(): undefined { return undefined; }
console.log(a(), b());

void 결과를 사용하면 안 됩니다

void 호출의 런타임 값은 undefined이지만, 타입 시스템은 이를 사용하는 것을 권장하지 않습니다. void는 '이 반환값을 무시하라'는 의미로 받아들이세요.

function save(): void {
  console.log('saved');
}
const result = save(); // result has type void
console.log(result); // undefined at runtime

콜백 타입에서의 void

미묘하면서도 강력한 규칙이 있습니다. 반환 타입이 void인 콜백은 어떤 값이든 반환하는 함수로 충족할 수 있습니다. 추가 반환값은 단순히 무시됩니다.

type Handler = () => void;

const h: Handler = () => 42; // returns number, still fine
h();
console.log('Returned value is ignored by callers');

이 규칙이 존재하는 이유

이러한 유연성 덕분에 숫자를 반환하는 arr.push 같은 함수를 void 콜백으로 전달할 수 있습니다. 호출자는 반환값을 사용하지 않겠다고 약속했으므로 어떤 값이 반환되어도 문제가 없습니다.

const items: number[] = [];
const nums = [1, 2, 3];
nums.forEach((n) => items.push(n)); // push returns number, ok
console.log(items);

배열 메서드에서의 문맥상 void

forEach는 void를 반환하는 콜백을 기대합니다. 따라서 값을 부수적으로 반환하는 한 줄짜리 화살표 함수를 오류 없이 작성할 수 있습니다. 문맥상의 void 타입이 그 값을 흡수하기 때문입니다.

const result: string[] = [];
['a', 'b'].forEach((x) => result.push(x.toUpperCase()));
console.log(result);

흔한 혼동

void 콜백 규칙은 콜백의 타입에 적용되며, 반환 타입을 직접 void로 주석 처리한 함수에 적용되는 것이 아닙니다. (): void로 선언된 함수에는 여전히 정의되지 않은 값이 아닌 return value;를 사용할 수 없습니다.

function f(): void {
  return; // ok
  // return 5; // Error: 5 not assignable to void
}
f();
console.log('declared void cannot return a value');

void 매개변수는 특이합니다

드물지만 고급 제네릭에서는 void가 매개변수 타입으로 나타날 수 있습니다. 일상적인 코드에서는 거의 항상 반환 타입으로 보며, '의미 있는 결과가 없음'을 나타냅니다.

type Listener = (event: string) => void;

const onClick: Listener = (e) => console.log('Event:', e);
onClick('click');

프로미스와 함께 사용하는 void

비동기 함수는 작업을 수행하지만 값 없이 완료될 때 Promise<void>를 반환하는 경우가 많습니다. 이 패턴은 비동기 코드에서 동기 코드의 void와 같은 역할을 합니다.

async function sync(): Promise<void> {
  console.log('syncing...');
  // resolves with no value
}
sync().then(() => console.log('done'));

의도적으로 void 선택하기

함수가 부수 효과를 위해 존재하며 호출자가 반환값에 의존해서는 안 된다는 점을 전달하려면 void를 명시하세요. 의도가 분명해지고 유연한 콜백 규칙도 활용할 수 있습니다.

function notify(msg: string): void {
  console.log('NOTIFY:', msg);
}
const handlers: Array<(m: string) => void> = [notify];
handlers.forEach((fn) => fn('ping'));

빠른 확인

void 타입에 대한 이해도를 확인해 보세요.

복습: void

void에 대해 다음을 배웠습니다:

유용한 값을 반환하지 않는 함수를 나타냅니다.
undefined와 다릅니다. void 결과는 사용해서는 안 됩니다.
콜백 타입으로 사용하면 어떤 값이든 반환하는 함수를 허용합니다(호출자가 반환값을 무시합니다).
forEach 안에서 push 같은 메서드를 깔끔하게 사용할 수 있게 합니다.

다음으로 모든 내용을 연결해 unknown을 안전하게 다루어 보겠습니다.

const tasks: Array<() => void> = [
  () => console.log('task 1'),
  () => console.log('task 2')
];
tasks.forEach((t) => t());

자주 묻는 질문

“함수에서의 void 타입” 강의는 무료인가요?

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

“함수에서의 void 타입”에서 뭘 배우나요?

함수 반환 위치에서 void가 undefined와 어떻게 다른지 알아봅니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“함수에서의 void 타입” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← TypeScript Academy(으)로 돌아가기