DEV Community

Cover image for 🐨🎀[GIF] Cheatsheet for Javascript Nullish Coalescing operator
Hem
Hem

Posted on • Updated on

🐨🎀[GIF] Cheatsheet for Javascript Nullish Coalescing operator

Good day folks! πŸ‘‹ Today, we are going to cover something small, yet, an important feature in Javascript. In this post, we will see how Nullish Coalescing or Nullish Koala-sing 🐨🎀 (whichever sounds good πŸ˜…) works using GIFs.

πŸ‘‡Things to note before we get started:

  1. Short-circuiting is denoted by ⚑️
  2. At the time of writing this post, Nullish Coalescing was a Stage 4 proposal

Alright, let's get started with the different scenarios of its usage

Scenario 1 (Base case): If the expression at the left-hand side of the ?? operator evaluates to undefined or null, its right-hand side is returned.
If the expression at the  raw `left-hand side` endraw  of the  raw `??` endraw  operator evaluates to  raw `undefined` endraw  or  raw `null` endraw , its  raw `right-hand side` endraw  is returned.

Scenario 2: Behavior of Nullish Coalescing ?? operator with falsy Javascript values.
Behavior of Nullish Coalescing  raw `??` endraw  operators when  raw `falsy` endraw  Javascript values are passed

Notice how short-circuiting (denoted by ⚑️) happens when the LHS is null or undefined. It doesn't matter if the LHS is falsy values except for null and undefined

Note: Explicit parentheses groups are required to mix with || and &&

Scenario 3: When mixed with other short-circuiting operators || and && without parentheses
When mixed with other short-circuiting operators  raw `||` endraw  and  raw `&&` endraw  *without* parentheses logical or and logical and javascript

Scenario 4: When mixed with other short-circuiting operators || and && with parentheses groups
When mixed with other short-circuiting operators  raw `||` endraw  and  raw `&&` endraw  *with* parentheses groups

When mixed with other short-circuiting operators  raw `||` endraw  and  raw `&&` endraw  *with* parentheses groups

That's it for today and I hope you found it useful!

And hey, I ❀️ learning from and staying in touch with the curious folks out there (I'm looking at you. Yeah, YOU!). So, please feel free to reach out if you have any questions or suggestions πŸ™‹β€β™€οΈπŸ™‹β€β™‚οΈ I'm all ears 🀩

Auf wiedersehen πŸ™ŒπŸΌ


Repo Link :

GitHub logo hemchander23 / javascript_in_gifs

Javascript concepts and features visualised in the form of GIFS. I use it for my own reference. Glad if it was useful for you !

Javascript in GIFs πŸŽ‰

Do you find the documentation hard to understand ? Worry no more, the GIFs got you covered!

Contents

  1. Promise API
  2. Nullish Coalescing

Feel free to contribute ❀️




Top comments (8)

Collapse
 
diek profile image
diek • Edited

Wtf, do you say this is something small?? I am using logic operators from almost always to evaluate values the way you show, and now I understand how it works as it does. I didn't even knew the ??. Thanks you very much! Omg this site it's giving me so much... :)

Collapse
 
hem profile image
Hem

Love the feedback haha! Thanks. Hope it was useful :D !

Collapse
 
nikla profile image
Nikla

This series is excellent. Great GIFs

Collapse
 
hem profile image
Hem • Edited

I am delighted that you found this useful! Will keep making more for the community πŸŽ‰

Collapse
 
baso53 profile image
Sebastijan Grabar

You probably should have mentioned that this isn't a part of the official ECMAScript specification. :)

Also, you can usually just use OR operator - || - for this, except if you consider some of the falsy values to actually be values (eg. not null or undefined, as descibed in developer.mozilla.org/en-US/docs/W...).

Collapse
 
hem profile image
Hem

Thanks, Sebastijan. Forgot to include this! Will add :)

Collapse
 
iamarsenibragimov profile image
Arsen Ibragimov

Wow! Useful info in gif form!

Collapse
 
hem profile image
Hem • Edited

I am so glad that it was useful !! I am more of a visual learner. It seems like lot of folks here enjoy this approach ❀ Will keep making more πŸ•Ί