Menu
I was trying to understand the scope in JavaScript. If I declare a variable outside of a function, it is GLOBAL. Hence I tested the following code to understand sequence of execution. In the following code, I expected the "demo1" to take the global value which is "Volvo" since the I render that text before declaring the local variable with the same name inside the function. But to my surprise I see the value to be "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 see what happens if a 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 the "demo1" assumes the global variable declared outside of the function i.e "Volvo".
Can someone explain this to me?
395
JavaScript has function scope: Each function creates a new scope. Variables defined inside a function are not accessible (visible) from outside the function. Variables declared with var , let and const are quite similar when declared inside a function.
There are three types of scope in JavaScript — 1) Global Scope, 2) Function Scope, and, 3) Block Scope.
The main difference between keywords var and let is that variables declared using let are block-scoped, while var is function scoped.
The scope determines the accessibility of variables and other resources in the code, like functions and objects. JavaScript function scopes can have two different types, the locale and the global scope. Local variables are declared within a function and can only be accessed within the function.
In JavaScript this is called Variable hoisting, which is defined as:
One of the trickier aspects of JavaScript for new JavaScript developers is the fact that variables and functions are "hoisted."
Rather than being available after their declaration, they might actually be available beforehand.
That means the second var declaration of your carName variable is excluding/eliminating the first one inside the function.
Because if you declare a variable with var keyword in the global scope of your code (beginning of your code) and then re-declare the same variable with var keyword in another scope(function, ...) this second declaration will exclude the first one and this variable value becomes undefined.
You can see in the Variable Hoisting section here the impact of variable hoisting and the difference between variable declaration and variable assignement:
All variable declarations are hoisted (lifted and declared) to the top of the function, if defined in a function, or the top of the global context, if outside a function.
It is important to know that only variable declarations are hoisted to the top, not variable initialization or assignments (when the variable is assigned a value).
133
This is due to the hoisting 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 circumvent this declaration
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
