DEV Community

Cover image for JavaScript Amazing operators
capscode
capscode

Posted on • Updated on • Originally published at capscode.in

JavaScript Amazing operators

JavaScript Amazing operators

Hello Everyone,
In this tutorial I am going to discuss about 3 amazing operators that is very useful and time saving operator that most of beginner developers don't know.
The 3 operator are,

  1. Nullish Coalescing Operator (??)
  2. Logical Nullish Assignment (??=)
  3. Optional Chaining Operator (?.)

We are going to discuss each of these operator one by one with some of the examples for better understanding.

1. Nullish Coalescing Operator (??)

syntax:
a??b

  • If a is defined then the output will be a
  • if a is not defined/ Nullish (NULL or UNDEFINED) then the output will be b

In other words, Nullish Coalescing Operator(??) returns the first argument if it is NOT null or undefined. Otherwise returns second argument

Examples:

let a=NULL
console.log(a??50) //50
console.log(a) //NULL
let a=10
let c=30
console.log(a??b??c??d) //10
//gives output, the first defined value

2. Logical Nullish Assignment (??=)

syntax:
a ??= b
the above syntax is equivalent to a ?? (a=b)

  • if a is not NULLISH (Null or Undefined), then output will be a
  • if a is NULLISH, then output will be b, and value of b is assigned to a

example:

let a=NULL
console.log(a??=50) //50
console.log(a) //50
//compare the output of a from the previous example.

3. Optional Chaining Operator (?.)

syntax:
obj ?. prop

  • is similar to obj.prop if the value of obj exist,
  • otherwise, if value of obj is undefined or null it returns undefined.

By using ?. operator with object instead of using only dot (.) operator , JavaScript knows to implicitly check to be sure that that obj is not null or undefined before attempting to access obj.prop

NOTE: obj can be nested as well like obj . name ?. firstname

example:

let obj= {
   person:{
       firstName:"John",
       lastName:"Doe"
   },

   occupation: {
       compony:'capscode',
       position:'developer'
   },
   fullName: function(){
       console.log("Full Name is: "+ this.person.firstName+" >"+this.person.lastName)
  }
}
console.log(obj . person . firstName) //John
console.log(obj . human . award) //TypeError: Cannot read property 'award' of undefined
console.log(obj ?. human . award) //TypeError: Cannot read property 'award' of undefined
console.log(obj . human ?. award) //undefined
delete obj?.firstName;  // delete obj.firstName if obj exists
obj . fullName ?. () //logs John Doe
obj ?. fullName() //logs John Doe
obj . fullDetails() // TypeError: obj.fullDetails is not a function
obj ?. fullDetails() // TypeError: obj.fullDetails is not a function
obj.fullDetails ?. () //undefined

summing up these,
The optional chaining ?. syntax has three forms:

  1. obj?.prop – returns obj.prop if obj exists, otherwise undefined.
  2. obj?.[prop] – returns obj[prop] if obj exists, otherwise undefined.
  3. obj.method?.() – calls obj.method() if obj.method exists, otherwise returns undefined.

Hope you all like this and this post will be informative and helpful for you in your next project.
If you have any query or doubt, fell free to contact us.

Please visit https://www.capscode.in/#/ for more info
or
follow us on Instagram https://www.instagram.com/capscode.in/

IF MY ARTICLE HELPED YOU

Buy Me A Coffee

Thank You,
CapsCode

Discussion (6)

Collapse
taufik_nurrohman profile image
Taufik Nurrohman

Keep in mind:

let a, b = 1;
a ?? b; // → 1
a || b; // → 1
Enter fullscreen mode Exit fullscreen mode
let a = null, b = 1;
a ?? b; // → 1
a || b; // → 1
Enter fullscreen mode Exit fullscreen mode
let a = false, b = 1;
a ?? b; // → false
a || b; // → 1
Enter fullscreen mode Exit fullscreen mode
let a = 0, b = 1;
a ?? b; // → 0
a || b; // → 1
Enter fullscreen mode Exit fullscreen mode
let a = "", b = 1;
a ?? b; // → ""
a || b; // → 1
Enter fullscreen mode Exit fullscreen mode
  • ?? for null and undefined only.
  • || for falsy values such as "", 0 and false but also includes null and undefined as well.
Collapse
capscode profile image
capscode Author

Hey Hi,
Thanks for adding this...
shall I add this to my blog ? what say ?

Collapse
nikla profile image
Nikla • Edited on

I think the post would benefit from also mentioning it. These two are easy to mix up and use incorrectly.

Collapse
taufik_nurrohman profile image
Taufik Nurrohman

It’s up to you.

Collapse
ra1nbow1 profile image
Matvey Romanov

Good read

Collapse
capscode profile image
capscode Author

Thank you :)