자바스크립트의 Null 병합 연산자(??)를 활용한 값 대체 기능

 

자바스크립트의 Null 병합 연산자(??)를 활용한 값 대체 기능

 

자바스크립트에서는 null 병합 연산자(??)를 사용하여 변수나 표현식이 null 또는 undefined인 경우에 대체 값을 제공할 수 있습니다. 이를 통해 간결하고 효율적인 코드를 작성할 수 있습니다.

Null 병합 연산자(??)는 다음과 같은 동작을 가지고 있습니다. 왼쪽 피연산자를 평가하고, 그 값이 null 또는 undefined인 경우에만 오른쪽 피연산자의 값을 반환합니다. 그 외의 경우에는 왼쪽 피연산자의 값을 그대로 반환합니다.

let username = null;
let displayName = username ?? "Guest";

console.log(displayName);  // 출력: "Guest"

위 예시에서는 username 변수가 null이므로 대체 값인 "Guest"가 displayName에 할당됩니다.

또한, null 병합 연산자(??)는 연속적으로 사용할 수도 있습니다. 이 경우 왼쪽에서 오른쪽으로 평가되며, 첫 번째로 null 또는 undefined가 아닌 값을 반환합니다.

let value1 = null;
let value2 = undefined;
let value3 = "Hello";
let defaultValue = value1 ?? value2 ?? value3;

console.log(defaultValue);  // 출력: "Hello"

위 코드에서는 value1이 null이므로 value2를 확인하고, value2도 undefined이므로 value3가 첫 번째로 null 또는 undefined가 아닌 값이므로 "Hello"가 defaultValue에 할당됩니다.

주의해야 할 점은 null 병합 연산자는 왼쪽 피연산자가 null 또는 undefined일 때만 대체 값을 반환한다는 점입니다. 따라서 왼쪽 피연산자가 falsy한 값이라고 해도 null 또는 undefined가 아니라면 왼쪽 피연산자의 값을 그대로 반환합니다.

let num = 0;
let defaultValue = num ?? 42;

console.log(defaultValue);  // 출력: 0

위 코드에서는 num이 0으로 falsy한 값이지만 null 병합 연산자는 왼쪽 피연산자가 null 또는 undefined일 때만 오른쪽 피연산자를 반환하므로 defaultValue에는 0이 그대로 할당됩니다.

따라서 null 병합 연산자를 사용할 때는 기대한 결과가 나오도록 적절한 대체 값을 함께 사용해야 합니다.

 

 

---

이와 같이 자바스크립트에서 null 병합 연산자(??)를 활용하면 변수나 표현식이 null 또는 undefined인 경우에 대체 값을 제공할 수 있습니다. 이를 통해 코드의 가독성과 효율성을 높일 수 있습니다.

Null 병합 연산자의 동작 방식은 다음과 같습니다. 왼쪽 피연산자를 평가하고, 그 값이 null 또는 undefined인 경우에만 오른쪽 피연산자의 값을 반환합니다. 그 외의 경우에는 왼쪽 피연산자의 값을 그대로 반환합니다.

하지만 주의해야 할 점도 있습니다. null 병합 연산자는 왼쪽 피연산자가 null 또는 undefined일 때만 대체 값을 반환합니다. 따라서 왼쪽 피연산자가 falsy한 값(예: 0, 빈 문자열)이라고 해도 null 또는 undefined가 아니라면 왼쪽 피연산자의 값을 그대로 반환합니다.

예를 들어, 다음과 같은 코드를 살펴보겠습니다.

let num = 0;
let defaultValue = num ?? 42;

console.log(defaultValue);  // 출력: 0

위 코드에서 num은 0으로 falsy한 값입니다. 하지만 null 병합 연산자는 왼쪽 피연산자가 null 또는 undefined일 때만 오른쪽 피연산자를 반환하므로 defaultValue에는 0이 그대로 할당됩니다.

따라서 null 병합 연산자를 사용할 때는 기대한 결과가 나오도록 적절한 대체 값을 함께 사용해야 합니다. 이를 통해 코드의 안정성과 예측성을 높일 수 있습니다.

 

---

null 병합 연산자의 동작 방식은 다음과 같습니다:

1. 왼쪽 피연산자를 평가합니다.

2. 왼쪽 피연산자가 null 또는 undefined이면, 오른쪽 피연산자의 값을 반환합니다.

3. 왼쪽 피연산자가 null 또는 undefined가 아니면, 왼쪽 피연산자의 값을 반환합니다.

 

이러한 동작으로 인해 null 병합 연산자를 사용하면 간결하고 효율적인 코드를 작성할 수 있습니다. 대체 값을 설정하는 데 유용한 상황은 다음과 같습니다:

1. 사용자 입력을 받을 때 기본값 설정: 사용자가 입력하지 않은 경우나 입력이 null 또는 undefined인 경우에 기본값을 설정할 수 있습니다.

let userInput = null;
let value = userInput ?? "Default Value";
console.log(value);  // 출력: "Default Value"

2. API 응답 처리: 서버로부터 받은 데이터에서 특정 필드가 null이거나 undefined인 경우에 대체 값을 사용할 수 있습니다.

let responseData = { name: "John", age: null };
let age = responseData.age ?? "Unknown";
console.log(age);  // 출력: "Unknown"

3. 변수 초기화: 변수가 null이거나 undefined인 경우에 초기 값을 설정할 수 있습니다.

let variable = null;
let initializedVariable = variable ?? "Initial Value";
console.log(initializedVariable);  // 출력: "Initial Value"

null 병합 연산자는 ES11(ECMAScript 2020)에서 도입되었으며, 이전 버전의 자바스크립트에서는 조건문이나 논리 연산자 등을 사용하여 유사한 동작을 구현해야 했습니다. 하지만 null 병합 연산자를 사용하면 코드를 간결하게 유지할 수 있습니다.