TypeScript에서의 Null 병합 연산자
이 글에서는 TypeScript에서 Null 병합 연산자에 대해 설명합니다.
YouTube Video
TypeScript에서의 Null 병합 연산자
TypeScript의 Null 병합 연산자 (??)는 JavaScript의 단락 평가와 유사하지만, 좌측 값이 null 또는 undefined일 때에만 대체값을 제공하도록 더 명확하게 사용됩니다. 이 연산자를 사용하면 값이 null인지 undefined인지 쉽게 확인하고 필요한 경우 기본값을 설정할 수 있습니다.
Null 병합 연산자 (??)는 좌측 값이 null 또는 undefined일 경우에만 우측 값을 반환합니다. 이는 false, 빈 문자열, 숫자 0과 같은 값은 변경되지 않는다는 것을 의미합니다. 이는 전통적인 논리 OR 연산자(||)와의 주요 차이점입니다. 이 연산자는 TypeScript 3.7에서 도입되었습니다.
기본 구문
1let result = value ?? defaultValue;value: null 또는 undefined인지 확인할 값defaultValue:value가null또는undefined인 경우 반환되는 값
사용 예시
1function getUserName(userName: string | null | undefined): string {
2 return userName ?? "Default User";
3}
4
5console.log(getUserName("Alice")); // Output: Alice
6console.log(getUserName(null)); // Output: Default User
7console.log(getUserName(undefined)); // Output: Default User
여기에서 함수 getUserName은 userName이 null 또는 undefined일 경우 "Default User"를 반환하고, 그렇지 않으면 userName 값을 반환합니다.
논리 OR 연산자와의 차이점
논리 OR 연산자는 false, 0, 그리고 ""(빈 문자열) 값을 null 및 undefined와 마찬가지로 "falsy"로 간주합니다. 한편, Null 병합 연산자는 오직 null과 undefined만을 대체값으로 사용합니다.
논리 OR 연산자의 예
1function getUserAge(age: number | null | undefined): number {
2 return age || 18; // `0` also applies the default value
3}
4
5console.log(getUserAge(25)); // Output: 25
6console.log(getUserAge(0)); // Output: 18
7console.log(getUserAge(null)); // Output: 18
Null 병합 연산자의 예
1function getUserAge(age: number | null | undefined): number {
2 return age ?? 18; // `0` does not apply the default value
3}
4
5console.log(getUserAge(25)); // Output: 25
6console.log(getUserAge(0)); // Output: 0
7console.log(getUserAge(null)); // Output: 18
논리 OR 연산자와 Null 병합 연산자 중 선택은 0과 빈 문자열을 허용할지 여부에 따라 달라집니다. 예를 들어, 사용자의 나이를 0으로 유지하려는 경우 Null 병합 연산자를 사용해야 합니다.
타입과의 조합
Null 병합 연산자와 TypeScript의 타입 안전성을 결합하면 코드의 견고성을 향상시킬 수 있습니다. 다음 예시에서 특정 속성이 null 또는 undefined일 경우 기본값이 사용됩니다.
1interface User {
2 name: string;
3 age?: number | null;
4}
5
6function displayUserInfo(user: User): string {
7 const userName: string = user.name ?? "Anonymous";
8 const userAge: number = user.age ?? 18;
9 return `Name: ${userName}, Age: ${userAge}`;
10}
11
12const user1: User = { name: "John", age: null };
13const user2: User = { name: "Doe" };
14
15console.log(displayUserInfo(user1)); // Output: Name: John, Age: 18
16console.log(displayUserInfo(user2)); // Output: Name: Doe, Age: 18
User인터페이스에서age는number | null로 설정되어 있으며,null또는undefined를 값으로 허용합니다.displayUserInfo함수는name이null또는undefined인 경우"Anonymous"를 반환하며,age가null또는undefined인 경우18을 반환합니다.
요약
Null 병합 연산자는 값이 null 또는 undefined일 때만 기본값을 설정하는 데 도움을 줍니다. 전통적인 논리 OR 연산자와 달리, false, 0, 빈 문자열을 "falsy"로 간주하지 않으므로 이러한 값을 유지하는 데 특히 유용합니다. 또한, 이를 TypeScript의 타입 시스템과 결합하면 더 견고하고 가독성이 높은 코드를 작성할 수 있습니다.
널 병합(nullish coalescing) 연산자를 효과적으로 사용하면 기본값을 설정하는 로직을 간결하게 작성할 수 있으며, 불필요한 null 확인을 줄일 수 있습니다.
TypeScript의 널 병합 대입 연산자
널 병합 대입 연산자(??=)는 TypeScript에 도입된 비교적 새로운 연산자로, 변수 값이 null 또는 undefined일 때만 값을 할당하는 편리한 방법을 제공합니다. 여기에서는 이 연산자가 어떻게 작동하는지, 어떤 상황에서 효과적인지 설명하고 코드 예제를 제공합니다.
널 병합 대입 연산자란 무엇인가
Null 병합 대입 연산자는 Null 병합 연산자를 기반으로 한 대입 연산자입니다. 이 연산자는 변수 값이 null 또는 undefined일 때만 새 값을 대입하는 데 사용됩니다.
1let variable: string | null = null;
2variable ??= "Default Value"; // The variable is null, so the new value is assigned
3console.log(variable); // Output: "Default Value"
이 연산자를 사용하면 "변수가 undefined 또는 null인 경우 대입"하는 로직을 더 간결하게 작성할 수 있습니다.
전통적인 대입 방식과의 비교
Null 병합 대입 연산자가 없으면 동일한 동작을 수행하기 위해 if문이나 삼항 연산자를 사용해야 합니다. 전통적인 대입 방식과 비교해봅시다.
전통적인 방법
1let variable: string | null = null;
2if (variable === null || variable === undefined) {
3 variable = "Default Value";
4}
5console.log(variable); // Output: "Default Value"
삼항 연산자를 사용하는 방법
1let variable: string | null = null;
2variable = variable ?? "Default Value";
3console.log(variable); // Output: "Default Value"
??= 연산자를 사용한 간결한 방법
1let variable: string | null = null;
2variable ??= "Default Value";
3console.log(variable); // Output: "Default Value"
Null 병합 대입 연산자는 다른 대입 방법에 비해 훨씬 간단하고 가독성이 뛰어나 코드의 가독성을 향상시킵니다.
??= 사용의 구체적인 예시
Null 병합 대입 연산자는 객체 속성 초기화 및 기본값 설정과 같은 다양한 상황에서 유용합니다. 다음은 몇 가지 구체적인 예입니다.
객체 속성의 초기화
1interface Config {
2 theme?: string;
3 language?: string;
4}
5
6let config: Config = {};
7config.theme ??= "light"; // Set the default "light" theme if none is specified
8config.language ??= "en"; // Set the default "en" language if none is specified
9
10console.log(config); // Output: { theme: "light", language: "en" }
배열의 초기화
1let numbers: number[] | null = null;
2numbers ??= []; // Assign an empty array if numbers is null
3
4numbers.push(1);
5console.log(numbers); // Output: [1]
함수 인수에 대한 기본값 설정
1function greet(name?: string) {
2 name ??= "Guest"; // Set name to "Guest" if it is undefined or null
3 console.log(`Hello, ${name}!`);
4}
5
6greet(); // Output: "Hello, Guest!"
7greet("Alice"); // Output: "Hello, Alice!"
주의사항 및 제약사항
Null 병합 대입 연산자는 매우 유용하지만 몇 가지 주의할 점이 있습니다.
null및undefined에만 적용: 이 연산자는 값이null또는undefined일 때만 할당됩니다. 예를 들어, 빈 문자열(""),0,false는 대상이 되지 않습니다.
1let str: string | null = "";
2str ??= "Default";
3console.log(str); // Output: "" (remains an empty string)
4
5let num: number | undefined = 0;
6num ??= 100;
7console.log(num); // Output: 0 (remains 0)
- 다른 연산자와의 조합: Null 병합 대입 연산자를 다른 연산자와 함께 사용하면 예상치 못한 결과를 초래할 수 있습니다. 특히 이는 논리 OR 대입 연산자와의 차이점을 이해하는 것이 중요합니다.
1let value: string | null = null;
2value ||= "Default"; // Targets not only "null" and "undefined" but also falsy values
3console.log(value); // Output: "Default"
4
5value = "";
6value ||= "Default"; // An empty string is also targeted
7console.log(value); // Output: "Default"
8
9value = null;
10value ??= "Default"; // Targets only null or undefined
11console.log(value); // Output: "Default"
샘플 코드
1let config: { theme?: string; language?: string } = {};
2
3// Use Nullish Coalescing Assignment to set default values
4config.theme ??= "light";
5config.language ??= "en";
6
7console.log(config); // Output: { theme: "light", language: "en" }
8
9let list: number[] | null = null;
10list ??= [];
11list.push(42);
12
13console.log(list); // Output: [42]
Null 병합 대입 연산자를 사용하면 불필요한 코드를 제거하고 보다 간결하고 우아한 TypeScript 코드를 작성할 수 있습니다.
요약
Nullish 결합 할당 연산자(??=)는 TypeScript에서 단순하고 효율적인 할당 연산 중 하나입니다. 기본값을 설정하는 동안 null 또는 undefined를 확인해야 할 때 특히 유용합니다. 전통적인 if 문이나 삼항 연산자와 비교하여, 코드를 더 간결하고 읽기 쉽게 만들어주므로 향후 개발에서 적극 활용해야 합니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.