Variable shadowing and testing for existence before assignment in javascript

Question

In the following code snippet I declare a global variable and then check for its presence inside a function.

<script>
x = 5;
$(function() {
   var x = x || 3;
   console.log(x); // prints 3
});
</script>

This behaves differently:

<script>
x = 5;
$(function() {
   var y = x || 3;
   console.log(y); // prints 5
});
</script>

I expect that in the first example, the variable declaration in the inner scope will detect that x already exists in the global scope, and take its value. Why does the first example 3?

Specifically I recently wrote some code that checks var _gaq = _gaq || [] in a jQuery ready scope and was confused when nothing was getting pubbed to Analytics.

zzzzBov · Accepted Answer · 2012-07-16 19:41:35Z

3

You're looking for x in the wrong scope. Due to variable hoisting, var x has actually defined a local x variable with a value of undefined before your x || 3 check happens:

var x = x || 3;

is actually:

var x = undefined;
x = x || 3;

Simply change it to look for x on the window object:

var x = window.x || 3;

answered Jul 16, 2012 at 19:41

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zzzzBov Over a year ago

I should also mention that it's for this reason that I separate my variable initialization from assignment. I know that it's a little verbose to write var foo; foo = bar;, but it makes this particular issue stand out more noticeably.

abhshkdz · Accepted Answer · 2012-07-16 19:55:05Z

The first example logs 3 because any variable that is initialized inside a function using the var keyword will have a local scope. If a variable is initialized inside a function without var, it will have a global scope.

So in the first case, when the local x is assigned, since it is uninitialized, it gets assigned 3.

While in the second case, x refers to the global variable x as there is no declaration of x inside the function.

Instead, if you try this

<script>
x = 5;
$(function() {
   x = x || 3;
   console.log(x);
});
</script>

OR

<script>
x = 5;
$(function() {
   var x = window.x || 3;
   console.log(x);
});
</script>

you will get the expected result 5.

Additionally, unlike C and its family (which has block-level scope), JavaScript has function-level scope. Blocks, such as if statements, do not create a new scope. Only functions create a new scope.

So if I were to write something like

#include <stdio.h>
int main() {
    int x = 1;
    printf("%d, ", x); // 1
    if (1) {
        int x = 2;
        printf("%d, ", x); // 2
    }
    printf("%d\n", x); // 1
}

OUTPUT: 1,2,1

as compared to

var x = 1;
console.log(x); // 1
if (true) {
    var x = 2;
    console.log(x); // 2
}
console.log(x); // 2

OUTPUT: 1,2,2

Go through this excellent blog post on JavaScript Scoping and Hoisting to understand it better.

Musa · Accepted Answer · 2012-07-16 19:38:56Z

0

The var x in the function declares x to be local to the function, so in x || 3 x not the global x and thus is undefined since it hasn't been initialized.

In var y = x || 3; x is the global x as there is no x local the function.

answered Jul 16, 2012 at 19:38

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Collectives™ on Stack Overflow

Variable shadowing and testing for existence before assignment in javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related