The Nullish Coalescing Operator For JavaScript

Having no legal or binding force; invalid.

When processing data, it’s important to have predictability. The specification of programming languages is typically thorough and efficient; often taken for granted while being used. How exactly is your computer working to show you the internet, and how does the internet work??? Despite the technological guts of a programming language, certain data can’t be predicted, especially considering the common transfer of data between systems, servers, and, browsers. Those unpredictable little nuggets of data, can easily produce bugs in a program.

Programmers strive to not have bugs in their programs. JavaScript especially has a lot of bug-prone peculiarities that are still being addressed, resolved, and updated. A new tool for JavaScript is the Nullish coalescing operator, which provides a more explicit way to work with default values.

There are often cases when a variable needs to be passed through a function, but there needs to be a default value assigned to the variable in the event that the program initially provides a falsy value. Traditionally, this was often achieved with a Logical OR operator (||), which evaluates two operands, returns the first operand if it is truthy, and otherwise, if the first operand is falsy, returns the second operand. For example:

let value = 'Liar Liar'
console.log(value || 'Ace Ventura: Pet Detective')
//=> Liar Liar
// value is truthy, so the first operand is printed
////////////////////////////////////////////////////////////////////
let value
console.log(value || 'The Mask')
//=> The Mask
// value is falsy, because it is undefined
// so the second operand is printed

That’s fine and well, but some unexpected results can occur if you intend to use a falsy value.

let brainCells = 0
let lloyd = 'Lloyd Christmas'
function cellCount(name, brainCells) {
  console.log(`${lloyd} has ${brainCells || 'no'} brain cells.`)
}
cellCount(lloyd, brainCells)
//=> Lloyd Christmas has no brain cells.

While the printout is still factual, the intended result was Lloyd Christmas has 0 brain cells. Although the number 0 was meant to display, the Logical OR operator considered it to be falsy, and offered the default value of no. Enter the Nullish coalescing operator, represented syntactically as ??, which behaves the same as the Logical OR operator, except that it will only consider the first operand as falsy if it evaluates to null or undefined.

let brainCells = 0
let harry = 'Harry Dunne'
function cellCount(name, brainCells) {
  console.log(`${harry} has ${brainCells ?? 'no'} brain cells.`)
}
cellCount(harry, brainCells)
//=> Harry Dunne has 0 brain cells.

In Harry’s case, the Nullish coalescing operator printed the 0 as intended because, although 0 is a falsy value, it was not explicitly null or undefined. So, I guess Harry is slightly smarter. Ever so slightly…

Get Dan Romans’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The Nullish coalescing operator can be quite useful when accessing the properties of an Object. This is done very often, and with unpredictable data, too. A real world application would be accessing the properties of an Object constructed from a JSON response. Perhaps a program is fetching data from an API, and the property values should be specific to source except only if null or undefined. Here’s a crude example:

const response = {
  data: {
    name: 'Fletcher Reede',
    occupation: null,
    gags: 'The Claw',
    lies: 0
  }
}
const name = response.data.name ?? 'No name'
const job = response.data.occupation ?? 'Lawyer'
const gags = response.data.gags ?? 'Lying'
const lies = response.data.lies ?? 'Too many to count'
console.log(name)
console.log(job)
console.log(gags)
console.log(lies)
//=>
  Fletcher Reede
  Lawyer
  The Claw
  0

Of all the new updates and advancements of ECMAScript (JavaScript), the Nullish coalescing operator may seem a bit simple and invaluable, but it’s actually a great addition to the programmer’s toolbox. Any line of code that can be optimized and enhanced to be more explicit will work a long way towards clean, efficient, predictable code. Work comes easily to a true craftsman because they always use the right tool for the job.

github.com/dangrammer
linked.com/in/danieljromans
danromans.com