CODEWITHSUNDEEP
javascriptvar
Michael Lewis
Michael Lewis

Reputation: 4302

JavaScript var keyword: redefining a variable's value inside a closure

What am I missing here? This behaves as expected:

var x = 1;
(function(){
   // x === 1
})();

But,

var x = 1;
(function(){
   var x = x;
   // x is undefined
})();

I would think that x should be 1. It seems as though the var x = x nukes the value of x before it is assigned. Is this a bug? This doesn't seem very intuitive.

Was this behavior changed? I remember doing something like this in the past.

For reference:

var x = 1;
(function(){
    var y = x;
    // y === 1
})();

And:

var x = 1;
(function(){
    x = x;
    // x === 1
})();

Upvotes: 2

Views: 167

Answers (5)

Dmitry Poroh
Dmitry Poroh

Reputation: 3825

In JavaScript all variables declared in global scope or in scope of whole function where it declared. Consider example:

var x = 1;

function f()
{
    console.log(x);
    if (true) {
        var x;
    }
}

f();

This is weird programming language design but this code also prints "undefined" because of this rule.

Upvotes: 1

Matthew Mcveigh
Matthew Mcveigh

Reputation: 5685

var x = 1;
(function(){
   var x = x;
})();

After variable hoisting becomes:

var x = 1;
(function(){
   var x;
   x = x;
})();

Upvotes: 4

coyotte508
coyotte508

Reputation: 9705

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/var

Because variable declarations (and declarations in general) are processed before any code is executed, declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it's declared. This behavior is called "hoisting", as it appears that the variable declaration is moved to the top of the function or global code.

That's why sometimes in plugins you see code like

var i,j,abc, d;

//code

In you example, the code is transformed like this:

function() {
    var x;
    x = x;
}

The example with function arguments is different, you just change the function argument itself and the var declaration is ignored.

If a scoped variable is declared with let, it will only move up to the beginning of that scope and not of the function, so this code works:

var x = 1;
(function(){
   var y = x;
   {
        let x = y;
        console.log(x);
   }
})();

As pointed out, it's a new feature, so not supported everywhere.

And finally, here:

var x = 1;
(function(){
    x = x;
    // x === 1
})();

You do not declare x locally, so if you edit it, it'll also edit it at global scope.

Upvotes: 2

MARyan87
MARyan87

Reputation: 1806

Everytime you type var you are reassigning a new variable. When you just reference x inside the function it looks up to the assignment statement above.

function f(){
    var x = x;  //this tries to reassign var x to undefined.
}

Upvotes: -1

Johnathan Ralls
Johnathan Ralls

Reputation: 141

what you are doing here is setting x as a global variable and then setting it to reference itself, overwriting the 1, making x => x which would be undefined.

Upvotes: -2

Related Questions