[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing [Back]  [Original]

Nullish coalescing operator - JavaScript | MDN

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

Nullish coalescing operator

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since 2020 7.

(??) null undefined , .

null undefined falsy OR (||) . foo falsy ( '' 0) || . .

, || () .

In this article

const foo = null ?? "default string";
console.log(foo);
// Expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// Expected output: 0

js
leftExpr ?? rightExpr;

null undefined , .

, OR (||) :

js
let foo;
...
//  foo is never assigned any value so it is still undefined
let someDummyText = foo || 'Hello!';

|| boolean , boolean falsy (0, '', NaN, null, undefined) . 0, '' or NaN .

js
let count;
let text;
...
count = 0;
text = "";
...
let qty = count || 42;
let message = text || "hi!";
console.log(qty);     // 42 and not 0
console.log(message); // "hi!" and not ""

null undefined , :

js
let myText = ""; // An empty string (which is also a falsy value)

let notFalsyText = myText || "Hello world";
console.log(notFalsyText); // Hello world

let preservingFalsy = myText ?? "Hi neighborhood";
console.log(preservingFalsy); // '' (as myText is neither undefined nor null)

OR AND , null undefined .

js
function A() {
  console.log("A was called");
  return undefined;
}
function B() {
  console.log("B was called");
  return false;
}
function C() {
  console.log("C was called");
  return "foo";
}

console.log(A() ?? C());
// logs "A was called" then "C was called" and then "foo"
// as A() returned undefined so both expressions are evaluated

console.log(B() ?? C());
// logs "B was called" then "false"
// as B() returned false (and not null or undefined), the right
// hand side expression was not evaluated

No chaining with AND or OR operators

AND (&&) OR (||) ?? . SyntaxError .

js
null || undefined ?? "foo"; // raises a SyntaxError
true || undefined ?? "foo"; // raises a SyntaxError

:

js
(null || undefined) ?? "foo"; // returns "foo"

Optional chaining (?.)

undefined null , optional chaining (?.) null or undefined .

js
let foo = { someFooProp: "hi" };

console.log(foo.someFooProp?.toUpperCase()); // "HI"
console.log(foo.someBarProp?.toUpperCase()); // undefined

null or undefined .

js
function getMiscObj() {
  return {
    aNullProperty: null,
    emptyText: "", // this is not falsy
    someNumber: 42,
  };
}

const miscObj = getMiscObj();

const newObj = {};
newObj.propA = miscObj.aNullProperty ?? "default for A";
newObj.propB = miscObj.emptyText ?? "default for B";
newObj.propC = miscObj.someNumber ?? 0;

console.log(newObj.propA); // "default for A"
console.log(newObj.propB); // "" (as the empty string is not null or undefined)
console.log(newObj.propC); // 42

Specification
ECMAScript 2027 LanguageSpecification
# prod-CoalesceExpression


Web Proxy Viewer  |  New URL  |  Original Page