ReferenceError: variable is not defined

Question

I met this issue sometimes but still don't know what causes it.

I have this script in the page:

$(function(){     var value = "10"; }); 

But the browser says "ReferenceError: value is not defined". However if I go to the browser console and input either

10 

or

var value = "10"; 

either of them can return 10. What is the problem with my script?

Answer 1

It's declared inside a closure, which means it can only be accessed there. If you want a variable accessible globally, you can remove the var:

$(function(){     value = "10"; }); value; // "10" 

This is equivalent to writing window.value = "10";.

Answer 2

Variables are available only in the scope you defined them. If you define a variable inside a function, you won't be able to access it outside of it.

Define variable with var outside the function (and of course before it) and then assign 10 to it inside function:

var value; $(function() {   value = "10"; }); console.log(value); // 10 

Note that you shouldn't omit the first line in this code (var value;), because otherwise you are assigning value to undefined variable. This is bad coding practice and will not work in strict mode. Defining a variable (var variable;) and assigning value to a variable (variable = value;) are two different things. You can't assign value to variable that you haven't defined.

It might be irrelevant here, but $(function() {}) is a shortcut for $(document).ready(function() {}), which executes a function as soon as document is loaded. If you want to execute something immediately, you don't need it, otherwise beware that if you run it before DOM has loaded, value will be undefined until it has loaded, so console.log(value); placed right after $(function() {}) will return undefined. In other words, it would execute in following order:

var value; console.log(value); value = "10"; 

See also:

• What is the scope of variables in JavaScript?
• I've Heard Global Variables Are Bad, What Alternative Solution Should I Use?