📖
Maissen's Grimoire
  • Maissen's Grimoire
  • Html and css grimoire
    • HTML5 Periodical Table
    • HTML Cheat Sheet
    • CSS Cheatsheets
  • Javascript Grimoire
    • JavaScript Cheat Sheet
      • Javascript Array in depth
      • Tagged Template Literals
      • Guard Clauses - The Best Way To Write Complex Conditional Logic
      • JavaScript Optional Chaining
      • JavaScript Null Coalesce
      • What Are Magic Numbers And Why Are They Bad
      • ES6/ECMAScript2015 Cheatsheet
      • First-class and Higher Order Functions: Effective Functional JavaScript
    • Useful JavaScript Tips, Tricks and Best Practices
    • Bits of code
    • Useful JavaScript libraries
      • Components
      • Animation
      • Maps
      • Helpers
      • Presentations
      • Charts
      • Games
      • Audio
      • Images
      • Video
    • Js the right way
  • Angular Grimoire
    • Angular doc
    • Getting Started
    • Angular clean architecture
    • Angular Cheat Sheet
    • TypeScript Cheat Sheet
    • My Favorite Tips and Tricks in Angular
    • NgRx: tips & tricks
    • Bits of code
      • Execute Multiple HTTP Requests in Angular
      • Authentification
        • Angular 8 JWT Authentication with HttpInterceptor and Router
      • Integrations
        • Spring Boot
          • Rest Example
            • Angular,Spring Boot,Spring Data and Rest Example(CRUD)
          • Authentification
            • Angular, Spring Boot: JWT Authentication with Spring Security example
            • Angular Spring Boot Security Oauth2
              • Spring Boot OAUTH2 Role-Based Authorization
              • Spring Boot Security Google Oauth
              • Spring Security OAuth2 User Registration
    • Most used dependency
  • Node Grimoire
    • Express.js 4 Cheatsheet
    • Useful Dependencies
    • How To Use And Write Express Middleware
    • Node.js with SQL databases
      • Node.js Token Based Authentication & Authorization example
      • Node.js Rest APIs example with Express, Sequelize & MySQL
      • Node.js Express & PostgreSQL: CRUD Rest APIs example with Sequelize
      • Sequelize
        • Sequelize Many-to-Many Association example – Node.js & MySQL
        • Sequelize One-to-Many Association example with Node.js & MySQL
    • Node.js with NOSQL databases
      • Node.js + MongoDB: User Authentication & Authorization with JWT
      • Node.js, Express & MongoDb: Build a CRUD Rest Api example
      • MongoDB One-to-One relationship tutorial with Mongoose example
      • MongoDB One-to-Many Relationship tutorial with Mongoose examples
      • MongoDB Many-to-Many Relationship with Mongoose examples
  • Upload files
    • How to upload multiple files in Node.js
    • Upload & resize multiple images in Node.js using Express, Multer, Sharp
    • Upload/store images in MySQL using Node.js, Express & Multer
    • How to upload/store images in MongoDB using Node.js, Express & Multer
  • React Grimoire
    • React Doc
    • React Grimoire
    • React Cheat Sheet
  • spring boot Grimoire
    • Getting started
    • Spring Boot, Spring Data JPA – Rest CRUD API example
    • Spring Boot Token based Authentication with Spring Security & JWT
  • Mongo Grimoire
    • MongoDb-Mongoose Cheat Sheet
  • Development tools
    • Design Patterns
  • maissen_grimoire
Powered by GitBook
On this page
  • What Is The Null Coalesce Operator
  • Using The Null Coalesce Operator With Logical Or/And
  • Browser Support

Was this helpful?

  1. Javascript Grimoire
  2. JavaScript Cheat Sheet

JavaScript Null Coalesce

PreviousJavaScript Optional ChainingNextWhat Are Magic Numbers And Why Are They Bad

Last updated 5 years ago

Was this helpful?

In I talked about optional chaining which is incredibly useful when trying to access methods and properties on potentially null objects. In this article I want to talk about another amazing JavaScript feature for handling null/undefined and that is the null coalesce operator. You are probably familiar with the logical or operator (||) for handling default values.

const tries = options.tries || 10

This code is flawed, though, since if options.tries is 0 then the default value of 10 will be used since 0 is a falsey value. In order to fix this the following code must be used.

const tries = options.tries == null ? 10 : options.tries

This code now will only use the default value if option.tries is null or undefined. The only problem is this code is pretty clunky to write, so that is why the null coalesce operator was created.

What Is The Null Coalesce Operator

The null coalesce operator is a new operator in JavaScript that works very similar to the logical or operator, but it will check for null/undefined instead of falsey.

const tries = options.tries ?? 10

The above code uses the null coalesce operator (??) to check if options.tries is null or undefined. If options.tries is null or undefined then it will evaluate the right side of the operator which is 10 so 10 will be returned. Here are a few examples of the null coalesce operator being used to emphasize how it works.

undefined ?? 10 // Result: 10
null ?? 10      // Result: 10
0 ?? 10         // Result: 0
false ?? 10     // Result: false
'Hi' ?? 10      // Result: Hi
20 ?? 10        // Result: 20

As you can see only the values of null or undefined will cause the right side of the null coalesce operator to be evaluated. Any other value, even if it is falsey, will cause the right side of the operator to never be evaluated or returned. Because of this, the null coalesce operator is incredibly useful when dealing with default values for variables since falsey values like 0 will not be overridden by the default value.

Using The Null Coalesce Operator With Logical Or/And

It is possible to use the null coalesce operator with other logical operators like AND (&&) and OR (||), but parenthesis must be used in order to specify the order in which the logical operators evaluate.

0 || null ?? 10   // Uncaught SyntaxError: Unexpected token '??'
(0 || null) ?? 10 // 10

In the above example when no parenthesis are used an error is thrown since JavaScript is not sure what order to evaluate the operators. In the second example, though, the value 10 is returned since first 0 || null is evaluated which returns null and then null ?? 10 is evaluated which returns 10.

Browser Support

With all great new JavaScript features the biggest thing to worry about is browser support. Unfortunately, the null coalesce operator has very little support outside of the newest browsers. At the time Being the null coalesce operator only has across browsers. Luckily, though, you can still use this operator by using tools like to transpile your JavaScript code so that older browsers can understand it.

last article
48% support
babel