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?

Solution 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";.

Solution 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?

Solution 3

Got the error (in the function init) with the following code ;

"use strict" ;

var hdr ;

function init(){ // called on load
    hdr = document.getElementById("hdr");
}

... while using the stock browser on a Samsung galaxy Fame ( crap phone which makes it a good tester ) - userAgent ; Mozilla/5.0 (Linux; U; Android 4.1.2; en-gb; GT-S6810P Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

The same code works everywhere else I tried including the stock browser on an older HTC phone - userAgent ; Mozilla/5.0 (Linux; U; Android 2.3.5; en-gb; HTC_WildfireS_A510e Build/GRJ90) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

The fix for this was to change

var hdr ;

to

var hdr = null ;

Comments

[Andrew Liu]

Hi McGarnagle it solves the problem! Thanks vary much. But what is the difference between with or without var

[go-oleg]

@LionLiu: With var, its local to the function its declared in. Without var, its global.

[codingbbq]

Hi @McGarnagle, I had declared the var a = 0 inside my jquery ready function, and was calling a function with this variable as parameter from onsubmit of form, but still i was getting reference error, if the variable was global, it should have worked as parameter to that function but it did not work, I just wanted to know the exact reason if in case you know. Thank you for your time.

[McGarnagle]

@noobcode it's hard to say. I suggest putting together a short example (or better yet a working Fiddle) that illustrates the problem.

[Michał Perłakowski]

You should declare this variable with var keyword somewhere in global scope, because otherwise you are assigning value to undefined variable. This is bad coding practice and will not work in strict mode.