JavaScript - Nullish Coalescing 연산자

안녕하세요, 야심찬 프로그래머 여러분! 오늘 우리는 JavaScript의 흥미로운 기능에 대해 알아보겠습니다. 이 기능은 코드를 더 깨끗하고 효율적으로 만들 수 있을 것입니다. 그 이름은 Nullish Coalescing 연산자이며, 이 연산자의 힘을 이해하면 당신도 저처럼 흥분할 것입니다!

Nullish Coalescing 연산자는 무엇인가요?

자, 구체적인 내용으로 들어가기 전에 간단한 질문을 드릴게요: 값을 사용하기 전에 해당 값이 null이나 undefined인지 확인해 본 적이 있으신가요? 만약 고개를 끄덕이신다면, 이제부터 다가올 내용을 좋아할 거예요!

Nullish Coalescing 연산자( ?? 로 표현됨)는 왼쪽 피 연산자가 null이나 undefined일 때 오른쪽 피 연산자를 반환하고, 그렇지 않으면 왼쪽 피 연산자를 반환하는 논리 연산자입니다.

이제 이 설명이 처음에는稍复杂할 수 있지만, 걱정 마세요! 많은 예제를 통해 단계별로 설명해 나갈게요.

문법

Nullish Coalescing 연산자의 문법은 예상보다 간단합니다:

leftExpr ?? rightExpr

여기서 leftExpr과 rightExpr는 모든 유형의 표현식일 수 있습니다. leftExpr이 null이나 undefined라면, 연산자는 rightExpr을 반환합니다. 그렇지 않으면 leftExpr을 반환합니다.

예제

이제 몇 가지 예제를 통해 이 연산자가 실제로 어떻게 작동하는지 살펴보겠습니다.

예제 1: 기본 사용

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

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

이 예제에서 username은 null이므로, Nullish Coalescing 연산자는 "Anonymous"를 반환합니다. 마치 "username에 값이 있다면 그 값을 사용하고, 그렇지 않으면 'Anonymous'를 사용하자"고 말하는 것과 같습니다.

예제 2: 논리 OR 연산자와 비교

당신은 아마 "논리 OR 연산자(||)로 이 작업을 수행할 수 없나?"라고 생각할 수도 있습니다. 그럼 차이점을 살펴보겠습니다:

let count = 0;

let result1 = count || 10;
let result2 = count ?? 10;

console.log(result1); // 출력: 10
console.log(result2); // 출력: 0

surprise! 논리 OR 연산자는 0을 거짓 값으로 간주하고 10을 반환하지만, Nullish Coalescing 연산자는 오직 null이나 undefined를 확인하므로 0을 반환합니다.

예제 3: 중첩된 Nullish Coalescing

Nullish Coalescing 연산자를 여러 개 연속으로 사용할 수도 있습니다:

let user = {
name: "Alice",
age: null
};

let userAge = user.age ?? user.yearOfBirth ?? "Unknown";

console.log(userAge); // 출력: "Unknown"

여기서 우리는 먼저 user.age가 null이나 undefined인지 확인합니다. user.age가 null이므로, 우리는 user.yearOfBirth를 확인합니다. user.yearOfBirth가 존재하지 않으므로 (undefined), 마지막으로 "Unknown"을 반환합니다.

단절 평가

Nullish Coalescing 연산자의 가장 멋진 기능 중 하나는 단절 평가입니다. 이는 왼쪽 피 연산자가 null이나 undefined가 아닐 때 오른쪽 피 연산자가 평가되지 않음을 의미합니다!

let x = 5;
let y = x ?? console.log("이 문장은 출력되지 않습니다");

console.log(y); // 출력: 5

이 예제에서 x가 null이나 undefined가 아니므로, 오른쪽의 console.log()는 실행되지 않습니다. 이는 성능 최적화에 매우 유용할 수 있습니다!

메서드 표

이제 우리가 다루었던 주요 메서드와 개념을 요약한 표를 제공하겠습니다:

메서드/개념	설명	예제
Nullish Coalescing 연산자 (??)	왼쪽 피 연산자가 null이나 undefined일 때 오른쪽 피 연산자를 반환	let result = null ?? "default"
단절 평가	왼쪽 피 연산자가 null이나 undefined가 아닐 때 오른쪽 피 연산자가 평가되지 않음	let y = 5 ?? expensiveOperation()
중첩	여러 개의 ?? 연산자를 연속으로 사용	let z = a ?? b ?? c ?? "default"

결론

이제 여러분은 Nullish Coalescing 연산자를 이해했으니, 이는 JavaScript 도구 상자에서 강력한 도구입니다. 이 연산자는 잠재적으로 null이나 undefined인 값을 처리할 때 더 깨끗하고 표현력 있는 코드를 작성하는 데 도움을 줄 것입니다.

기억하세요, 프로그래밍은 문제 해결하는 것입니다. Nullish Coalescing 연산자는 null과 undefined의 처리에 대한 스위스 아ーノ이 체인을 제공합니다. 그러므로 자신감 있게 코드를 작성해 나가세요!

이제 마무리하기 전에, 제가 가르치는 경험 중 하나를 공유하겠습니다. 제가 가르치는 한 학생은 코드에서 null 값을 처리하는 데 어려움을 겪고 있었습니다. 그들은 복잡한 if-else 문을到处 사용하여 코드를 읽고 유지하기 어렵게 만들었습니다. 그런데 Nullish Coalescing 연산자를 소개해주자, 그들의 눈이 빛났고, 코드가 밤새 깨끗해졌습니다. 그들은 이 연산자가 삶을 얼마나 쉽게 만들어주는지에 대해 끊임없이 이야기했습니다. 몇이나 될까요? 당신도 coding 여정에서 같은 "aha!" 순간을 겪을 수 있을 것입니다!

계속 연습하고, 호기심을 유지하며, 행복하게 코딩하세요!

Credits: Image by storyset