Microsoft Most Valuable Professional

Chris Pietschmann

An MVP From Wisconsin



JavaScript: Null Coalesce using the || Operator

I recently purchased "JavaScript: The Good Parts" by Douglas Crockford, and I found this little gem on page 21, although he listed in in the section Objects - Retrieval.

It is possible to use Null Coalescing in JavaScript by using the || operator!

// Note: only this code example is quoted from the book
var middle = stooge["middle-name"] || "(none)";
var status = flight.status || "unknown";

Since JavaScript returns a boolean value of true when your looking at a variable that is not set to null or undefined, you can use the || (or) operator to do null coalescing. Basically, as long as the first value is not null or undefined it's returned, otherwise the second value is returned. This really simplifies the process of getting object property values when you need to use a default value if it's not set yet, and keeps you from needing to use an if statement.

Below is an example of what I used to do Previous to learning this trick:

var middle = (stooge["middle-name"] != null ? stoog["middle-name"] : "(none)");
var status = (flight.status != null ? flight.status : "unknown");

This new trick makes the code much easier to read, and checks for undefined also so I no longer need to worry about the value being equal to undefined in some rare circumstance.

 

Reference:
JavaScript: The Good Parts by Douglas Crockford. Copyright 2008 Yahoo! inc., 978-0-596-51774-8.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Categories: JavaScript
Posted by crpietschmann on Tuesday, October 14, 2008 9:00 AM
Permalink | Comments (3) | Post RSSRSS comment feed

Related posts

Comments

Richard gb

Wednesday, November 05, 2008 1:38 PM

Richard

I am a little confused by this, why doesn't it return true?

I was under the impression that a boolean expression returned a boolean result, not one of its operands.

Rich

Chris Pietschmann

Thursday, November 13, 2008 1:43 AM

Chris Pietschmann

The reason it works this way is because "null" and "undefined" both equate to "false", and an "object" value equate to "true". So when it's "true" it returns the value, otherwise it evaluates the OR ("||") option.

Richard gb

Thursday, November 13, 2008 11:29 AM

Richard

I understand that much, but thought a boolean operator returned a boolean value, as I said above, not an operand.

But if that's the logic, surely 0 and '' also return false? So there are flaws to the "Coalesce" use anyway

Add comment


(Will show your Gravatar icon)  

  Country flag

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



Live preview

Tuesday, January 06, 2009 6:26 AM

About the author

I'm Chris Pietschmann, go to the About Me page to learn more about me.

Search

Sponsors

Web.Maps.VE - ASP.NET AJAX Virtual Earth Mapping Server Control

Recent comments

Disclaimer


This work is licensed under a Creative Commons Attribution 3.0 United States License, unless explicitly stated otherwise within the posted content.
© Copyright 2004 - 2009 Chris Pietschmann