What are the outer parentheses in Lightning controllers?

Question

In every Lightning controller you have these outer parentheses wrapping the actual object:

({
    getInput : function(cmp, evt) {
        var myName = cmp.find("name").get("v.value");
        var myText = cmp.find("outName");
        var greet = "Hi, " + myName;
        myText.set("v.value", greet);
    }
})

So okay - this is making it an expression but what's the point? Somebody claimed that this is an IIFE but I don't think so, even though "normal" JavaScript libraries are doing it with an IIFE like this:

({
    ...
})();

Why is it wrapped in parentheses but missing the following parentheses, making it an IIFE? Why is it different to "normal" JavaScript libraries? What am I missing here?

I'm not doing JavaScript all day, so it's probably just something simple that I miss. I hope somebody can explain this.

Answer 1

This choice was made for two reasons.

1. We parse the Controller and Helper on the server to validate them. There are many different Java Parsers of JSON we could use, but regardless which we choose we wanted to be consistent with the client. Which wants Objects wrapped in parentheses JSON.parse("({})") vs JSON.parse("{}").

2. Some editors will complain that what you're writing is not valid JSON and thus show syntax errors if you do not wrap it in ()

This decision was made many years ago (8ish), but I'm pretty sure #2 was the primary reason.

Answer 2

The various parts - controllers, helpers and the XML components themselves - are all assembled into a valid single JavaScript file that represents the component. So the pieces you edit are in a somewhat arbitrary format before that conversion. But it's a pity the JavaScript files are not valid JavaScript and so tools like http://jshint.com complain a bit.

If you use your browser's "Sources" tab in its "Developer Tools" you will be able to see the resulting JavaScript. (There are also libraries that contain common pieces of logic used by multiple framework components.)

(The expected syntax definition can probably be found somewhere in this open source forcedotcom/aura Java code.)

This process is one reason to not be too concerned about the cost of components versus the cost of raw HTML in a component. Both end up as chunks of JSON in the single JavaScript file and so have to be processed to generate corresponding DOM nodes.

Answer 3

This is how I understand it going through the documentation. The Lightning framework Client-Side Controller's documentation mentions as below:

A client-side controller is a JavaScript object in object-literal notation containing a map of name-value pairs. Each name corresponds to a client-side action. Its value is the function code associated with the action. Client-side controllers are surrounded by parentheses and curly braces. Separate action handlers with commas (as you would with any JavaScript map).

So this corresponds to a JS object as specified above. Now if you see the Javascript object's definition here, it mentions as below:

Objects can be initialized using new Object(), Object.create(), or using the literal notation (initializer notation). An object initializer is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}).

And as for for parenthesis itself, as the documentation mentions that the complete JS is surrounded by paranthesis, I would assume (not completely sure) if that's something that the framework does to group the "controller functions".