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

🐨🎀[GIF] Cheatsheet for Javascript Nullish Coalescing operator

hem profile image Hem ・Updated on ・2 min read

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 `left-hand side` of the `??` operator evaluates to `undefined` or `null`, its `right-hand side` is returned.

Scenario 2: Behavior of Nullish Coalescing ?? operator with falsy Javascript values.
Behavior of Nullish Coalescing `??` operators when `falsy` 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 `||` and `&&` *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 `||` and `&&` *with* parentheses groups

When mixed with other short-circuiting operators `||` and `&&` *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 ❀️




Discussion

pic
Editor guide
Collapse
diegomgar profile image
Dieg Oto

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 Author

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 Author

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 Author

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 Author

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 πŸ•Ί