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 연산자와의 차이점
null 병합 연산자와 논리 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
- 보시는 바와 같이 논리 OR 연산자는 값이
0일 때에도 기본값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
-
반면에, null 병합 연산자는 값이
0일 때에도 원래 값을 반환합니다. -
논리 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;
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, 또는undefined일 수 있으므로 null 병합 연산자를 사용해 기본값18을 설정합니다.- 한편,
name속성은string만 허용하므로 값을 그대로 사용합니다.
요약
- 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,
3 // so the new value is assigned
4
5console.log(variable); // Output: "Default Value"
이 연산자를 사용하면 "변수가 undefined 또는 null인 경우 대입"하는 로직을 더 간결하게 작성할 수 있습니다.
전통적인 대입 방식과의 비교
Null 병합 대입 연산자가 없으면 동일한 동작을 수행하기 위해 if문이나 삼항 연산자를 사용해야 합니다. 전통적인 대입 방식과 비교해봅시다.
전통적인 방법
if 문을 사용하여 다음과 같이 작성할 수 있습니다:.
1let variable: string | null | undefined = null;
2if (variable === null || variable === undefined) {
3 variable = "Default Value";
4}
5console.log(variable); // Output: "Default Value"
삼항 연산자를 사용하는 방법
또는 삼항 연산자를 사용하여 다음과 같이 작성할 수 있습니다:.
1let variable: string | null | undefined = undefined;
2variable = variable != null ? variable : "Default Value";
3// != null checks for both null and undefined
4// (intentional loose equality comparison)
5
6console.log(variable); // Output: "Default Value"
null 병합 할당 연산자를 사용하는 간결한 방법
반면, null 병합 할당 연산자를 사용하면 다음과 같이 작성할 수 있습니다:.
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만 대상으로 합니다..
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또는undefined일 때만 할당을 수행합니다. 예를 들어 빈 문자열 (""),0, 또는false와 같은 값은 대상이 아닙니다.
다른 연산자와 함께 사용할 때 주의하세요..
1let value: string | null = null;
2
3// Targets not only "null" and "undefined" but also falsy values
4value ||= "Default";
5console.log(value); // Output: "Default"
6
7value = "";
8// An empty string is also targeted
9value ||= "Default";
10console.log(value); // Output: "Default"
11
12value = null;
13// Targets only null or undefined
14value ??= "Default";
15console.log(value); // Output: "Default"
- null 병합 할당 연산자는 다른 연산자와 함께 사용하면 의도치 않은 결과를 초래할 수 있습니다. 특히 이는 논리 OR 대입 연산자와의 차이점을 이해하는 것이 중요합니다.
샘플 코드
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를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.