This question already has answers here:
What is the (function() { } )() construct in JavaScript?
(28 answers)
Closed 3 years ago.
I recently came across this javascript code in a competitive site and couldn't understand how this pretty much works.
var a= 1;
(function(){
console.log(a);
var a = 2;
console.log(a);
})();
I expected the output to be..
1 2
But to my surprise, the original output was..
undefined
2
Can someone please explain how it works? Thanks in advance.
The declaration of variable a is brought to the top of the scope. This process is called hoisting.
var a= 1;
(function(){
var a;
console.log(a);
a = 2;
console.log(a);
})();
Consider a general snippet without a IIFE and global variable.
function func(){
console.log(x)
var x = 2;
console.log(x)
}
func()
The declaration of x is hoisted to the top of the scope of the function.So the above code is same as
function func(){
var x; //x is declared and its value is undefined
console.log(x)
x = 2;
console.log(x)
}
func()
Related
This question already has answers here:
Surprised that global variable has undefined value in JavaScript
(6 answers)
Closed 2 years ago.
Why is the output of the following snippet undefined, 5?
var a=5;
(function(){
console.log(a);
var a= b = 10;
})();
console.log(a);
There is something called hoisting in javascript. Hoisting means that all the variables which are declared inside a scope a brought to the top of the scope and declared there and then assigned on their corresponding line.
The above code is same as
var a=5;
(function(){
var a;
console.log(a);
a= b = 10;
})();
console.log(a);
In the above function when var a; is declared but not initialized so it will get assignment to undefined automatically. Hence you see undefined in the first log.
And in the second log you see 5 because the previous variable a is inside that function and not available outside. In the outside log the a in global scope will be logged.
This question already has answers here:
What is the scope of variables in JavaScript?
(27 answers)
Closed 7 years ago.
In the code below
var x = 1;
(function () {
console.log(x);
var x = 2;
}());
Why is it that when console.log(x), x is undefined?
Variable hoisting. The actual code is executed like this.
var x = 1;
(function() {
var x; // x = undefined
console.log(x);
x = 2;
})();
Edit: On Mr Lister's advice, a bit on variable hoisting. From MDN (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var):
"Variable declarations, wherever they occur, are processed before any code is executed. The scope of a variable declared with var is its current execution context, which is either the enclosing function or, for variables declared outside any function, global."
Because of the compiler, even if you initiate a var down below the code, the compiler send it to the top, just like var x;, so it first initiate as undefined "x" before running console.log, that's why is such a good practice to initate all vars you're going to use first thing in the function, so these mistakes won't happen.
This question already has answers here:
Why does shadowed variable evaluate to undefined when defined in outside scope?
(6 answers)
Closed 3 years ago.
Why is the x variable in the example below returning undefined rather than 25?
var x = 25;
(function() {
console.log(x);
var x = 10;
})();
This is common problem of hoisting in javascript.The code actually looks like this.The value is assigned after the console.log.
The second undefined(if run on developer's tool) is because the function is not explicitly returning anything
This is how Javascript actually executes your code due to var hoisting:
var x = 25;
(function() {
var x;
console.log(x);
x = 10;
})();
It's Self-Invoking Functions that will invoke without calling from specific function or place. and your declared x inside that function and preparing for running that function make javascript ignore global variable x and try to create local x.if you remove var x = 10; from the function inside then everything will be OK:
var x = 25;
(function() {
console.log(x);
})();
This question already has answers here:
What is the scope of variables in JavaScript?
(27 answers)
Closed 5 years ago.
I have small function logically output should be 1 but i am getting 10 .. Can any one help me out with this logic.
var a=1;
function foo() {
if(!a){
var a=10;
}
console.log(a);
}
foo();
Output is coming 10 not 1 . how.
It's because of something called "hoisting".
https://www.w3schools.com/js/js_hoisting.asp
JS interpret your code like this
var a=1;
function foo(){
var a;
if(!a){
a=10;
}
console.log(a);
}
foo();
In addition to hoisting as mentioned in other answers, keep in mind that when writing ES6 (by using let or const) your code will behave as you expect it to.
Why does this happen? Because let and const have block-level scoping and not function-level scoping.
let a = 1;
function foo() {
if (!a) {
let a = 10;
}
console.log(a);
}
foo();
This is why, when you use a JavaScript linting mechanism, like ESLint, you will see rules like vars-on-top ( https://eslint.org/docs/rules/vars-on-top ) specifically to avoid these types of issues.
This question already has answers here:
Global JavaScript Variable Scope: Why doesn't this work?
(5 answers)
Javascript function scoping and hoisting
(18 answers)
Closed 8 years ago.
I need to understand how the JavaScript engines in browsers read functions. Consider the code below:
var g = 5;
alert(g); //alerts 5
function haha() {
alert(g); // alerts NOTHING. Why is this? Why not alert 5? var g = 45 hasn't yet occurred
var g = 45;
alert(g); // alerts 45
};
haha();
alert(g); // alerts 5. Because g = 45 is a local variable.
Fiddle
The effect you're seeing where alert(g) in the haha function alerts undefined is from variable hoisting.
The haha function is actually executed as:
function haha() {
var g;
alert(g);
g = 45;
alert(g);
}
This is because variable and function definitions are hoisted to the top of their scope in JavaScript.
The effect can lead to some rather unintuitive behavior, such as what you're seeing. The simple solution is to always declare your variables and functions before any executing code so that the written code matches what's being executed.