Geek Answers Handbook

Visibility Conflicts

I tried to understand the scope of JavaScript. If I declare a variable outside the function, it is GLOBAL. So I checked the following code to understand the sequence of execution. In the following code, I expected "demo1" to get a global value, which is "Volvo", as I render this text before declaring a local variable with the same name inside the function. But, to my surprise, I see the value "undefined".

<!DOCTYPE html> <html> <body> <p id="demo"></p> <p id="demo1"></p> <p id="demo2"></p> <script> var carName = "Volvo"; myFunction(); document.getElementById("demo").innerHTML = carName; function myFunction() { document.getElementById("demo1").innerHTML = carName; var carName = "Volvo1"; document.getElementById("demo2").innerHTML = carName; } </script> </body> </html>

RESULT:

Volvo

undefined

Volvo1

I modified further to find out what happens if you declare another global variable inside the function as follows:

 <!DOCTYPE html> <html> <body> <p id="demo"></p> <p id="demo1"></p> <p id="demo2"></p> <script> var carName = "Volvo"; myFunction(); document.getElementById("demo").innerHTML = carName; function myFunction() { document.getElementById("demo1").innerHTML = carName; //declaring another global variable carName = "Volvo1"; document.getElementById("demo2").innerHTML = carName; } </script> </body> </html>

RESULT:

Volvo1

Volvo

Volvo1

This time, "demo1" accepts a global variable declared outside the ie function of "Volvo".

Can someone explain this to me?

+7
javascript scope html hoisting variable-declaration
source share
4 answers

In JavaScript, this is called Rise Variable , which is defined as:

One of the tricky aspects of JavaScript for new JavaScript developers is the fact that variables and functions are "raised."

Instead of being available after their announcement, they may actually be available in advance.

This means the second var declaration of your variable carName exception / exception of the first inside the function.

Because if you declare a variable with a var keyword in the global area of your code (the beginning of the code) and then re-declare the same variable with the var keyword in a different area (function, ...) this second declaration will exclude the first, and the value will become undefined .

EDIT:

You can see in the Variable Hoisting section regarding the effects of raising a variable and the difference between a variable and variable assignment :

All variable declarations rise (rise and declare) to the top of the function if they are defined in the function, or at the top of the global context if outside the function.

It is important to know that only variable declarations go up to the top, not the variable initialization or assignment (when a variable is assigned a value).

+5
source share

This is due to the rise of the var declaration. So what happens inside myFunction is actually something like this:

 function myFunction() { // This declaration hides your carName from the outer scope var carName; // Var declared here by hoisting document.getElementById("demo1").innerHTML = carName; // undefined carName = "Volvo1"; // Assigned value document.getElementById("demo2").innerHTML = carName; }

In the second example, you bypass this ad

+2
source share

Working code: here is the demo http://jsfiddle.net/patelmit69/qa34ky3z/

 var carName = "Volvo"; myFunction(); document.getElementById("demo").innerHTML = carName; function myFunction() { document.getElementById("demo1").innerHTML = carName; carName = "Volvo1"; document.getElementById("demo2").innerHTML = carName; }
0
source share

This is due to a variable rise. Variable declarations are displayed at the top of the function, so your function works like the following code:

  function myFunction() { var carName; //declaration document.getElementById("demo1").innerHTML = carName; // here carName is not defined yet carName = "Volvo1"; //assignment document.getElementById("demo2").innerHTML = carName; }

therefore #demo1 is undefined.

0
source share

More articles:


All Articles