Quick Object Return - or how to return object literals from arrow functions?

Quick object return is maybe a not-so-well-known feature, because you don't see it that often. And it's not a new feature, it's been around since years. So this post is just a little reminder for myself and for you as well.

Do you often have code like this:

someObservable
    .map(stuff => {
        return {
            otherProp: stuff.foo.bar
        };
    });

Of course, it doesn't need to be an observable. And you wrap your head around, thinking, why it can't be written like this:

someObservable.map(stuff => { otherProp: stuff.foo.bar });

Pretty sure you know it. The thing is, that the braces are not parsed into an object literal but into a block statement. Within the code black, the JavaScript parser finds a [label] which belongs to our stuff.foo.bar. And yes, label, like in jumping around with continue or break statements. :-O Since we are not returning anything, undefined will be the result. Not a thing, we want to have here.

What we need to do, is to wrap our object literal in parentheses. By ECMAStandard, when the parser encounters parentheses, an expression will follow, in this case, our object literal.

Geek part: You can find this here. The important line is the syntax of the arrow function itself, which is - in easy words: ArrowParameters => ConciseBody with having ConciseBody of

ConciseBody:
   [ lookahead != { ] AssignmentExpression
   [ else ] { FunctionBody }

So, if the parser encounters an arrow, it will perform a lookahead. If the lookahead results in a non curly brace, it will treat it as an expression, otherwise as a function body.

Having that knowledge, we can write our statements as follows:

someObservable.map(stuff => ({ otherProp: stuff.foo.bar }));

// Works also with arrays:
someObservable.map(stuff => [{ otherProp: stuff.foo.bar }]);

Hurray!