0

I am new to Javascript and want to become familiar with best practice.

Today I came across a new construct that I need the communities help in understanding. The code relies on Jquery. The construct is as follows.

$(function() {

    var data = {
        //
    };

    var cont = {
        //
    init: function(){
        }
    };

    var view = {
    //
    };

cont.init();

}());

My understanding of this is that an IIFE is being passed into the JQuery namespace.

What is confusing me though is that the code only contains 3 literals and no return statement. You see I am looking at this from the point of view of module patterns. In that, a module used in an IIFE would return an object literal containing any intended public functions.

This code does not return an object. Are in fact, the 3 object literals (data,cont,view) simply being added to the JQuery namespace? Yet, another part of me thinks that this would simply return undefined to the JQuery namespace. Please advise.

timebandit
  • 794
  • 2
  • 11
  • 26
  • Actually, your code is confusing. An IIFE is like this `(function () { ... })();`. Now, if you want to run your function with jQuery when DOM is ready, you do this: `$(function () { ... });`. – Frank Fajardo Jul 24 '15 at 21:55
  • 1
    I don't know who voted-down your question, but I gave it a vote up. It was more interesting than I thought, and I learnt from it by reading further. This SO Item seems to also have a wealth of info: http://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript. Cheers – Frank Fajardo Jul 24 '15 at 23:06
  • 1
    I found this a good reference on javascript namespaces: https://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/. I'm also studying (or trying to understand) javascript modules. This is what I'm reading at the moment: http://eloquentjavascript.net/10_modules.html. I've also bookmarked this: http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html. – Frank Fajardo Jul 26 '15 at 23:18
  • 1
    @FrankFajardo heres one for you http://toddmotto.com/mastering-the-module-pattern – timebandit Jul 27 '15 at 08:09

2 Answers2

0

My understanding of this is that an IIFE is being passed into the JQuery namespace.

No.

The IIFE executes and returns undefined (since it has no return statement).

$ is called and the undefined is passed to it. The return value of $ is then discarded because the code doesn't do anything with it.

The call to $ is pointless here. All the interesting stuff happens inside the IIFE (when cont.init() is called).

Frank Fajardo
  • 7,034
  • 1
  • 29
  • 47
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • @ImranNazir, the shortcut for `$(document).ready(function () {...})` is `$(function () {..})` – Frank Fajardo Jul 24 '15 at 22:00
  • 1
    @ImranNazir — No. `$()` does a lot of different things depending on what you pass to it. Passing it `undefined` doesn't do anything useful. It is the short form of `$(document).ready` only if you pass it a function, which this code doesn't. – Quentin Jul 24 '15 at 22:38
  • @Quentin, ok so it passes in undefined but maybe it could be seen as as a way of executing code within the JQR namespace and hence keeping it away from the global namespace – timebandit Jul 25 '15 at 13:44
  • "executing code within the JQR namespace" — No. You can't execute code "within a namespace". JavaScript doesn't have namespaces per se. A namespace in JavaScript is an object of (an object n times) of a global variable with a name used by a collection of related code (so you have `ME.foo` and `ME.bar` and `ME` is a global instead of having `foo` and `bar` as TWO globals). This doesn't go anywhere near that, it just calls the jQuery function and passes it nothing. The IIFE avoids creating globals just by being an IIFE. Passing its return value to the jQuery function does nothing useful. – Quentin Jul 25 '15 at 20:34
-2

UPDATE

Please ignore my answer. My understanding of the code was wrong.

Your code does not make sense and I do not think it executes anything. It is not an IIFE. Here's more info on Immediately-Invoked Function Expression. An IIFE has nothing to do with jQuery. It is a Javascript way of defining a function and also run it right away.

If you do something like this, then it is an IIFE, and it will show the alert right away. This does not need jQuery.

(function() {
    var cont = {
       init: function () { 
               alert('test');
             }
       };
    cont.init();
})();

What this code does is it defines an anonymous function that has a cont object. Within cont it defines an init object which is set to another anonymous function. By doing cont.init(), you are invoking the function that init has.

The closure---that is, the ( and )---around your your main function--defines it. And the () that comes after that invokes that function.

Frank Fajardo
  • 7,034
  • 1
  • 29
  • 47
  • 1
    "It is not an IIFE." — Yes, it is. It starts with `function() {` and ends with `}()` (and it is in expression context so it doesn't error because you can't follow a function *declaration* with `()`). – Quentin Jul 24 '15 at 22:39
  • 1
    "An IIFE has nothing to do with jQuery" — It doesn't, which is why the question was asking why one was being used between `$(` and `)`. – Quentin Jul 24 '15 at 22:40
  • 1
    "The closure---that is, the ( and )" — That isn't a closure. The `(` and `)` in this case are the parens that call the `$` function. You get a closure when you return a function from another function and access variables in the scope of the outer function from inside the returned function. – Quentin Jul 24 '15 at 22:40
  • 1
    @Quentin, if he defined an IIFE, why doesn't it execute the cont.init() correctly? And how do you define a closure? – Frank Fajardo Jul 24 '15 at 22:42
  • 1
    Who says it doesn't execute `cont.init()` correctly? You define a closure by return a function from another function and accessing variables in the scope of the outer function from inside the returned function. – Quentin Jul 24 '15 at 22:44
  • What is your objection to this statement "An IIFE has nothing to do with jQuery"? Isn't is valid to clarify it ? – Frank Fajardo Jul 24 '15 at 22:44
  • So you are saying my definition of closure is wrong? – Frank Fajardo Jul 24 '15 at 22:48
  • 1
    Your definition of closure is wrong. Your claim that there isn't an IIFE in the original question is wrong. Your description of what the `()` do is wrong (although I previously thought you were talking about the ones in the question, the ones in your example create an expression context to make the function keyword start a function expression instead of a function declaration). – Quentin Jul 24 '15 at 22:52
  • It starts with `function() {` and ends with `}()` – Quentin Jul 24 '15 at 22:59
  • @Quentin kudos to you for your grasp of basic JS design patterns! As stated, I came across this code, it has been written by someone who teaches JS design patterns and I am commenting the code as I go along and as I understand it. So my assumption is that there must be a good reason for this pattern. My gut feeling was that it was simply introducing some objects into the JQR namespace as a way of not polluting the global namespace. – timebandit Jul 25 '15 at 13:40