Null Coalescing Operator in JavaScript

A question I stumbled across the other day was whether there is a null coalescing operator in JavaScript. The answer to this question is no, but it’s not quite as simple as that, which is why I thought I would write a blog post on the topic.

Firstly, some of you may be wondering what a null coalescing operator is. In C# you can do the following:

The  ?? is the null coalescing operator. The statement above would assign the value of  myVar to  someString unless  someString was null, where it would instead assign it to  "someString was null" . From this example, you can see that the null coalescing operator is a way to handle nulls, and assign a default value instead of null.

As I said earlier, there is no null coalescing operator in JavaScript. However we can mimic the behaviour, but not exactly. As JavaScript uses “truthy and falsey” values, null  evaluates to false, and so we can use the logical or operator ( || ) to mimic the behaviour of the null coalescing operator. So in JavaScript, our example above becomes:

However, the story continues. “Falsey” values do not stop with  null . Anything that evaluates to false in JavaScript would be set to  "someString was null" . This includes:

  • undefined
  • null
  • 0
  • ""

So, when using this, you have to be aware if you use this that it will also use the default value if your variable is set to 0 or an empty string.

However this isn’t the interesting point in the subject as far as I am concerned. We are actually performing a logical operation, so you might expect the value returned to be either true or false. So what this highlights is how JavaScript evaluates boolean operations. What actually happens with the logical or operator is it returns the first value that evaluates to true when treated as a boolean. So rather than returning a boolean, it could return any value.

This led me to another question. What happens with logical and ( && )? Now this is quite interesting. Logical and actually returns the first value that evaluates to false when treated as a boolean, or the last value if there are no false values. When you think about this, it is actually what you would expect. When evaluating a statement from left to right, if a value that is “falsey” is hit, then the statement should return false, so we can return that value. If no “falsey” values are found, then the statement should return true, and we can therefore return the last value which will be “truthy”. So for a quick example:

So where might you want to use this? Well the logical or is used quite often to provide default values in functions, if a value is not provided. For example:

Simply, this function handles the case of 0 being entered, or nothing being entered. Both  someFunc(0) and  someFunc() return 10.

Logical and was just a bit of fun. I can’t think of a reason I would want to use this (unless I wanted to limit an input to a “falsey” value). I welcome any ideas of how you could use logical and in this context.

UPDATE 25th April 2013: I was watching one of the excellent Jump Start videos with Jeremy Foster and Michael Palermo from Microsoft Virtual Academy, and I came across a use for && . If we have a function that might or might not be defined, then we can use this to only call the function if it is defined. For example:

The above will stop executing the line as soon as one of the values is undefined. So if console, or console.log is undefined, we don’t execute the function. However if the function does exist, we can then call our function. You can see the video where I came across this from here: http://www.microsoftvirtualacademy.com/Content/ViewContent.aspx?et=2524&m=2523&ct=15741 (The video is talking about Windows 8 development, the use of  && is at around 28 minutes).

Leave a Reply