자바스크립트에서의 Null 병합 연산자

이 글에서는 자바스크립트의 Null 병합 연산자에 대해 설명합니다.

YouTube Video

자바스크립트에서의 Null 병합 연산자

자바스크립트에서 Null 병합 연산자 (??)는 값이 **null 또는 undefined**인지 평가하고, 그렇다면 다른 기본값을 반환합니다. 이것은 일반적으로 사용되는 논리 OR 연산자 (||)와 유사하지만, null 및 undefined에 특화되어 있다는 점에서 다릅니다.

논리 OR 연산자는 왼쪽 값이 falsy일 경우 오른쪽 값을 반환하는 반면, null 병합 연산자는 왼쪽 값이 null 또는 undefined일 경우에만 오른쪽 값을 반환합니다. 이 기능은 0 및 빈 문자열("")과 같은 값을 올바르게 처리할 수 있게 합니다.

기본 구문

1let result = value ?? defaultValue;

• value는 확인하려는 값입니다.
• defaultValue는 value가 null 또는 undefined일 때 반환되는 값입니다.

Null 병합 연산자 사용 예제

다음 예제는 null 또는 undefined인 경우 기본값을 반환하는 과정을 구현합니다.

1let name = null;
2let defaultName = "Anonymous";
3
4// If name is null or undefined, 'Anonymous' is returned
5let displayName = name ?? defaultName;
6console.log(displayName); // "Anonymous"

이 코드는 name이 null이므로, defaultName 값인 "Anonymous"가 반환됩니다. name이 null 또는 undefined가 아닌 다른 값이라면, 그 값이 반환됩니다.

논리 OR 연산자와의 차이점

null 병합 연산자는 논리 OR 연산자와 비슷하지만 중요한 차이점이 있습니다. 논리 OR 연산자는 'falsy' 값들 (false, 0, NaN, "", null, undefined 등)을 확인하는 반면, null 병합 연산자는 null 및 undefined만 확인합니다.

논리 OR 연산자 예제:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is falsy (0), defaultCount is returned
5let result = count || defaultCount;
6console.log(result); // 10

Null 병합 연산자 예제:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is neither null nor undefined, count is returned as is
5let result = count ?? defaultCount;
6console.log(result); // 0

이와 같이, null 병합 연산자는 0이나 빈 문자열("")과 같은 유효한 값을 유지하며 필요한 경우에만 기본값을 반환합니다. 논리 OR 연산자는 이러한 값을 falsy로 처리하여 기본값을 반환하므로, 용도에 따라 적절한 연산자를 선택하는 것이 중요합니다.

조합하여 사용할 때의 예제:

null 병합 연산자는 다른 논리 연산자와 결합하여 사용할 수 있지만, 이 경우 주의가 필요합니다.

1let a = null;
2let b = 0;
3let c = false;
4
5// SyntaxError
6let result = a ?? b || c;

• 예를 들어 논리 OR 연산자 (||)나 논리 AND 연산자 (&&)와 함께 사용할 경우, 연산 순서를 명확히 하기 위해 괄호를 사용하는 것이 좋습니다.

1let a = null;
2let b = 0;
3let c = false;
4
5let result = (a ?? b) || c;
6console.log(result); // false

• 이 예제에서, a ?? b가 먼저 평가되며, a가 null이기 때문에 b가 반환됩니다. 그런 다음 b || c가 평가되고, b가 falsy 값이므로 최종적으로 c가 반환됩니다.

null 병합 연산자가 유용한 경우

다음은 null 병합 연산자가 유용한 경우입니다.

• 양식에 대한 기본 값 사용자가 아무것도 입력하지 않을 때, 폼 입력 필드에 기본값을 설정하는 시나리오에서 사용할 수 있습니다.

1let userAge = null;
2let defaultAge = 18;
3let age = userAge ?? defaultAge;
4console.log(age); // 18

• API 응답 처리 API 응답에서 값이 null 또는 undefined일 경우 대체 처리를 수행할 수 있습니다.

1let apiResponse = {
2    title: "New Article",
3    description: null
4};
5
6let title = apiResponse.title ?? "Untitled";
7let description = apiResponse.description ?? "No description available";
8console.log(title);        // "New Article"
9console.log(description);  // "No description available"

요약

null 병합 연산자 (??)는 데이터를 초기화하거나 API 응답을 처리할 때 매우 유용하며, null 또는 undefined가 나타날 경우 기본값을 반환합니다. 특히, 0이나 빈 문자열과 같은 falsy 값을 제대로 처리하려는 경우 기존 논리 OR 연산자 (||)보다 더 나은 선택입니다.

널 병합 대입 연산자 (??=)에 대하여

개요

JavaScript에서 null 또는 undefined 값을 가진 변수에 효율적으로 새 값을 할당하기 위해 **널 병합 대입 연산자 ??=**가 도입되었습니다. 이 연산자는 특정 값이 null 또는 undefined인 경우에만 변수에 값을 할당하는 편리한 단축형입니다.

기본 사용법

null 병합 할당 연산자는 다음과 같이 작동합니다:.

• 변수가 null이거나 undefined인 경우 오른쪽 값이 할당됩니다.
• 변수가 null 또는 undefined가 아닌 경우 아무 동작도 하지 않고 현재 값을 유지합니다.

문법

null 병합 할당 연산자의 기본 문법은 다음과 같습니다:.

1x ??= y;

• x가 null이거나 undefined인 경우 y가 x에 할당됩니다.
• x가 이미 값을 가지고 있는 경우(null 또는 undefined가 아닌 경우), x의 값은 변경되지 않습니다.

예제

null 병합 할당 연산자의 기본 예제를 살펴봅시다.

1let userName = null;
2let defaultName = "Guest";
3
4// Since userName is null, defaultName is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Guest"

• 이 코드에서 userName이 null이므로 defaultName 값이 할당됩니다.

다음은 값이 null 또는 undefined가 아닌 경우의 예제입니다.

1let userName = "Alice";
2let defaultName = "Guest";
3
4// Since userName is "Alice", nothing is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Alice"

• 이 경우, userName에 이미 "Alice"가 설정되어 있으므로 값이 할당되지 않습니다.

다른 대입 연산자와의 비교

JavaScript에는 다른 여러 대입 연산자도 있습니다. 특히 논리 OR 대입 연산자 (||=)와의 차이점이 중요합니다.

1let value = 0;
2value ||= 10;  // Assign 10 if value is falsy
3console.log(value);  // 10

논리 OR 할당 연산자는 false, 0, 빈 문자열("")과 같은 falsy 값을 만나도 값을 할당하지만, null 병합 할당 연산자는 값이 null 또는 undefined일 때만 동작합니다.

1let value = 0;
2value ??= 10;
3// Since value is neither null nor undefined,
4// nothing is assigned
5console.log(value);  // 0

null 병합 할당 연산자는 null 또는 undefined에서만 동작하므로, 0이나 false와 같은 값을 유지하려는 경우 매우 유용합니다.

현실 세계의 사용 사례

널 병합 대입 연산자의 실제 사용 사례는 다음과 같습니다:.

1. 기본값 설정

   사용자 입력이나 API 응답이 null 또는 undefined일 수 있는 경우 기본값을 설정하는 데 유용합니다.

1let userSettings = {
2    theme: null,
3    notifications: true
4};
5
6// Since theme is null, "light" is assigned
7userSettings.theme ??= "light";
8
9console.log(userSettings.theme);  // "light"

2. 옵션 매개변수 처리

   함수 인수가 지정되지 않았을 때 기본 작업을 수행하는 데도 사용할 수 있습니다.

1function greet(name) {
2    name ??= "Guest";
3    console.log(`Hello, ${name}!`);
4}
5
6greet();  // "Hello, Guest!"
7greet("Alice");  // "Hello, Alice!"

요약

null 병합 할당 연산자 (??=)는 왼쪽 값이 null 또는 undefined일 때만 값을 할당하므로, 코드를 더 간결하게 만들고 의도하지 않은 할당을 방지하는 데 도움이 됩니다. 특히 0 또는 false와 같은 "거짓 같은 값"을 처리할 때 전통적인 논리 OR 연산자 (||=)보다 더 적합할 수 있습니다.

이 연산자를 사용하면 더 견고하고 가독성이 높은 코드를 작성할 수 있습니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video