본문 바로가기
C++ 200제/코딩 IT 정보

TypeScript 강좌 13. undefined, null 프리미티브 속성

by vicddory 2020. 2. 7.


undefined와 null

JavaScript / TypeScript에 undefined와 null이 있습니다. 다른 언어에는 null(또는 None, nil 이라고도 부름)만 있는 경우가 대부분이지만, JavaScript / TypeScript에는 2종류로 등장합니다.


이 가운데 타입스크립트 undefined는 정의되지 않거나 아직 값이 할당되지 않은 변수를 참조할 때, 객체의 정의되지 않은 속성에 접근하면 리턴되는 값입니다. TypeScript는 클래스 등의 형식 정의 기능이 있어 코딩이 쉽다고 알려져 있는데, "undefined 발생으로 코드를 사전에 체크해 준다"는 것이 그 이 키워드의 본질이라는 생각이 듭니다.

let favoriteGame: string; // 아직 대입하지 않아서 undefined;

console.log(favoriteGame);


이 코드는 tsconfig.json, strict: true(또는 strictNullChecks: true)가 설정되어 있는 경우에 컴파일 오류로 이어집니다.


JavaScript는 메소드나 함수 호출 시 인수 개수가 맞지 않아도 오류가 발생하지 않으며, 지정되지 않은 인수는 undefined로 설정됩니다. TypeScript는 인수 개수가 맞지 않으면 오류가 발생하지만, "?"를 변수 이름 끝에 부여하면 선택적(생략 가능) 상태가 됩니다.


function print(name: string, age?: number) {

    console.log(`name: ${name}, age: ${age || 'empty'}`);

}


의도하지 않아 "실수로 선언된" undefined가 있다면, "이것은 잘못된 값"이라고 설정하는 것이 null 입니다. 


다만, 타입스크립트는 Java와 달리 부담 없이 null을 넣을 수 없습니다. 공용체(union) 정의는 "A 또는 B"라는 형태로 선언하므로 A 또는 B에 null을 대입합니다. TypeScript는 "잘못된 값을 가질 수 있어요"라는 것을 인식하고 허용합니다.


// string 또는 null을 대입할 수 있다고 선언합니다. 그리고 null을 대입합니다.

let favaoriteGame: string | null = null;



undefined와 null은 다릅니다. 컴파일러 옵션에 compilerOptions.strict: true 혹은 compilerOptions.strictNullChecks: true을 넣으면, null 변수에 undefined를 대입할 경우 오류가 발생합니다.


이 옵션이 모두 false일 경우엔 오류가 발생하지 않지만, 부작용이 커지므로 옵션은 활성화하여 평소에 올바른 코드를 작성하는 편이 좋습니다.


타입스크립트에서 null과 undefined는 별개


const a: string | null = undefined;

// error TS2322: Type 'undefined' is not assignable to type 'string | null'.


const b: string | undefined = null;

// error TS2322: Type 'null' is not assignable to type 'string | undefined'.


미완성 강좌 글입니다 ...

댓글