Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Surprised that global variable has undefined value in JavaScript

Today, I got completely surprised when I saw that a global variable has undefined value in a certain case.

Example:

var value = 10; function test() {     //A     console.log(value);     var value = 20;      //B     console.log(value); } test();

Gives output as

undefined 20 

Here, why is the JavaScript engine considering global value as undefined? I know that JavaScript is an interpreted language. How is it able to consider variables in the function?

Is that a pitfall from the JavaScript engine?

like image 784
iamjustcoder Avatar asked Jan 31 '12 19:01

iamjustcoder


People also ask

Why is my global variable undefined JavaScript?

The reason the first alert is undefined is because you re-declared global as a local variable below it in the function. And in javascript that means from the top of the function it is considered the local variable.

Why do I keep getting undefined in JavaScript?

You will get undefined value when you call a non-existent property or method of an object. In the above example, a function Sum does not return any result but still we try to assign its resulted value to a variable. So in this case, result will be undefined.

What are the problems with global variables in JavaScript?

This is because global variables are easily overwritten by other scripts. Global Variables are not bad and not even a security concern, but it shouldn't overwrite values of another variable. On the usage of more global variables in our code, it may lead to a maintenance issue.


1 Answers

This phenomenon is known as: JavaScript Variable Hoisting.

At no point are you accessing the global variable in your function; you're only ever accessing the local value variable.

Your code is equivalent to the following:

var value = 10;  function test() {     var value;     console.log(value);      value = 20;     console.log(value); }  test(); 

Still surprised you're getting undefined?


Explanation:

This is something that every JavaScript programmer bumps into sooner or later. Simply put, whatever variables you declare are always hoisted to the top of your local closure. So, even though you declared your variable after the first console.log call, it's still considered as if you had declared it before that.
However, only the declaration part is being hoisted; the assignment, on the other hand, is not.

So, when you first called console.log(value), you were referencing your locally declared variable, which has got nothing assigned to it yet; hence undefined.

Here's another example:

var test = 'start';  function end() {     test = 'end';     var test = 'local'; }  end(); alert(test); 

What do you think this will alert? No, don't just read on, think about it. What's the value of test?

If you said anything other than start, you were wrong. The above code is equivalent to this:

var test = 'start';  function end() {     var test;     test = 'end';     test = 'local'; }  end(); alert(test); 

so that the global variable is never affected.

As you can see, no matter where you put your variable declaration, it is always hoisted to the top of your local closure.


Side note:

This also applies to functions.

Consider this piece of code:

test("Won't work!");  test = function(text) { alert(text); } 

which will give you a reference error:

Uncaught ReferenceError: test is not defined

This throws off a lot of developers, since this piece of code works fine:

test("Works!");  function test(text) { alert(text); } 

The reason for this, as stated, is because the assignment part is not hoisted. So in the first example, when test("Won't work!") was run, the test variable has already been declared, but has yet to have the function assigned to it.

In the second example, we're not using variable assignment. Rather, we're using proper function declaration syntax, which does get the function completely hoisted.


Ben Cherry has written an excellent article on this, appropriately titled JavaScript Scoping and Hoisting.
Read it. It'll give you the whole picture in full detail.

like image 143
15 revs, 4 users 97% Avatar answered Sep 29 '22 03:09

15 revs, 4 users 97%