'Variable' was used before it was defined

Question

I am checking if a variable is defined or not, and if it is not defined explicitly I am going to define it by doing:

if ( typeof(aVariable) == 'undefined' ) {
  var aVariable = value;
}

Because the variable is not defined JSLint warns that it is used before it is defined, and that is exactly what I want.

How can I overcome this?

I want to enable defining those variables explicitly doing this:

<script>
  var aVariable = value;
</script>
<script src="myScript.js"></script>

So everyone who is going to include this script can customize some of the properties. And I am afraid I cannot change this logic because it is already being used in hundred of web sites this way.

Scroll down for the answers/solutions, because I have answered my own question Stack Overflow does not show it up. Be sure not to miss them.

Answer 1

I think what JSLint is telling you is that you shouldn't use variables before they are defined. If you are happy that it is appropriate in your scenario - you can ignore that warning. If you aren't absolutely sure, have another think about why this variable isn't defined yet.

For example, do you really want to test if aVariable has a value set, rather than is or isn't defined?

var aVariable = null;

... (sometime later)

if (aVariable == null) {
  aVariable = value;
}

Answer 2

I found more acceptable answers in JSLint mailing list, sorry about that Boldewyn :)

Solution 1

In IE, at a script level (i.e. per file, or per script block), if it sees a "var" declaration during its parse phase (before execution), it will reset the value of that variable if it already existed.

So better would be to simply do this:

/*global foo: true */
if (typeof foo === "undefined") {
foo = "some value";
}

By not declaring "var" and simply assigning foo, foo will automatically get global scope.

Solution 2 (special case)

If explicitly set variable is not zero or false

var foo = foo || "some value";

Answer 3

You could make the variable (it's global anyway) an explicit member of window:

window.aVariable = 'default';

and later

if (! ('aVariable' in window)) {
    window.aVariable = 'new value';
}

If you don't want or cannot change the code, then I'd suggest the pragmatic ansatz and to ignore JSLint's complaints, since your code will work anyways (that is, as long as you don't enable ECMAScript 5's strict mode...).

Answer 4

Try this:

aVariable = null;

aVariable = typeof(aVariable) == 'undefined' ? null : value;

Answer 5

Easiest to declare your variables before you make any use of them:

var aVariable;

This will be initialized with type "undefined", so the undefined test will still work:

if (typeof aVariable == "undefined") {
    aVariable = value;
}

Answer 6

That error seems to be triggered when you use camel casing for your variable name. If you start the variable with a capital letter (Variable) or make it all lower case (variable), you just get the "implied global" error.

I'm not sure what it's trying to suggest by enforcing casing on your variable name, though you always have to take JSLint with a grain of salt. What you're doing here is perfectly valid and a good practice to avoid accidentally using undefined variables.