DEV Community

Muhammad Saim Hashmi
Muhammad Saim Hashmi

Posted on • Edited on

Difference between ? and ?? in JavaScript/Typescript

#javascript #operators #optional #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
Enter fullscreen mode Exit fullscreen mode

??

?? 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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (20)

Collapse
 
noriller profile image
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";
Enter fullscreen mode Exit fullscreen mode
Collapse
 
saimwebhr profile image
Muhammad Saim Hashmi •

Great, thanks for the correction Bruno.

Collapse
 
tasin5541 profile image
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
Enter fullscreen mode Exit fullscreen mode 
var name = null;

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

console.log("hello", name  ?? "empty");
// hello empty
Enter fullscreen mode Exit fullscreen mode
Collapse
 
saimwebhr profile image
Muhammad Saim Hashmi •

Great, thanks

Collapse
 
sagaryal profile image
Sagar Aryal •

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

console.log("hello", name  ? name : "empty");
Enter fullscreen mode Exit fullscreen mode
Collapse
 
devmando profile image
CodeFilez •

You learn something everyday! :)

Collapse
 
saimwebhr profile image
Muhammad Saim Hashmi •

Learning never stops :))

Collapse
 
kievandres profile image
Kiev Andres •

Thanks for the article!

Collapse
 
srnascimento40 profile image
SrNascimento40 •

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

Collapse
 
saimwebhr profile image
Muhammad Saim Hashmi •

Do give it a shot.

Collapse
 
gajjardarshithasmukhbhai profile image
Darshit Gajjar • • Edited

I love this article ❤️❤️

Collapse
 
saimwebhr profile image
Muhammad Saim Hashmi •

Glad to hear it.

Collapse
 
akhan763 profile image
Ali Khan •

Such an informational feed!

Collapse
 
saimwebhr profile image
Muhammad Saim Hashmi •

Thanks a lot buddy.

Collapse
 
yashraj021 profile image
Yash •

It returns true for 0 and false for Unknown and Null

Collapse
 
x3daniking profile image
Adnan Khan •

Wow, thanks dude for the gain

Collapse
 
saimwebhr profile image
Muhammad Saim Hashmi •

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

Collapse
 
quannh2 profile image
Quan Nguyen •

Clear information. Thanks!

Collapse
 
saimwebhr profile image
Muhammad Saim Hashmi •

I'm happy to help.

View full discussion (20 comments)

Read next

fahaddevs profile image

Dot Notation vs Bracket Notation for Object Properties – What's the Difference?

Fahad Bin Faiz -

michael_flanagan_red profile image

Building the Backbone: Entities Part 2, Agent

Michael Flanagan -

aamulumi profile image

The Useless Type Array Sorter in Typescript

Florian "Aamu" KAUDER -

cp_nandani profile image

Building a Better Monorepo with TypeScript, Turborepo, or Nx

Nandani Sharma -