Null Conditional Operators

Question

C# 6.0 has just been released and has a new nice little feature that I'd really like to use in JavaScript. They're called Null-conditional operators. These use a ?. or ?[] syntax.

What these do is essentially allow you to check that the object you've got isn't null, before trying to access a property. If the object is null, then you'll get null as the result of your property access instead.

int? length = customers?.Length; 

So here int can be null, and will take that value if customers is null. What is even better is that you can chain these:

int? length = customers?.orders?.Length; 

I don't believe we can do this in JavaScript, but I'm wondering what's the neatest way of doing something similar. Generally I find chaining if blocks difficult to read:

var length = null; if(customers && customers.orders) {     length = customers.orders.length; } 

Answer 1

Called "optional chaining", it's currently a TC39 proposal in Stage 4. A Babel plugin however is already available in v7.

Example usage:

const obj = {   foo: {     bar: {       baz: 42,     },   }, };  const baz = obj?.foo?.bar?.baz; // 42  const safe = obj?.qux?.baz; // undefined 

Answer 2

Js logical operators return not true or false, but truly or falsy value itself. For example in expression x && y, if x is falsy, then it will be returned, otherwise y will be returned. So the truth table for operator is correct.

In your case you could use expression customers && customers.orders && customers.orders.Length to get length value or the first falsy one.

Also you can do some magic like ((customers || {}).orders || {}).length (Personally, I don't like this syntax and possible garbage collection pressure as well)

Or even use maybe monad.

function Option(value) {     this.value = value;     this.hasValue = !!value; }  Option.prototype.map = function(s) {     return this.hasValue         ? new Option(this.value[s])         : this; }  Option.prototype.valueOrNull = function() {     return this.hasValue ? this.value : null; }  var length =      new Option(customers)         .map("orders")         .map("length")         .valueOrNull(); 

It's longer than all the previous approaches, but clearly shows your intentions without any magic behind.