namespaces - How to return object literal in JavaScript - Stack Overflow

admin管理员组

文章数量:1379790

I'm trying to wrap a JavaScript object literal in a self executing anonymous function. The first code example below works fine, but the second doesn't and I'm not really sure why?

Works:

(function(){
    return MyApp = {
        init: function() {
            console.log('MyApp init');
        }
    }
})();

Doesn't Work:

(function(){
    var MyApp = {
        init: function() {
            console.log('MyApp init');
        }
    }
    return MyApp;
})();

As I understand things, the SEAF should execute and immediately return. That's why the first example returns MyApp as an object I can interact with. I thought assigning MyApp to a variable inside the SEAF and then returning it would do the same thing but in:

Uncaught ReferenceError: MyApp is not defined

Why?

I'm trying to wrap a JavaScript object literal in a self executing anonymous function. The first code example below works fine, but the second doesn't and I'm not really sure why?

Works:

(function(){
    return MyApp = {
        init: function() {
            console.log('MyApp init');
        }
    }
})();

Doesn't Work:

(function(){
    var MyApp = {
        init: function() {
            console.log('MyApp init');
        }
    }
    return MyApp;
})();

As I understand things, the SEAF should execute and immediately return. That's why the first example returns MyApp as an object I can interact with. I thought assigning MyApp to a variable inside the SEAF and then returning it would do the same thing but in:

Uncaught ReferenceError: MyApp is not defined

Why?

• javascript
• namespaces
• object-literal

Share Improve this question Follow edited Apr 16, 2023 at 17:31 Peter Mortensen 31.6k2222 gold badges110110 silver badges133133 bronze badges asked Oct 17, 2013 at 21:09 IainIain 1,73466 gold badges2424 silver badges3939 bronze badges 5

• 2 In your first example you are assigning the result to the global variable named 'MyApp'. In the second case you are assigning the variable to a closure local variable named 'MyApp'. You have to assign the result of the closure execution somewhere, otherwise it gets lost. – Mike Edwards Commented Oct 17, 2013 at 21:11
• 2 Your code works just fine assuming you catch the return values. – zzzzBov Commented Oct 17, 2013 at 21:11
• As zzzzBov points out, it works just fine if you put var someName = (theClosureExecution) – Mike Edwards Commented Oct 17, 2013 at 21:12
• What is "SEAF"? "IIFE"? – Peter Mortensen Commented Apr 16, 2023 at 17:37
• OK, SEAF is probably self-executing anonymous function. – Peter Mortensen Commented Apr 16, 2023 at 17:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Since the result of your SEAF (better named IIFE) is not used anywhere. It doesn't really matter what the function returns. Now pare

(function(){
    MyApp = {…}
})();

with

(function(){
    var MyApp = {…}
})();

The difference is that in the second function your variable is preceded by a var keyword which makes it local to the IEFE, while in the first function it is an implicit global (which you should avoid). That way, the second snippet doesn't assign to anything in the global scope, and accessing MyApp later from outside will fail with the error.

Better return some value that you then assign to a globally declared variable:

var MyApp = (function(){
    return {…};
})();

What your first example is doing is setting MyApp as a global variable - since the variable MyApp is not preceded by a var keyword or dot notation, it bees global. It sounds like that's not actually an issue for you if you're putting MyApp in a self-executing function - you can really just remove the return statement from it - or even define other globals in the same function. You don't ever reference the result of your top-level function, so there's no use of that return.

Your second example sets MyApp as a local variable using var, so it's visible only inside of the context of the function that's running it.

Solution using arrow functions:

var myApp = (() => {
    return {
        init: () => console.log('MyApp init')
    };    
})();
myApp.init();

---

Explanation:

• The global variable myApp is set to the result of an IIFE (Immediately-invoked Function Expression).
• init can also be written as an arrow function.
• If no other logic is performed in an arrow function before the return statement, and it returns an object literal, it can be further simplified. To return an object literal from an arrow function, wrap it in parentheses:

---

var myApp = (
   () => ({
       init: () => console.log('MyApp init')
   })
)();

本文标签： namespacesHow to return object literal in JavaScriptStack Overflow