The difference between ?? and || in TypeScript

The ?? operator is also called the nullish coalescing operator (let's call it NCO for short), while the || operator can be considered as the logical OR. Both of them are used in the following schema: Left-side operand + operator + right-side operand, e.g., const date = dateFromBackend || new Date(); The difference is:

• nullish coalescing operator (??) - considers only null and undefined as reasons to return the right-side operand
• logical OR (| |) - treats any falsy value—such as 0, an empty string (""), false, null, or undefined—as a trigger to return the right-hand operand⁠

1const a = 0;
2console.log(a ?? "hello world"); // outputs 0, because 0 is not null or undefined
3console.log(a || "hello world"); // outputs hello world, because 0 is falsy
4

Thus, if you need to provide a default value only when a variable is null or undefined, use ??. If you want to cover all falsy values, use ||.

1const a = 0;
2console.log(a ?? "hello world"); // outputs 0, because 0 is not null or undefined
3console.log(a || "hello world"); // outputs hello world, because 0 is falsy
4

Exercises:

1const a = false;
2console.log(a ?? "trex"); 
3console.log(a || "trex");
4
5const b = null;
6console.log(b ?? "trex"); 
7console.log(b || "trex");
8
9const obj = { foo: "" };
10console.log(obj.foo ?? "trex"); 
11console.log(obj.foo || "trex");
12
13type X = { foo: string, boo?: string };
14
15const obj2: X = { foo: "ant" };
16console.log(obj2.foo ?? "trex"); 
17console.log(obj2.foo || "trex");
18console.log(obj2.boo ?? "trex"); 
19console.log(obj2.boo || "trex");
20

Answers:

1false 
2"trex" 
3"trex" 
4"trex" 
5"" 
6"trex" 
7"ant" 
8"ant" 
9"trex" 
10"trex" 
11