TypeScript Academy · 강의

비 null 단언 연산자

! 연산자로 값이 null이나 undefined가 아님을 단언합니다.

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

null 아님 단언 연산자

후위 ! 연산자는 '이 위치의 값은 null이나 undefined가 아니다'라고 TypeScript에 알립니다. 런타임 검사 없이 해당 값의 타입에서 이를 제거합니다.

function firstChar(s: string | null): string {
  return s!.charAt(0); // assert s is not null
}
console.log(firstChar('hello'));

!를 배치하는 위치

!는 단언하려는 표현식 바로 뒤, 추가 접근이 이루어지기 전에 작성합니다. 해당 표현식의 타입에서 null | undefined를 제거합니다.

type Box = { value?: number };
const box: Box = { value: 7 };
const n: number = box.value!; // value is number | undefined -> number
console.log(n);

가드 후 null 아님 단언하기

때로는 값이 present임을 논리적으로 보장했지만 컴파일러가 그 추론을 따라가지 못할 수 있습니다. 이때 !를 사용하면 계속 진행할 수 있습니다. 그래도 실제 런타임 검사가 대개 더 명확합니다.

const list: Array<string | null> = ['a', null, 'c'];
const present = list.filter((x) => x !== null);
// TS may still see string | null; assert if certain:
console.log(present[0]!.toUpperCase());

다시 말해 컴파일 시간에만 적용됩니다

as와 마찬가지로 ! 연산자는 런타임에 제거됩니다. 검사를 전혀 수행하지 않습니다. 값이 실제로 null이면 컴파일러가 만족하더라도 런타임 오류를 get하게 됩니다.

function risky(s: string | null): number {
  return s!.length; // no runtime guard
}
console.log(risky('hi'));
// risky(null) would throw at runtime

!의 위험성

실제로 null일 수 있는 값에 null이 아님을 단언하면 숨은 버그를 만든 것입니다. 컴파일러가 더 이상 경고하지 않으므로, 해당 null이 운영 환경에서 실제로 나타날 때만 오류가 드러납니다.

type User = { name?: string };
const u: User = {};
// const len = u.name!.length; // compiles, crashes at runtime
console.log('name is undefined here -> ! would crash');

실제 검사 우선하기

가능하다면 !를 실제 null 검사나 선택적 체이닝으로 바꾸세요. 한 줄만 더 작성하면 런타임 충돌을 통째로 없앨 수 있습니다.

type User = { name?: string };
function nameLen(u: User): number {
  if (u.name) return u.name.length; // checked
  return 0;
}
console.log(nameLen({ name: 'Ada' }), nameLen({}));

확정 할당 단언

이와 관련된 기능으로 확정 할당 단언이 있습니다. let x!: T와 같이 작성하면 선언 시 초기화하지 않았더라도 사용하기 전에 x에 값이 할당될 것이라고 컴파일러에 약속합니다.

let token!: string; // promise: assigned before use
function init() { token = 'abc123'; }
init();
console.log(token.length);

클래스에서의 확정 할당

생성자가 아니라 프레임워크나 초기화 메서드에 의해 속성이 set되는 클래스에서 흔히 사용합니다. 속성 이름 뒤에 !를 작성하면 '확실하게 할당되지 않음' 오류를 숨길 수 있습니다.

class Service {
  config!: { url: string }; // set later by setup()
  setup() { this.config = { url: '/api' }; }
}
const s = new Service();
s.setup();
console.log(s.config.url);

확정 할당은 신중하게 사용하기

확정 할당 단언은 컴파일러가 검증할 수 없는 또 하나의 약속입니다. 값을 할당하기 전에 속성에 접근하면 런타임에 경고 없이 undefined를 read하게 됩니다.

class Late {
  data!: number[];
  read() { return this.data.length; } // crashes if called before init
}
const l = new Late();
l.data = [1, 2];
console.log(l.read());

!와 선택적 체이닝 비교

?.로 해결할 수 있는 상황에서 !를 사용하지 마세요. 선택적 체이닝은 런타임에 null을 안전하게 처리하지만 !는 컴파일러를 침묵시킬 뿐입니다. 둘은 서로 다른 문제를 해결합니다.

type Cfg = { db?: { host?: string } };
const c: Cfg = {};
console.log(c.db?.host ?? 'localhost'); // safe
// c.db!.host! would crash here

!를 사용해도 되는 경우

컴파일러가 표현할 수 없지만 실제로 확실하게 보장되는 경우에는 ! 연산자를 사용해도 됩니다. 예를 들어 방금 push한 값을 즉시 read하는 경우입니다. 그래도 왜 안전한지 문서화하세요.

const cache = new Map<string, number>();
cache.set('hits', 0);
// We just set it, so get is non-null:
const hits = cache.get('hits')!;
console.log(hits);

빠른 확인

null 아님 단언 연산자에 대한 이해도를 확인해 보세요.

복습: null 아님 단언

다음 내용을 배웠습니다:

후위 !는 컴파일 시점에만 타입에서 null | undefined를 제거합니다.
실행 시 검사는 수행하지 않으므로 잘못된 단언은 여전히 충돌을 일으킵니다.
let x!: T는 나중에 초기화되는 값에 사용하는 확정 할당 단언입니다.
실제 검사나 옵셔널 체이닝을 우선하고, !는 확실히 보장되는 경우에만 사용하십시오.

다음으로 이중 단언과 그 위험을 살펴봅니다.

const map = new Map<string, number>();
map.set('a', 1);
const v = map.get('a')!;
console.log(v);

자주 묻는 질문

“비 null 단언 연산자” 강의는 무료인가요?

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

“비 null 단언 연산자”에서 뭘 배우나요?

! 연산자로 값이 null이나 undefined가 아님을 단언합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“비 null 단언 연산자” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← TypeScript Academy(으)로 돌아가기