14

I'm trying to figure out how can I get variables from the outside in a function, inside a function in jQuery but i get Uncaught ReferenceError: myvar is not defined. Is there any way of doing this?

A simple example of my code:

$(function(){
    var myvar = "stackoverflow";
});

$(function(){
    alert(myvar);
});

But when I define the variable outside the function it works:

var myvar = "stackoverflow";

$(function(){
    alert(myvar);
});

Why?

Any help is appreciated! Thank you!

Mustapha Aoussar
  • 5,833
  • 15
  • 62
  • 107
  • 1
    thats the way it works . read http://stackoverflow.com/questions/500431/javascript-variable-scope – Sarath Jan 30 '14 at 09:54
  • Yep, read about JS scope. – enguerranws Jan 30 '14 at 09:55
  • Functions create scope. Variables declared with `var` are *local* to that function and cannot be accessed outside of it. The variable even only exist an the moment the code runs (assuming no closures). – Felix Kling Jan 30 '14 at 09:56

4 Answers4

14

Its all about scoping, in your second example myvar is in the global scope whereas in the first its contained in the function.

You can force it to be global though:

$(function(){
  window.myvar = "stackoverflow";
});

$(function(){
  alert(myvar);
});

(assuming this is in the browser)

Chris Charles
  • 4,406
  • 17
  • 31
10

The reason the second example works is because you're defining myvar as a global variable (which is accessible from anywhere).

The first example doesn't work because the variable is defined within functional scope (meaning it's inaccessible from all except that function's scope, and the scope of functions defined within that parent function's scope).

As stated in the comments, this is just how JavaScript works. If this is a problem you're running into then it's probably time to rethink your architecture.

One common pattern is to define shared variables as properties of parent objects or functions. For example:

$(function() {
    var funcOne = function() {
        this.sharedVal = 'stack overflow';
    };
    var funcTwo = function() {
        console.log(funcOne.sharedVal);
    };
});

This way you can have distinct functions that are able to share their properties from within other within other functions, whilst also keeping the global namespace clean. Note, however, that in this example, a simple var x = 'something'; which isn't bound as a property of another function would do just as well.

monners
  • 5,174
  • 2
  • 28
  • 47
4

The is due to scope of variable. Variable defined in $(function() has scope inside the this function. The enclusre here descide the scope. The variable defined outside function have global scope and defined in window object.

Scope inside function.

$(function(){
    var myvar = "stackoverflow";
});
// myvar is not accessible here.

Scope inside window object.

$(function(){
    window.myvar = "stackoverflow";
});

// myvar is accessible here.
Adil
  • 146,340
  • 25
  • 209
  • 204
1

When you declare the variable inside function .It has its scope limited to that function only(In case one of your scenario).

To access them everywhere outside function you need to declare it as global variable. Which is second case.

Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125