자바스크립트 물음표 두개 '??'는 뭘까?: JS Nullish Coalescing Operator
안녕하세요. 독자 여러분! 최근 자바스크립트에서 흔히 볼 수 있는 물음표 두 개 (??) 가 뭔지 궁금해하시는 분들이 많았습니다. 오늘은 바로 이 Nullish Coalescing Operator에 대해 알아보도록 하겠습니다.
1. ?? 연산자의 정의
1.1. 무엇을 위한 연산자인가?
Nullish Coalescing Operator (??) 는 자바스크립트에서 relatively 최신 문법입니다. 이 연산자는 왼쪽 피연산자가 null 또는 undefined일 경우 오른쪽 피연산자를 반환합니다. 만약 왼쪽 피연산자가 그렇지 않으면, 왼쪽 피연산자를 반환합니다.
let result = value ?? "default";
1.2. 왜 필요한 연산자일까?
기존에 우리는 || 연산자를 사용하여 동일한 목적으로 사용했습니다. 그런데 ||는 falsy 값에 대해서도 오른쪽 피연산자를 반환하는 반면, ??는 오직 null과 undefined에 대해서만 오른쪽 피연산자를 반환한다는 점에서 차이가 있습니다.
2. ??와 ||의 주요 차이점
2.1. Falsy 값과 Nullish 값
자바스크립트에서 falsy 값에는 false, 0, "", null, undefined, NaN 등이 있습니다. 반면, nullish 값은 null과 undefined 두 가지입니다.
2.2. 코드 스니펫을 통한 차이점 이해
let falsyValue = 0;
let result1 = falsyValue || "default"; // "default"
let result2 = falsyValue ?? "default"; // 0
위의 예시를 보면, || 연산자는 falsyValue가 falsy값이기 때문에 "default"를 반환합니다. 그러나, ?? 연산자는 falsyValue가 nullish값이 아니기 때문에 0을 반환합니다.
3. 언제 ?? 연산자를 사용해야 할까?
3.1. 디폴트 값 설정 시
?? 연산자는 주로 객체의 속성값이 null 또는 undefined일 때 디폴트 값을 설정하는데 유용합니다.
let user = {
name: "John",
age: null
};
let age = user.age ?? 25; // 25
3.2. 함수 매개변수의 기본값 설정
함수의 매개변수 값이 전달되지 않았을 때 디폴트 값을 설정하는 데에도 ?? 연산자를 활용할 수 있습니다.
function greet(name = null) {
let greetingName = name ?? "Guest";
console.log(`Hello, ${greetingName}!`);
}
greet(); // Hello, Guest!
마치며
요약하면, ?? 연산자는 자바스크립트에서 null과 undefined 값을 체크하고 그에 따라 다른 값을 반환할 때 유용한 도구입니다. 기존의 || 연산자와의 차이점을 정확히 이해하고 적절한 상황에서 사용하는 것이 중요합니다.
함께 읽으면 좋은 글
