JavaScript & self executing functions

Question

I'm trying to understand (probably simple concepts) about JS, and I've put together the below piece of code to explain what I don't get. What I do not understand is where the name variable is stored. Is that variable now global?

(function($) {
 var name = '';
 $.helloWorld = function(yourName) {
 name = yourName;
 console.log("Hello " + yourName);
 }
}(jQuery));

• elclanrs: The variable is scoped to that closure, that's the point of IIFEs, to encapsulate code and not leak variables to the outer scope.
• dumbass: This question is similar to: What is the scope of variables in JavaScript?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.

Answer 1

The name variable is local to the outer function, because it's declared with the var keyword. The inner function is a closure that contains a reference to that variable. Here's a better example that shows this off:

(function($) {
 var name = '';
 $.setName = function(newName) {
 name = newName;
 }
 $.showName = function() {
 console.log("Name is: " + name);
}(jQuery));

After defining this, you can do:

$.setName("Larry");
$.showName();
$.setName("Fred");
$.showName();

See How do JavaScript closures work?

• sbrattla: Thanks, but how do I access the name variable from the helloWorld function? Is there some way à la Java's this keyword?
• jahroy: You would access it by referring to it by name (just like any other variable). You could have your helloWorld function print its value like this: alert(name);
• sbrattla: Alright, so I should also avoid using inner function argument names which conflicts with outer function variable names since I can't really distinguish them from each other like you can with Java?
• Barmar: Yes. These are just nested function scopes, not objects.
• sbrattla: Alright, thanks! Marking this one as the right answer as it was both the first answer and apparently a correct answer :-)

Answer 2

This should help you understand:

(function(){
 var name;
 var scope1;
 // Here you can use scope1 and name
 (function(){
 var name; // <------------------------
 var scope2; // |
 // |
 // Here you can use scope1,scope2, and name
 (function(){
 var name; // <------------------------------
 var scope3; // |
 // |
 // Here you can use scope1,scope2,scope3, and name
 })();
 })();
})();
// Any\variable declared outside of any function scope is in the global scope.
// A variable declared here can be accessed by window.name from any scope
var name = 5;

So in this snippet, 3 scopes are created by the three functions and in the innermost you can access the variables that have unique names (scope1,scope2, and scope3) as well as the local variable name, which is a separate name from the one it the middle scope. Reusing variable names like that to prevent access to the variable in an outer scope is called shadowing.

Note that a variable that is not declared with the var keyword is auotmatically assumed to be in the global scope. It is a bad practice to declare many variables in the global scope as they can easily conflict with other scripts.

• sbrattla: Thanks for fleshing it out a little. Upvoting your effort!