Difference between ? and ?? in JavaScript/Typescript

Hey folks, if you have opened this article that means you are curious about these 2 operators, how they operate, and what's the difference between these two. So without wasting any time, let's jump into details with a code example.

?

? is Optional Chaining Operator, also commonly named as null checker for objects. Its primary use is to check if an object exists or not.

Example

const user = {
    id: 5,
    name: "John"
};
console.log(user?.name); //John
console.log(user?.fullName); //undefined, program won't crash.
console.log(user.fullName); 
//TypeError: Cannot read property ‘fullName’ of undefined

??

?? is Nullish Coalescing Operator. It is used to initialize an object/variable if it is undefined or null.

Example

const user = {
    id: 5,
    name: "",
    firstName: null,
    lastName: undefined
};
console.log(user.name??"Johnny Depp");// prints ""
console.log(user.firstName??"Johnny");// prints Johnny
console.log(user.lastName??"Depp");// prints Depp

Feel free to add suggestions in the comments.
Thanks. Happy Coding.

Comments

[Bruno Noriller]

Hey!
I know what you meant, but the user.fullName don't crash. It just returns undefined.
For it to crash you would need user.fullName.somethingElse.

This is because the user object exists and it's not a problem to try access keys that don't exist.

Also, this could be translation issues, but ?? works as ||, except, as you said, only with null and undefined.

As a tip: use 3 backticks (`) plus the language to print code:

// ts example here
// just add "ts" after the backticks
const script: Language = "javascript";

[Muhammad Saim Hashmi]

Great, thanks for the correction Bruno.

[Miftaul Mannan]

Another thing to keep in mind when you're checking for empty string (i.e ""). Nullish Coalescing Operator (??) will return false only if the variable is null. But Optional Chaining Operator (?) will return false if either the value is null or if it's an empty string.

var name = "";

console.log("hello", name  ? name : "empty");
// hello empty

console.log("hello", name  ?? "empty");
// hello

var name = null;

console.log("hello", name  ? name : "empty");
// hello empty

console.log("hello", name  ?? "empty");
// hello empty

[Muhammad Saim Hashmi]

Great, thanks

[Sagar Aryal]

Just to clarify below code is Not Optional Chaining Operator but Ternary operator.

console.log("hello", name  ? name : "empty");

[CodeFilez]

You learn something everyday! :)

[Muhammad Saim Hashmi]

Learning never stops :))

[Kiev Andres]

Thanks for the article!

[SrNascimento40]

Nice, i didn't know "??" Seems very helpful

[Muhammad Saim Hashmi]

Do give it a shot.

[Darshit Gajjar]

I love this article ❤️❤️

[Muhammad Saim Hashmi]

Glad to hear it.

[Ali Khan]

Such an informational feed!

[Muhammad Saim Hashmi]

Thanks a lot buddy.

[Yash]

It returns true for 0 and false for Unknown and Null

[Adnan Khan]

Wow, thanks dude for the gain

[Muhammad Saim Hashmi]

Most welcome. Follow me for more articles. Happy Friday.

[Quan Nguyen]

Clear information. Thanks!

[Muhammad Saim Hashmi]

I'm happy to help.

[Sagar Aryal]

As @noriller has already mentioned, above example is incorrect. Also I would like to mention that ? is not Optional Chaining Operator but ?. is.

I think it would be better if the author could correct the Post to avoid misunderstanding. Thanks.