We Keep Coding

Lexical scope/closures in javaScript - javascript

I understand functions in 'js' have lexical scope (i.e. functions create their environment (scope) when they are defined not when they are executed.)
function f1() {
var a = 1;
f2();
}
function f2() {
return a;
}
f1(); // a is not defined
When I run just 'f()' it returns the inner function. Which I get, that's what 'return' does!
function f() {
var b = "barb";
return function() {
return b;
}
}
console.log(b); //ReferenceError: b is not defined
Why do you get 'ReferenceError: b is not defined?'
But doesn't the inner function above have access to it's space, f()'s space etc. Being that 'b' is being returned to the global space, wouldn't the console.log() work?
However when I assign 'f()' to a new variable and run it:
var x = f();
x();// "barb"
console.log(b); //ReferenceError: b is not defined
This returns 'b' which is "barb", but when you run console.log() again you'll get 'ReferenceError: 'b' is not defined'; Isn't 'b' in the global scope now since it has been returned? SO why didn't 'x()' also return the inner function just like 'f()' did?

You, my friend, are thoroughly confused. Your very first statement itself is wrong:
functions create their environment (scope) when they are defined not when they are executed
Actually it's the opposite. Defining a function doesn't create a scope. Calling a function creates a scope.
What's a scope?
To put it simply, a scope is the lifespan of a variable. You see, every variable is born, lives and dies. The beginning of a scope marks the time the variable is born and the end of the scope marks the time it dies.
In the beginning there's only one scope (called the program scope or the global scope). Variables created in this scope only die when the program ends. They are called global variables.
For example, consider this program:
const x = 10; // global variable x
{ // beginning of a scope
const x = 20; // local variable x
console.log(x); // 20
} // end of the scope
console.log(x); // 10
Here we created a global variable called x. Then we created a block scope. Inside this block scope we created a local variable x. Since local variables shadow global variables when we log x we get 20. Back in the global scope when we log x we get 10 (the local x is now dead).
Block Scopes and Function Scopes
Now there are two main types of scopes in programming - block scopes and function scopes.
The scope in the previous example was a block scope. It's just a block of code. Hence the name. Block scopes are immediately executed.
Function scopes on the other hand are templates of block scopes. As the name suggests a function scope belongs to a function. However, more precisely, it belongs to a function call. Function scopes do not exist until a function is called. For instance:
const x = 10;
function inc(x) {
console.log(x + 1);
}
inc(3); // 4
console.log(x); // 10
inc(7); // 8
As you can see every time you call a function a new scope is created. That's the reason you get the outputs 4, 10 and 8.
Originally, JavaScript only had function scopes. It didn't have block scopes. Hence if you wanted to create a block scope then you had to create a function and immediately execute it:
const x = 10; // global variable x
(function () { // beginning of a scope
const x = 20; // local variable x
console.log(x); // 20
}()); // end of the scope
console.log(x); // 10
This pattern is called an immediately invoked function expression (IIFE). Of course, nowadays we can create block scoped variables using const and let.
Lexical Scopes and Dynamic Scopes
Function scopes can again be of two types - lexical and dynamic. You see, in a function there are two types of variables:
Free variables
Bound variables
Variables declared inside a scope are bound to that scope. Variables not declared inside a scope are free. These free variables belong to some other scope, but which one?
Lexical Scope
In lexical scoping free variables must belong to a parent scope. For example:
function add(x) { // template of a new scope, x is bound in this scope
return function (y) { // template of a new scope, x is free, y is bound
return x + y; // x resolves to the parent scope
};
}
const add10 = add(10); // create a new scope for x and return a function
console.log(add10(20)); // create a new scope for y and return x + y
JavaScript, like most programming languages, has lexical scoping.
Dynamic Scope
In contrast to lexical scoping, in dynamic scoping free variables must belong to the calling scope (the scope of the calling function). For example (this is also not JS - it doesn't have dynamic scopes):
function add(y) { // template of a new scope, y is bound, x is free
return x + y; // x resolves to the calling scope
}
function add10(y) { // template of a new scope, bind y
var x = 10; // bind x
return add(y); // add x and y
}
print(add10(20)); // calling add10 creates a new scope (the calling scope)
// the x in add resolves to 10 because the x in add10 is 10
That's it. Simple right?
The Problem
The problem with your first program is that JavaScript doesn't have dynamic scoping. It only has lexical scoping. See the mistake?
function f1() {
var a = 1;
f2();
}
function f2() {
return a;
}
f1(); // a is not defined (obviously - f2 can't access the `a` inside f1)
Your second program is a very big mess:
function f() {
var b = "barb";
return function() {
return b;
}
}
console.log(b); //ReferenceError: b is not defined
Here are the mistakes:
You never called f. Hence the variable b is never created.
Even if you called f the variable b would be local to f.
This is what you need to do:
function f() {
const b = "barb";
return function() {
return b;
}
}
const x = f();
console.log(x());
When you call x it returns b. However that doesn't make b global. To make b global you need to do this:
function f() {
const b = "barb";
return function() {
return b;
}
}
const x = f();
const b = x();
console.log(b);
Hope this helped you understand about scopes and functions.

You get, "ReferenceError: b is not defined" because "b" is not defined where your console.log() call is. There's a "b" inside that function, but not outside. Your assertion that "b is being returned to the global space" is false.
When you invoke the function returned by your "f()" function, that will return a copy of the value referenced by that closure variable "b". In this case, "b" will always be that string, so the function returns that string. It does not result in the symbol "b" becoming a global variable.

But doesn't the inner function above have access to it's space, f()'s space etc.
Yes it has. It accesses the b variable and returns its value from the function.
Being that 'b' is being returned to the global space
No. Returning a value from a function is not "making a variable available in the caller scope". Calling the function (with f()) is an expression whose result is the value that the function returned (in your case, the unnamed function object). That value can then be assigned somewhere (to x), a property of it can be accessed or it can be discarded.
The variable b however stays private in the scope where it was declared. It is not [getting] defined in the scope where you call console.log, that's why you get an error.
What you want seems to be
var x = f();
var b = x(); // declare new variable b here, assign the returned value
console.log( b ); // logs "barb"

function f1() {
var a = 1;
f2();
}
function f2() {
return a;
}
f1(); // a is not defined
f2(); does not knows about the a,because you never passed 'a' to it,(That's Scope are
created when the functions are defined).Look function f2() would have been able to acess
a if it was defined inside f1();[Functions can access the variables in same scope in
which they are "DEFINED" and NOT "CALLED"]
function f() {
var b = "barb";
return function(){
return b;
}
}
console.log(b);
First of all You Need to Call f(); after executing f(); it would return another function
which needs to be executed. i.e
var a=f();
a();
it would result into "barb" ,In this case you are returning a function not the var b;
function f() {
var b = "barb";
return b;
};
console.log(f());
This would print barb on screen

Related

I just read a great article about JavaScript Scoping and Hoisting by Ben Cherry in which he gives the following example:
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
alert(a);
Using the code above, the browser will alert "1".
I'm still unsure why it returns "1". Some of the things he says come to mind like:
All the function declarations are hoisted to the top. You can scope a variable using function. Still doesn't click for me.

Function hoisting means that functions are moved to the top of their scope. That is,
function b() {
a = 10;
return;
function a() {}
}
will be rewritten by the interpeter to this
function b() {
function a() {}
a = 10;
return;
}
Weird, eh?
Also, in this instance,
function a() {}
behaved the same as
var a = function () {};
So, in essence, this is what the code is doing:
var a = 1; //defines "a" in global scope
function b() {
var a = function () {}; //defines "a" in local scope
a = 10; //overwrites local variable "a"
return;
}
b();
alert(a); //alerts global variable "a"

What you have to remember is that it parses the whole function and resolves all the variables declarations before executing it. So....
function a() {}
really becomes
var a = function () {}
var a forces it into a local scope, and variable scope is through the entire function, so the global a variable is still 1 because you have declared a into a local scope by making it a function.

The function a is hoisted inside function b:
var a = 1;
function b() {
function a() {}
a = 10;
return;
}
b();
alert(a);
which is almost like using var:
var a = 1;
function b() {
var a = function () {};
a = 10;
return;
}
b();
alert(a);
The function is declared locally, and setting a only happens in the local scope, not the global var.

function declaration function a(){} is hoisted first and it behaves like var a = function () {};, hence in local scope a is created.
If you have two variable with same name (one in global another in local), local variable always get precedence over global variable.
When you set a=10, you are setting the local variable a , not the global one.
Hence, the value of global variable remain same and you get, alerted 1

Suprisingly, none of the answers here mention the relevancy of the Execution Context in the Scope Chain.
The JavaScript Engine wraps the currently executing code in an Execution Context. The base execution context is the global Execution Context. Each time a new function is invoked, a new Execution Context is created and put on the Execution Stack. Think of a Stack Frame sitting on an Invocation Stack in other programming languages. Last in first out. Now each Execution Context has its own Variable Environment and Outer Environment in JavaScript.
I will use the below example as a demonstration.
1) First, we enter the Creation Phase of the global Execution Context. Both the Outer Environment and Variable Environment of the Lexical Environment are created. The Global Object is setup and placed in memory with the special variable 'this' pointing to it. The function a and its code and the variable myVar with an undefined value are placed in memory in the global Variable Environment. it's important to note that function a's code is not executed. It is just placed in memory with function a.
2) Second, it is the Execution Phase of the Execution Context. myVar is no longer an undefined value. It is initialized with value of 1, which is stored in the global Variable Environment. The function a is invoked and a new Execution Context is created.
3) In the function a's Execution Context, it goes through the Creation and Execution Phase of its own Execution Context. It has its own Outer Environment and Variable Environment, thus, its own Lexical Environment. The function b and the variable myVar are stored in its Variable Environment. This Variable Environment is distinct from the global Variable Environment. Since the function a sits lexically (physically in code) on the same level as the global Execution Context, its Outer Environment is the global Execution Context. Thus, if the function a was to refer to a variable that is not in its Variable Environment, it will search the Scope Chain and try to find the variable in the Variable Environment of the global Execution Context.
4) The function b is invoked in function a. A new Execution Context is created. Since it sits lexically in function a, its Outer Environment is a. So when it references myVar, since myVar is not in function b's Variable Environment, it will look in function a's Variable Environment. It finds it there and console.log prints 2. But if the variable was not in function a's Variable Environment, then since function a's Outer Environment is the global Execution Context, then the Scope Chain will continue searching there.
5) After function b and a are finished execution, they are popped from the Execution Stack. The single-threaded JavaScript Engine continues execution at the global Execution Context. It invokes the b function. But there is no b function in the global Variable Environment and there is no other Outer Environment to search in the global Execution Context. Thus an exception is raised by the JavaScript Engine.
function a(){
function b(){
console.log(myVar);
}
var myVar = 2;
b();
}
var myVar = 1;
a();
b();
> 2
> Uncaught ReferenceError: b is not defined
The below example shows the Scope Chain in action. In the function b's Execution Context's Variable Environment, there is no myVar. So it searches its Outer Environment, which is the function a. The function a does not have myVar in its Variable Environment either. So the Engine searches function a's Outer Environment, which is the global Execution Context's Outer Environment and myVar is defined there. Hence, the console.log prints 1.
function a(){
function b(){
console.log(myVar);
}
b();
}
var myVar = 1;
a();
> 1
Regarding Execution Context and the Lexical Environment associated with it, including Outer Environment and Variable Environment, enable the scoping of variables in JavaScript. Even if you invoke the same function multiple times, for each invocation, it will create its own Execution Context. So each Execution Context will have its own copy of the variables in its Variable Environment. There is no sharing of variables.

function a() { } is a function statement, which creates an a variable local to the b function.
Variables are created when a function is parsed, regardless of whether the var or function statement gets executed.
a = 10 sets this local variable.

What is the bone of contention in this small snippet of code?
Case 1:
Include function a(){} definition inside the body of function b as follows. logs value of a = 1
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
console.log(a); // logs a = 1
Case 2
Exclude function a(){} definition inside the body of function b as follows. logs value of a = 10
var a = 1;
function b() {
a = 10; // overwrites the value of global 'var a'
return;
}
b();
console.log(a); // logs a = 10
Observation will help you realise that statement console.log(a) logs the following values.
Case 1 : a = 1
Case 2 : a = 10
Posits
var a has been defined and declared lexically in the global scope.
a=10 This statement is reassigning value to 10, it lexically sits inside the function b.
Explanation of both the cases
Because of function definition with name property a is same as the variable a. The variable a inside the function body b becomes a local variable. The previous line implies that the global value of a remains intact and the local value of a is updated to 10.
So, what we intend to say is that the code below
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
console.log(a); // logs a = 1
It is interpreted by the JS interpreter as follows.
var a = 1;
function b() {
function a() {}
a = 10;
return;
}
b();
console.log(a); // logs a = 1
However, when we remove the function a(){} definition, the value of 'a' declared and defined outside the function b, that value gets overwritten and it changes to 10 in case 2. The value gets overwritten because a=10 refers to the global declaration and if it were to be declared locally we must have written var a = 10;.
var a = 1;
function b() {
var a = 10; // here var a is declared and defined locally because it uses a var keyword.
return;
}
b();
console.log(a); // logs a = 1
We can clarify our doubt further by changing the name property in function a(){} definition to some other name than 'a'
var a = 1;
function b() {
a = 10; // here var a is declared and defined locally because it uses a var keyword.
return;
function foo() {}
}
b();
console.log(a); // logs a = 1

Hoisting is a concept made for us to make it easier to understand. What actually happens is the declarations are done first with respect to their scopes and the assignments will happen after that(not at the same time).
When the declarations happen, var a, then function b and inside that b scope, function a is declared.
This function a will shadow the variable a coming from the global scope.
After the declarations are done, the values assign will start, the global a will get the value 1 and the a inside function b will get 10.
when you do alert(a), it will call the actual global scope variable.
This little change to the code will make it more clear
var a = 1;
function b() {
a = 10;
return a;
function a() { }
}
alert(b());
alert(a);

It is happening because of the Variable name is same as the function name means "a".
Thus due to Javascript hoisting it try to solve the naming conflict and it will return a = 1.
I was also confused about this until i read this post on "JavaScript Hoisting" http://www.ufthelp.com/2014/11/JavaScript-Hoisting.html
Hope it helps.

Here's my recap of the answer with more annotation and an acompaniying fiddle to play around with.
// hoisting_example.js
// top of scope ie. global var a = 1
var a = 1;
// new scope due to js' functional (not block) level scope
function b() {
a = 10; // if the function 'a' didn't exist in this scope, global a = 10
return; // the return illustrates that function 'a' is hoisted to top
function a(){}; // 'a' will be hoisted to top as var a = function(){};
}
// exec 'b' and you would expect to see a = 10 in subsequent alert
// but the interpreter acutally 'hoisted' the function 'a' within 'b'
// and in doing so, created a new named variable 'a'
// which is a function within b's scope
b();
// a will alert 1, see comment above
alert(a);
https://jsfiddle.net/adjavaherian/fffpxjx7/

scpope & closure & hoisting (var/function)
scpope : the global var can be access in any place(the whole file
scope), local var only can be accessed by the local
scope(function/block scope)!
Note: if a local variable not using
var keywords in a function, it will become a global variable!
closure : a function inner the other function, which can access
local scope(parent function) & global scope, howerver it's vars
can't be accessed by others! unless, your return it as return value!
hoisting : move all declare/undeclare vars/function to the scope
top, than assign the value or null!
Note: it just move the declare,not move the value!
var a = 1;
//"a" is global scope
function b() {
var a = function () {};
//"a" is local scope
var x = 12;
//"x" is local scope
a = 10;
//global variable "a" was overwrited by the local variable "a"
console.log("local a =" + a);
return console.log("local x = " + x);
}
b();
// local a =10
// local x = 12
console.log("global a = " + a);
// global a = 1
console.log("can't access local x = \n");
// can't access local x =
console.log(x);
// ReferenceError: x is not defined

Hoisting In JavaScript means, variable declarations are executed through out the program before any code is executed. Therefore declaring a variable anywhere in the code is equivalent to declaring it at the beginning.

Its all depends on the scope of variable 'a'. Let me explain by creating scopes as images.
Here JavaScript will create 3 scopes.
i) Global scope.
ii) Function b() scope.
iii) Function a() scope.
Its clear when you call 'alert' method scope belongs to Global that time, so it will pick value of variable 'a' from Global scope only that is 1.

Long Post!
But it will clear the air!
The way Java Script works is that it involves a two step process:
Compilation(so to speak) - This step registers variables and function declarations and their respective scope. It does not involve evaluating function expression: var a = function(){} or variable expression (like assigning 3 to x in case of var x =3; which is nothing but the evaluation of R.H.S part.)
Interpreter: This is the execution/evaluation part.
Check the output of below code to get an understanding:
//b() can be called here!
//c() cannot be called.
console.log("a is " + a);
console.log("b is " + b);
console.log("c is " + c);
var a = 1;
console.log("Now, a is " + a);
var c = function() {};
console.log("Now c is " + c);
function b() {
//cannot write the below line:
//console.log(e);
//since e is not declared.
e = 10; //Java script interpreter after traversing from this function scope chain to global scope, is unable to find this variable and eventually initialises it with value 10 in global scope.
console.log("e is " + e) // works!
console.log("f is " + f);
var f = 7;
console.log("Now f is " + f);
console.log("d is " + d);
return;
function d() {}
}
b();
console.log(a);
Lets break it:
In the compilation phase,
'a' would be registered under global scope with value 'undefined'.
Same goes for 'c', its value at this moment would be 'undefined' and not the 'function()'.
'b' would be registered as a function in the global scope.
Inside b's scope, 'f' would be registered as a variable which would be undefined at this moment and function 'd' would be registered.
When interpreter runs, declared variables and function() (and not expressions) can be accessed before the interpreter reaches the actual expression line. So, variables would be printed 'undefined' and declared anonymous function can be called earlier. However, trying to access undeclared variable before its expression initialisation would result in an error like:
console.log(e)
e = 3;
Now, what happens when you have variable and function declaration with same name.
Answer is - functions are always hoisted before and if the same name variable is declared, it is treated as duplicate and ignored. Remember, order does not matter. Functions are always given precedence. But during evaluation phase you can change the variable reference to anything (It stores whatever was the last assignment) Have a look at the below code:
var a = 1;
console.log("a is " + a);
function b() {
console.log("a inside the function b is " + a); //interpreter finds 'a' as function() in current scope. No need to go outside the scope to find 'a'.
a = 3; //a changed
console.log("Now a is " + a);
return;
function a() {}
}
var a; //treated as duplicate and ignored.
b();
console.log("a is still " + a + " in global scope"); //This is global scope a.

Hoisting is behavioural concept of JavaScript. Hoisting (say moving) is concept that explains how and where variables should be declared.
In JavaScript, a variable can be declared after it has been used because Function declarations and variable declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the JavaScript interpreter.
We encounter two types of hoisting in most cases.
1.Variable declaration hoisting
Lets understand this by this piece of code.
a = 5; // Assign 5 to a
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = a; // Display a in the element
var a; // Declare a
//output-> 5
Here declaration of variable a will be hosted to top invisibly by the javascript interpreter at the time of compilation. So we were able to get value of a. But this approach of declaration of variables is not recommended as we should declare variables to top already like this.
var a = 5; // Assign and declare 5 to a
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = a; // Display a in the element
// output -> 5
consider another example.
function foo() {
console.log(x)
var x = 1;
}
is actually interpreted like this:
function foo() {
var x;
console.log(x)
x = 1;
}
In this case x will be undefined
It does not matter if the code has executed which contains the declaration of variable. Consider this example.
function foo() {
if (false) {
var a = 1;
}
return;
var b = 1;
}
This function turns out to be like this.
function foo() {
var a, b;
if (false) {
a = 1;
}
return;
b = 1;
}
In variable declaration only variable definition hoists, not the assignment.
Function declaration hoisting
Unlike the variable hoisting the function body or assigned value will also be hoisted. Consider this code
function demo() {
foo(); // this will give error because it is variable hoisting
bar(); // "this will run!" as it is function hoisting
var foo = function () {
alert("this would not run!!");
}
function bar() {
alert("this will run!!");
}
}
demo();
Now as we understood both variable and function hoisting, let's understand this code now.
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
alert(a);
This code will turn out to be like this.
var a = 1; //defines "a" in global scope
function b() {
var a = function () {}; //defines "a" in local scope
a = 10; //overwrites local variable "a"
return;
}
b();
alert(a);
The function a() will have local scope inside b(). a() will be moved to top while interpreting the code with its definition (only in case of function hoisting) so a now will have local scope and therefore will not affect the global scope of a while having its own scope inside function b().

From my piece of knowledge, hoisting happens with the variable declaration and function declaration, for example:
a = 7;
var a;
console.log(a)
What happens inside JavaScript's engine:
var a;
a = 7;
console.log(a);
// 7
Or:
console.log(square(7)); // Output: 49
function square(n) { return n * n; }
It will become:
function square(n) { return n * n; }
console.log(square(7)); // 49
But assignments such as variable assigment, function expression assignment will not be hoisted:
For example:
console.log(x);
var x = 7; // undefined
It may become like this:
var x;
console.log(x); // undefined
x = 7;

To describe hosting in javascript in one sentence is variables and functions are hoisted to the top of the scope that they are declared in.
I am assuming you are a beginner, to understand hoisting properly at first we have understood the difference between undefined and ReferenceError
var v;
console.log(v);
console.log(abc);
/*
The output of the above codes are:
undefined
ReferenceError: abc is not defined*/
now in the bellow code what we see? a variable and a function expression is decleard.
<script>
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
</script>
but the real picture with proof that the both variable and function are hoisted on the top of there scope:
console.log(totalAmo);
console.log(getSum(8,9));
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
console.log(totalAmo);
console.log(getSum(9,7));
Output of first two logs are undefined and TypeError: getSum is not a function because both var totalAmo and getSum are hoisted on the top of their scope like bellow
<script>
var totalAmo;
var getSum;
console.log(totalAmo);
console.log(getSum(8,9));
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
console.log(totalAmo);
console.log(getSum(9,7));
</script>
But for functions declaration whole functions hoisted on the top of their scope.
console.log(getId());
function getId(){
return 739373;
}
/* output: 739373, because the whole function hoisted on the top of the scope.*/
Now the same logic goes for those varibale, functions experessions and function declaratoins declared inside functional scope. Key point: they will not be hoisted on the top of the file;
function functionScope(){
var totalAmo;
var getSum;
console.log(totalAmo);
console.log(getSum(8,9));
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
}
So, when you use var keyword, variable and function hoisted on the top of there scope (global scope and function scope).
What about let and const, const and let are still both aware of the global scope and function scope just like var is, but const and let variables are also aware of another scope called blocked scope. a block scope is present whenever there is a block of code, such as for loop, if else statement, while loop etc.
When we use const and let to declare a variable in these block scope, the variable declaration only will be hoisted on the top of that block that it is in, and it will not be hoisted on the top of the parent function or top of the global scope that it is hoisted.
function getTotal(){
let total=0;
for(var i = 0; i<10; i++){
let valueToAdd = i;
var multiplier = 2;
total += valueToAdd*multiplier;
}
return total;
}
Variables in abobe example will be hoisted like bellow
function getTotal(){
let total;
var multiplier;
total = 0;
for(var i = 0; i<10; i++){
let valueToAdd;
valueToAdd = i;
multiplier = 2;
total += valueToAdd*multiplier;
}
return total;
}

ES5: function hoisting & variable hoisting
function hoisting priority is greater than variable hoisting
"use strict";
/**
*
* #author xgqfrms
* #license MIT
* #copyright xgqfrms
* #created 2016-06-01
* #modified
*
* #description function-hoisting.js
* #augments
* #example
* #link
*
*/
(function() {
const log = console.log;
var a = 1;
function b() {
a = 10;
log(`local a`, a)
return;
// function hoisting priority is greater than variable hoisting
function a() {}
}
b();
log(`global a`, a);
// local a 10
// global a 1
})();
which is equal to
(function() {
const log = console.log;
// define "a" in global scope
var a = 1;
function b() {
// define "a" in local scope
var a ;
// assign function to a
a = function () {};
// overwrites local variable "a"
a = 10;
log(`local a`, a);
return;
}
b();
// log global variable "a"
log(`global a`, a);
// local a 10
// global a 1
})();
the reason behind of hoisting
var a = 1;
//"a" is global scope
function b() {
var a = function () {};
//"a" is local scope
var x = 12;
//"x" is local scope
a = 10;
//global variable "a" was overwrited by the local variable "a"
console.log("local a =" + a);
return console.log("local x = " + x);
}
b();
// local a =10
// local x = 12
console.log("global a = " + a);
// global a = 1
console.log("can't access local x = \n");
// can't access local x =
console.log(x);
// ReferenceError: x is not defined
/**
* scpope & closure & hoisting (var/function)
*
* 1. scpope : the global var can be access in any place(the whole file scope), local var only can be accessed by the local scope(function/block scope)!
* Note: if a local variable not using var keywords in a function, it will become a global variable!
*
* 2. closure : a function inner the other function, which can access local scope(parent function) & global scope, howerver it's vars can't be accessed by others! unless, your return it as return value!
*
* 3. hoisting : move all declare/undeclare vars/function to the scope top, than assign the value or null!
* Note: it just move the declare, not move the value!
*
*/
ES6 let, const no exist hoisting
(() => {
const log = console.log;
log(a)
// Error: Uncaught ReferenceError: Cannot access 'a' before initialization
let a = 1;
})();
(() => {
const log = console.log;
log(b)
// Error: Uncaught ReferenceError: Cannot access 'b' before initialization
const b = 1;
})();
refs
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

I just read a great article about JavaScript Scoping and Hoisting by Ben Cherry in which he gives the following example:
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
alert(a);
Using the code above, the browser will alert "1".
I'm still unsure why it returns "1". Some of the things he says come to mind like:
All the function declarations are hoisted to the top. You can scope a variable using function. Still doesn't click for me.

Function hoisting means that functions are moved to the top of their scope. That is,
function b() {
a = 10;
return;
function a() {}
}
will be rewritten by the interpeter to this
function b() {
function a() {}
a = 10;
return;
}
Weird, eh?
Also, in this instance,
function a() {}
behaved the same as
var a = function () {};
So, in essence, this is what the code is doing:
var a = 1; //defines "a" in global scope
function b() {
var a = function () {}; //defines "a" in local scope
a = 10; //overwrites local variable "a"
return;
}
b();
alert(a); //alerts global variable "a"

What you have to remember is that it parses the whole function and resolves all the variables declarations before executing it. So....
function a() {}
really becomes
var a = function () {}
var a forces it into a local scope, and variable scope is through the entire function, so the global a variable is still 1 because you have declared a into a local scope by making it a function.

The function a is hoisted inside function b:
var a = 1;
function b() {
function a() {}
a = 10;
return;
}
b();
alert(a);
which is almost like using var:
var a = 1;
function b() {
var a = function () {};
a = 10;
return;
}
b();
alert(a);
The function is declared locally, and setting a only happens in the local scope, not the global var.

function declaration function a(){} is hoisted first and it behaves like var a = function () {};, hence in local scope a is created.
If you have two variable with same name (one in global another in local), local variable always get precedence over global variable.
When you set a=10, you are setting the local variable a , not the global one.
Hence, the value of global variable remain same and you get, alerted 1

Suprisingly, none of the answers here mention the relevancy of the Execution Context in the Scope Chain.
The JavaScript Engine wraps the currently executing code in an Execution Context. The base execution context is the global Execution Context. Each time a new function is invoked, a new Execution Context is created and put on the Execution Stack. Think of a Stack Frame sitting on an Invocation Stack in other programming languages. Last in first out. Now each Execution Context has its own Variable Environment and Outer Environment in JavaScript.
I will use the below example as a demonstration.
1) First, we enter the Creation Phase of the global Execution Context. Both the Outer Environment and Variable Environment of the Lexical Environment are created. The Global Object is setup and placed in memory with the special variable 'this' pointing to it. The function a and its code and the variable myVar with an undefined value are placed in memory in the global Variable Environment. it's important to note that function a's code is not executed. It is just placed in memory with function a.
2) Second, it is the Execution Phase of the Execution Context. myVar is no longer an undefined value. It is initialized with value of 1, which is stored in the global Variable Environment. The function a is invoked and a new Execution Context is created.
3) In the function a's Execution Context, it goes through the Creation and Execution Phase of its own Execution Context. It has its own Outer Environment and Variable Environment, thus, its own Lexical Environment. The function b and the variable myVar are stored in its Variable Environment. This Variable Environment is distinct from the global Variable Environment. Since the function a sits lexically (physically in code) on the same level as the global Execution Context, its Outer Environment is the global Execution Context. Thus, if the function a was to refer to a variable that is not in its Variable Environment, it will search the Scope Chain and try to find the variable in the Variable Environment of the global Execution Context.
4) The function b is invoked in function a. A new Execution Context is created. Since it sits lexically in function a, its Outer Environment is a. So when it references myVar, since myVar is not in function b's Variable Environment, it will look in function a's Variable Environment. It finds it there and console.log prints 2. But if the variable was not in function a's Variable Environment, then since function a's Outer Environment is the global Execution Context, then the Scope Chain will continue searching there.
5) After function b and a are finished execution, they are popped from the Execution Stack. The single-threaded JavaScript Engine continues execution at the global Execution Context. It invokes the b function. But there is no b function in the global Variable Environment and there is no other Outer Environment to search in the global Execution Context. Thus an exception is raised by the JavaScript Engine.
function a(){
function b(){
console.log(myVar);
}
var myVar = 2;
b();
}
var myVar = 1;
a();
b();
> 2
> Uncaught ReferenceError: b is not defined
The below example shows the Scope Chain in action. In the function b's Execution Context's Variable Environment, there is no myVar. So it searches its Outer Environment, which is the function a. The function a does not have myVar in its Variable Environment either. So the Engine searches function a's Outer Environment, which is the global Execution Context's Outer Environment and myVar is defined there. Hence, the console.log prints 1.
function a(){
function b(){
console.log(myVar);
}
b();
}
var myVar = 1;
a();
> 1
Regarding Execution Context and the Lexical Environment associated with it, including Outer Environment and Variable Environment, enable the scoping of variables in JavaScript. Even if you invoke the same function multiple times, for each invocation, it will create its own Execution Context. So each Execution Context will have its own copy of the variables in its Variable Environment. There is no sharing of variables.

function a() { } is a function statement, which creates an a variable local to the b function.
Variables are created when a function is parsed, regardless of whether the var or function statement gets executed.
a = 10 sets this local variable.

What is the bone of contention in this small snippet of code?
Case 1:
Include function a(){} definition inside the body of function b as follows. logs value of a = 1
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
console.log(a); // logs a = 1
Case 2
Exclude function a(){} definition inside the body of function b as follows. logs value of a = 10
var a = 1;
function b() {
a = 10; // overwrites the value of global 'var a'
return;
}
b();
console.log(a); // logs a = 10
Observation will help you realise that statement console.log(a) logs the following values.
Case 1 : a = 1
Case 2 : a = 10
Posits
var a has been defined and declared lexically in the global scope.
a=10 This statement is reassigning value to 10, it lexically sits inside the function b.
Explanation of both the cases
Because of function definition with name property a is same as the variable a. The variable a inside the function body b becomes a local variable. The previous line implies that the global value of a remains intact and the local value of a is updated to 10.
So, what we intend to say is that the code below
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
console.log(a); // logs a = 1
It is interpreted by the JS interpreter as follows.
var a = 1;
function b() {
function a() {}
a = 10;
return;
}
b();
console.log(a); // logs a = 1
However, when we remove the function a(){} definition, the value of 'a' declared and defined outside the function b, that value gets overwritten and it changes to 10 in case 2. The value gets overwritten because a=10 refers to the global declaration and if it were to be declared locally we must have written var a = 10;.
var a = 1;
function b() {
var a = 10; // here var a is declared and defined locally because it uses a var keyword.
return;
}
b();
console.log(a); // logs a = 1
We can clarify our doubt further by changing the name property in function a(){} definition to some other name than 'a'
var a = 1;
function b() {
a = 10; // here var a is declared and defined locally because it uses a var keyword.
return;
function foo() {}
}
b();
console.log(a); // logs a = 1

Hoisting is a concept made for us to make it easier to understand. What actually happens is the declarations are done first with respect to their scopes and the assignments will happen after that(not at the same time).
When the declarations happen, var a, then function b and inside that b scope, function a is declared.
This function a will shadow the variable a coming from the global scope.
After the declarations are done, the values assign will start, the global a will get the value 1 and the a inside function b will get 10.
when you do alert(a), it will call the actual global scope variable.
This little change to the code will make it more clear
var a = 1;
function b() {
a = 10;
return a;
function a() { }
}
alert(b());
alert(a);

It is happening because of the Variable name is same as the function name means "a".
Thus due to Javascript hoisting it try to solve the naming conflict and it will return a = 1.
I was also confused about this until i read this post on "JavaScript Hoisting" http://www.ufthelp.com/2014/11/JavaScript-Hoisting.html
Hope it helps.

Here's my recap of the answer with more annotation and an acompaniying fiddle to play around with.
// hoisting_example.js
// top of scope ie. global var a = 1
var a = 1;
// new scope due to js' functional (not block) level scope
function b() {
a = 10; // if the function 'a' didn't exist in this scope, global a = 10
return; // the return illustrates that function 'a' is hoisted to top
function a(){}; // 'a' will be hoisted to top as var a = function(){};
}
// exec 'b' and you would expect to see a = 10 in subsequent alert
// but the interpreter acutally 'hoisted' the function 'a' within 'b'
// and in doing so, created a new named variable 'a'
// which is a function within b's scope
b();
// a will alert 1, see comment above
alert(a);
https://jsfiddle.net/adjavaherian/fffpxjx7/

scpope & closure & hoisting (var/function)
scpope : the global var can be access in any place(the whole file
scope), local var only can be accessed by the local
scope(function/block scope)!
Note: if a local variable not using
var keywords in a function, it will become a global variable!
closure : a function inner the other function, which can access
local scope(parent function) & global scope, howerver it's vars
can't be accessed by others! unless, your return it as return value!
hoisting : move all declare/undeclare vars/function to the scope
top, than assign the value or null!
Note: it just move the declare,not move the value!
var a = 1;
//"a" is global scope
function b() {
var a = function () {};
//"a" is local scope
var x = 12;
//"x" is local scope
a = 10;
//global variable "a" was overwrited by the local variable "a"
console.log("local a =" + a);
return console.log("local x = " + x);
}
b();
// local a =10
// local x = 12
console.log("global a = " + a);
// global a = 1
console.log("can't access local x = \n");
// can't access local x =
console.log(x);
// ReferenceError: x is not defined

Hoisting In JavaScript means, variable declarations are executed through out the program before any code is executed. Therefore declaring a variable anywhere in the code is equivalent to declaring it at the beginning.

Its all depends on the scope of variable 'a'. Let me explain by creating scopes as images.
Here JavaScript will create 3 scopes.
i) Global scope.
ii) Function b() scope.
iii) Function a() scope.
Its clear when you call 'alert' method scope belongs to Global that time, so it will pick value of variable 'a' from Global scope only that is 1.

Long Post!
But it will clear the air!
The way Java Script works is that it involves a two step process:
Compilation(so to speak) - This step registers variables and function declarations and their respective scope. It does not involve evaluating function expression: var a = function(){} or variable expression (like assigning 3 to x in case of var x =3; which is nothing but the evaluation of R.H.S part.)
Interpreter: This is the execution/evaluation part.
Check the output of below code to get an understanding:
//b() can be called here!
//c() cannot be called.
console.log("a is " + a);
console.log("b is " + b);
console.log("c is " + c);
var a = 1;
console.log("Now, a is " + a);
var c = function() {};
console.log("Now c is " + c);
function b() {
//cannot write the below line:
//console.log(e);
//since e is not declared.
e = 10; //Java script interpreter after traversing from this function scope chain to global scope, is unable to find this variable and eventually initialises it with value 10 in global scope.
console.log("e is " + e) // works!
console.log("f is " + f);
var f = 7;
console.log("Now f is " + f);
console.log("d is " + d);
return;
function d() {}
}
b();
console.log(a);
Lets break it:
In the compilation phase,
'a' would be registered under global scope with value 'undefined'.
Same goes for 'c', its value at this moment would be 'undefined' and not the 'function()'.
'b' would be registered as a function in the global scope.
Inside b's scope, 'f' would be registered as a variable which would be undefined at this moment and function 'd' would be registered.
When interpreter runs, declared variables and function() (and not expressions) can be accessed before the interpreter reaches the actual expression line. So, variables would be printed 'undefined' and declared anonymous function can be called earlier. However, trying to access undeclared variable before its expression initialisation would result in an error like:
console.log(e)
e = 3;
Now, what happens when you have variable and function declaration with same name.
Answer is - functions are always hoisted before and if the same name variable is declared, it is treated as duplicate and ignored. Remember, order does not matter. Functions are always given precedence. But during evaluation phase you can change the variable reference to anything (It stores whatever was the last assignment) Have a look at the below code:
var a = 1;
console.log("a is " + a);
function b() {
console.log("a inside the function b is " + a); //interpreter finds 'a' as function() in current scope. No need to go outside the scope to find 'a'.
a = 3; //a changed
console.log("Now a is " + a);
return;
function a() {}
}
var a; //treated as duplicate and ignored.
b();
console.log("a is still " + a + " in global scope"); //This is global scope a.

Hoisting is behavioural concept of JavaScript. Hoisting (say moving) is concept that explains how and where variables should be declared.
In JavaScript, a variable can be declared after it has been used because Function declarations and variable declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the JavaScript interpreter.
We encounter two types of hoisting in most cases.
1.Variable declaration hoisting
Lets understand this by this piece of code.
a = 5; // Assign 5 to a
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = a; // Display a in the element
var a; // Declare a
//output-> 5
Here declaration of variable a will be hosted to top invisibly by the javascript interpreter at the time of compilation. So we were able to get value of a. But this approach of declaration of variables is not recommended as we should declare variables to top already like this.
var a = 5; // Assign and declare 5 to a
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = a; // Display a in the element
// output -> 5
consider another example.
function foo() {
console.log(x)
var x = 1;
}
is actually interpreted like this:
function foo() {
var x;
console.log(x)
x = 1;
}
In this case x will be undefined
It does not matter if the code has executed which contains the declaration of variable. Consider this example.
function foo() {
if (false) {
var a = 1;
}
return;
var b = 1;
}
This function turns out to be like this.
function foo() {
var a, b;
if (false) {
a = 1;
}
return;
b = 1;
}
In variable declaration only variable definition hoists, not the assignment.
Function declaration hoisting
Unlike the variable hoisting the function body or assigned value will also be hoisted. Consider this code
function demo() {
foo(); // this will give error because it is variable hoisting
bar(); // "this will run!" as it is function hoisting
var foo = function () {
alert("this would not run!!");
}
function bar() {
alert("this will run!!");
}
}
demo();
Now as we understood both variable and function hoisting, let's understand this code now.
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
alert(a);
This code will turn out to be like this.
var a = 1; //defines "a" in global scope
function b() {
var a = function () {}; //defines "a" in local scope
a = 10; //overwrites local variable "a"
return;
}
b();
alert(a);
The function a() will have local scope inside b(). a() will be moved to top while interpreting the code with its definition (only in case of function hoisting) so a now will have local scope and therefore will not affect the global scope of a while having its own scope inside function b().

From my piece of knowledge, hoisting happens with the variable declaration and function declaration, for example:
a = 7;
var a;
console.log(a)
What happens inside JavaScript's engine:
var a;
a = 7;
console.log(a);
// 7
Or:
console.log(square(7)); // Output: 49
function square(n) { return n * n; }
It will become:
function square(n) { return n * n; }
console.log(square(7)); // 49
But assignments such as variable assigment, function expression assignment will not be hoisted:
For example:
console.log(x);
var x = 7; // undefined
It may become like this:
var x;
console.log(x); // undefined
x = 7;

To describe hosting in javascript in one sentence is variables and functions are hoisted to the top of the scope that they are declared in.
I am assuming you are a beginner, to understand hoisting properly at first we have understood the difference between undefined and ReferenceError
var v;
console.log(v);
console.log(abc);
/*
The output of the above codes are:
undefined
ReferenceError: abc is not defined*/
now in the bellow code what we see? a variable and a function expression is decleard.
<script>
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
</script>
but the real picture with proof that the both variable and function are hoisted on the top of there scope:
console.log(totalAmo);
console.log(getSum(8,9));
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
console.log(totalAmo);
console.log(getSum(9,7));
Output of first two logs are undefined and TypeError: getSum is not a function because both var totalAmo and getSum are hoisted on the top of their scope like bellow
<script>
var totalAmo;
var getSum;
console.log(totalAmo);
console.log(getSum(8,9));
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
console.log(totalAmo);
console.log(getSum(9,7));
</script>
But for functions declaration whole functions hoisted on the top of their scope.
console.log(getId());
function getId(){
return 739373;
}
/* output: 739373, because the whole function hoisted on the top of the scope.*/
Now the same logic goes for those varibale, functions experessions and function declaratoins declared inside functional scope. Key point: they will not be hoisted on the top of the file;
function functionScope(){
var totalAmo;
var getSum;
console.log(totalAmo);
console.log(getSum(8,9));
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
}
So, when you use var keyword, variable and function hoisted on the top of there scope (global scope and function scope).
What about let and const, const and let are still both aware of the global scope and function scope just like var is, but const and let variables are also aware of another scope called blocked scope. a block scope is present whenever there is a block of code, such as for loop, if else statement, while loop etc.
When we use const and let to declare a variable in these block scope, the variable declaration only will be hoisted on the top of that block that it is in, and it will not be hoisted on the top of the parent function or top of the global scope that it is hoisted.
function getTotal(){
let total=0;
for(var i = 0; i<10; i++){
let valueToAdd = i;
var multiplier = 2;
total += valueToAdd*multiplier;
}
return total;
}
Variables in abobe example will be hoisted like bellow
function getTotal(){
let total;
var multiplier;
total = 0;
for(var i = 0; i<10; i++){
let valueToAdd;
valueToAdd = i;
multiplier = 2;
total += valueToAdd*multiplier;
}
return total;
}

ES5: function hoisting & variable hoisting
function hoisting priority is greater than variable hoisting
"use strict";
/**
*
* #author xgqfrms
* #license MIT
* #copyright xgqfrms
* #created 2016-06-01
* #modified
*
* #description function-hoisting.js
* #augments
* #example
* #link
*
*/
(function() {
const log = console.log;
var a = 1;
function b() {
a = 10;
log(`local a`, a)
return;
// function hoisting priority is greater than variable hoisting
function a() {}
}
b();
log(`global a`, a);
// local a 10
// global a 1
})();
which is equal to
(function() {
const log = console.log;
// define "a" in global scope
var a = 1;
function b() {
// define "a" in local scope
var a ;
// assign function to a
a = function () {};
// overwrites local variable "a"
a = 10;
log(`local a`, a);
return;
}
b();
// log global variable "a"
log(`global a`, a);
// local a 10
// global a 1
})();
the reason behind of hoisting
var a = 1;
//"a" is global scope
function b() {
var a = function () {};
//"a" is local scope
var x = 12;
//"x" is local scope
a = 10;
//global variable "a" was overwrited by the local variable "a"
console.log("local a =" + a);
return console.log("local x = " + x);
}
b();
// local a =10
// local x = 12
console.log("global a = " + a);
// global a = 1
console.log("can't access local x = \n");
// can't access local x =
console.log(x);
// ReferenceError: x is not defined
/**
* scpope & closure & hoisting (var/function)
*
* 1. scpope : the global var can be access in any place(the whole file scope), local var only can be accessed by the local scope(function/block scope)!
* Note: if a local variable not using var keywords in a function, it will become a global variable!
*
* 2. closure : a function inner the other function, which can access local scope(parent function) & global scope, howerver it's vars can't be accessed by others! unless, your return it as return value!
*
* 3. hoisting : move all declare/undeclare vars/function to the scope top, than assign the value or null!
* Note: it just move the declare, not move the value!
*
*/
ES6 let, const no exist hoisting
(() => {
const log = console.log;
log(a)
// Error: Uncaught ReferenceError: Cannot access 'a' before initialization
let a = 1;
})();
(() => {
const log = console.log;
log(b)
// Error: Uncaught ReferenceError: Cannot access 'b' before initialization
const b = 1;
})();
refs
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

I just read a great article about JavaScript Scoping and Hoisting by Ben Cherry in which he gives the following example:
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
alert(a);
Using the code above, the browser will alert "1".
I'm still unsure why it returns "1". Some of the things he says come to mind like:
All the function declarations are hoisted to the top. You can scope a variable using function. Still doesn't click for me.

Function hoisting means that functions are moved to the top of their scope. That is,
function b() {
a = 10;
return;
function a() {}
}
will be rewritten by the interpeter to this
function b() {
function a() {}
a = 10;
return;
}
Weird, eh?
Also, in this instance,
function a() {}
behaved the same as
var a = function () {};
So, in essence, this is what the code is doing:
var a = 1; //defines "a" in global scope
function b() {
var a = function () {}; //defines "a" in local scope
a = 10; //overwrites local variable "a"
return;
}
b();
alert(a); //alerts global variable "a"

What you have to remember is that it parses the whole function and resolves all the variables declarations before executing it. So....
function a() {}
really becomes
var a = function () {}
var a forces it into a local scope, and variable scope is through the entire function, so the global a variable is still 1 because you have declared a into a local scope by making it a function.

The function a is hoisted inside function b:
var a = 1;
function b() {
function a() {}
a = 10;
return;
}
b();
alert(a);
which is almost like using var:
var a = 1;
function b() {
var a = function () {};
a = 10;
return;
}
b();
alert(a);
The function is declared locally, and setting a only happens in the local scope, not the global var.

function declaration function a(){} is hoisted first and it behaves like var a = function () {};, hence in local scope a is created.
If you have two variable with same name (one in global another in local), local variable always get precedence over global variable.
When you set a=10, you are setting the local variable a , not the global one.
Hence, the value of global variable remain same and you get, alerted 1

Suprisingly, none of the answers here mention the relevancy of the Execution Context in the Scope Chain.
The JavaScript Engine wraps the currently executing code in an Execution Context. The base execution context is the global Execution Context. Each time a new function is invoked, a new Execution Context is created and put on the Execution Stack. Think of a Stack Frame sitting on an Invocation Stack in other programming languages. Last in first out. Now each Execution Context has its own Variable Environment and Outer Environment in JavaScript.
I will use the below example as a demonstration.
1) First, we enter the Creation Phase of the global Execution Context. Both the Outer Environment and Variable Environment of the Lexical Environment are created. The Global Object is setup and placed in memory with the special variable 'this' pointing to it. The function a and its code and the variable myVar with an undefined value are placed in memory in the global Variable Environment. it's important to note that function a's code is not executed. It is just placed in memory with function a.
2) Second, it is the Execution Phase of the Execution Context. myVar is no longer an undefined value. It is initialized with value of 1, which is stored in the global Variable Environment. The function a is invoked and a new Execution Context is created.
3) In the function a's Execution Context, it goes through the Creation and Execution Phase of its own Execution Context. It has its own Outer Environment and Variable Environment, thus, its own Lexical Environment. The function b and the variable myVar are stored in its Variable Environment. This Variable Environment is distinct from the global Variable Environment. Since the function a sits lexically (physically in code) on the same level as the global Execution Context, its Outer Environment is the global Execution Context. Thus, if the function a was to refer to a variable that is not in its Variable Environment, it will search the Scope Chain and try to find the variable in the Variable Environment of the global Execution Context.
4) The function b is invoked in function a. A new Execution Context is created. Since it sits lexically in function a, its Outer Environment is a. So when it references myVar, since myVar is not in function b's Variable Environment, it will look in function a's Variable Environment. It finds it there and console.log prints 2. But if the variable was not in function a's Variable Environment, then since function a's Outer Environment is the global Execution Context, then the Scope Chain will continue searching there.
5) After function b and a are finished execution, they are popped from the Execution Stack. The single-threaded JavaScript Engine continues execution at the global Execution Context. It invokes the b function. But there is no b function in the global Variable Environment and there is no other Outer Environment to search in the global Execution Context. Thus an exception is raised by the JavaScript Engine.
function a(){
function b(){
console.log(myVar);
}
var myVar = 2;
b();
}
var myVar = 1;
a();
b();
> 2
> Uncaught ReferenceError: b is not defined
The below example shows the Scope Chain in action. In the function b's Execution Context's Variable Environment, there is no myVar. So it searches its Outer Environment, which is the function a. The function a does not have myVar in its Variable Environment either. So the Engine searches function a's Outer Environment, which is the global Execution Context's Outer Environment and myVar is defined there. Hence, the console.log prints 1.
function a(){
function b(){
console.log(myVar);
}
b();
}
var myVar = 1;
a();
> 1
Regarding Execution Context and the Lexical Environment associated with it, including Outer Environment and Variable Environment, enable the scoping of variables in JavaScript. Even if you invoke the same function multiple times, for each invocation, it will create its own Execution Context. So each Execution Context will have its own copy of the variables in its Variable Environment. There is no sharing of variables.

function a() { } is a function statement, which creates an a variable local to the b function.
Variables are created when a function is parsed, regardless of whether the var or function statement gets executed.
a = 10 sets this local variable.

What is the bone of contention in this small snippet of code?
Case 1:
Include function a(){} definition inside the body of function b as follows. logs value of a = 1
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
console.log(a); // logs a = 1
Case 2
Exclude function a(){} definition inside the body of function b as follows. logs value of a = 10
var a = 1;
function b() {
a = 10; // overwrites the value of global 'var a'
return;
}
b();
console.log(a); // logs a = 10
Observation will help you realise that statement console.log(a) logs the following values.
Case 1 : a = 1
Case 2 : a = 10
Posits
var a has been defined and declared lexically in the global scope.
a=10 This statement is reassigning value to 10, it lexically sits inside the function b.
Explanation of both the cases
Because of function definition with name property a is same as the variable a. The variable a inside the function body b becomes a local variable. The previous line implies that the global value of a remains intact and the local value of a is updated to 10.
So, what we intend to say is that the code below
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
console.log(a); // logs a = 1
It is interpreted by the JS interpreter as follows.
var a = 1;
function b() {
function a() {}
a = 10;
return;
}
b();
console.log(a); // logs a = 1
However, when we remove the function a(){} definition, the value of 'a' declared and defined outside the function b, that value gets overwritten and it changes to 10 in case 2. The value gets overwritten because a=10 refers to the global declaration and if it were to be declared locally we must have written var a = 10;.
var a = 1;
function b() {
var a = 10; // here var a is declared and defined locally because it uses a var keyword.
return;
}
b();
console.log(a); // logs a = 1
We can clarify our doubt further by changing the name property in function a(){} definition to some other name than 'a'
var a = 1;
function b() {
a = 10; // here var a is declared and defined locally because it uses a var keyword.
return;
function foo() {}
}
b();
console.log(a); // logs a = 1

Hoisting is a concept made for us to make it easier to understand. What actually happens is the declarations are done first with respect to their scopes and the assignments will happen after that(not at the same time).
When the declarations happen, var a, then function b and inside that b scope, function a is declared.
This function a will shadow the variable a coming from the global scope.
After the declarations are done, the values assign will start, the global a will get the value 1 and the a inside function b will get 10.
when you do alert(a), it will call the actual global scope variable.
This little change to the code will make it more clear
var a = 1;
function b() {
a = 10;
return a;
function a() { }
}
alert(b());
alert(a);

It is happening because of the Variable name is same as the function name means "a".
Thus due to Javascript hoisting it try to solve the naming conflict and it will return a = 1.
I was also confused about this until i read this post on "JavaScript Hoisting" http://www.ufthelp.com/2014/11/JavaScript-Hoisting.html
Hope it helps.

Here's my recap of the answer with more annotation and an acompaniying fiddle to play around with.
// hoisting_example.js
// top of scope ie. global var a = 1
var a = 1;
// new scope due to js' functional (not block) level scope
function b() {
a = 10; // if the function 'a' didn't exist in this scope, global a = 10
return; // the return illustrates that function 'a' is hoisted to top
function a(){}; // 'a' will be hoisted to top as var a = function(){};
}
// exec 'b' and you would expect to see a = 10 in subsequent alert
// but the interpreter acutally 'hoisted' the function 'a' within 'b'
// and in doing so, created a new named variable 'a'
// which is a function within b's scope
b();
// a will alert 1, see comment above
alert(a);
https://jsfiddle.net/adjavaherian/fffpxjx7/

scpope & closure & hoisting (var/function)
scpope : the global var can be access in any place(the whole file
scope), local var only can be accessed by the local
scope(function/block scope)!
Note: if a local variable not using
var keywords in a function, it will become a global variable!
closure : a function inner the other function, which can access
local scope(parent function) & global scope, howerver it's vars
can't be accessed by others! unless, your return it as return value!
hoisting : move all declare/undeclare vars/function to the scope
top, than assign the value or null!
Note: it just move the declare,not move the value!
var a = 1;
//"a" is global scope
function b() {
var a = function () {};
//"a" is local scope
var x = 12;
//"x" is local scope
a = 10;
//global variable "a" was overwrited by the local variable "a"
console.log("local a =" + a);
return console.log("local x = " + x);
}
b();
// local a =10
// local x = 12
console.log("global a = " + a);
// global a = 1
console.log("can't access local x = \n");
// can't access local x =
console.log(x);
// ReferenceError: x is not defined

Hoisting In JavaScript means, variable declarations are executed through out the program before any code is executed. Therefore declaring a variable anywhere in the code is equivalent to declaring it at the beginning.

Its all depends on the scope of variable 'a'. Let me explain by creating scopes as images.
Here JavaScript will create 3 scopes.
i) Global scope.
ii) Function b() scope.
iii) Function a() scope.
Its clear when you call 'alert' method scope belongs to Global that time, so it will pick value of variable 'a' from Global scope only that is 1.

Long Post!
But it will clear the air!
The way Java Script works is that it involves a two step process:
Compilation(so to speak) - This step registers variables and function declarations and their respective scope. It does not involve evaluating function expression: var a = function(){} or variable expression (like assigning 3 to x in case of var x =3; which is nothing but the evaluation of R.H.S part.)
Interpreter: This is the execution/evaluation part.
Check the output of below code to get an understanding:
//b() can be called here!
//c() cannot be called.
console.log("a is " + a);
console.log("b is " + b);
console.log("c is " + c);
var a = 1;
console.log("Now, a is " + a);
var c = function() {};
console.log("Now c is " + c);
function b() {
//cannot write the below line:
//console.log(e);
//since e is not declared.
e = 10; //Java script interpreter after traversing from this function scope chain to global scope, is unable to find this variable and eventually initialises it with value 10 in global scope.
console.log("e is " + e) // works!
console.log("f is " + f);
var f = 7;
console.log("Now f is " + f);
console.log("d is " + d);
return;
function d() {}
}
b();
console.log(a);
Lets break it:
In the compilation phase,
'a' would be registered under global scope with value 'undefined'.
Same goes for 'c', its value at this moment would be 'undefined' and not the 'function()'.
'b' would be registered as a function in the global scope.
Inside b's scope, 'f' would be registered as a variable which would be undefined at this moment and function 'd' would be registered.
When interpreter runs, declared variables and function() (and not expressions) can be accessed before the interpreter reaches the actual expression line. So, variables would be printed 'undefined' and declared anonymous function can be called earlier. However, trying to access undeclared variable before its expression initialisation would result in an error like:
console.log(e)
e = 3;
Now, what happens when you have variable and function declaration with same name.
Answer is - functions are always hoisted before and if the same name variable is declared, it is treated as duplicate and ignored. Remember, order does not matter. Functions are always given precedence. But during evaluation phase you can change the variable reference to anything (It stores whatever was the last assignment) Have a look at the below code:
var a = 1;
console.log("a is " + a);
function b() {
console.log("a inside the function b is " + a); //interpreter finds 'a' as function() in current scope. No need to go outside the scope to find 'a'.
a = 3; //a changed
console.log("Now a is " + a);
return;
function a() {}
}
var a; //treated as duplicate and ignored.
b();
console.log("a is still " + a + " in global scope"); //This is global scope a.

Hoisting is behavioural concept of JavaScript. Hoisting (say moving) is concept that explains how and where variables should be declared.
In JavaScript, a variable can be declared after it has been used because Function declarations and variable declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the JavaScript interpreter.
We encounter two types of hoisting in most cases.
1.Variable declaration hoisting
Lets understand this by this piece of code.
a = 5; // Assign 5 to a
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = a; // Display a in the element
var a; // Declare a
//output-> 5
Here declaration of variable a will be hosted to top invisibly by the javascript interpreter at the time of compilation. So we were able to get value of a. But this approach of declaration of variables is not recommended as we should declare variables to top already like this.
var a = 5; // Assign and declare 5 to a
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = a; // Display a in the element
// output -> 5
consider another example.
function foo() {
console.log(x)
var x = 1;
}
is actually interpreted like this:
function foo() {
var x;
console.log(x)
x = 1;
}
In this case x will be undefined
It does not matter if the code has executed which contains the declaration of variable. Consider this example.
function foo() {
if (false) {
var a = 1;
}
return;
var b = 1;
}
This function turns out to be like this.
function foo() {
var a, b;
if (false) {
a = 1;
}
return;
b = 1;
}
In variable declaration only variable definition hoists, not the assignment.
Function declaration hoisting
Unlike the variable hoisting the function body or assigned value will also be hoisted. Consider this code
function demo() {
foo(); // this will give error because it is variable hoisting
bar(); // "this will run!" as it is function hoisting
var foo = function () {
alert("this would not run!!");
}
function bar() {
alert("this will run!!");
}
}
demo();
Now as we understood both variable and function hoisting, let's understand this code now.
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
alert(a);
This code will turn out to be like this.
var a = 1; //defines "a" in global scope
function b() {
var a = function () {}; //defines "a" in local scope
a = 10; //overwrites local variable "a"
return;
}
b();
alert(a);
The function a() will have local scope inside b(). a() will be moved to top while interpreting the code with its definition (only in case of function hoisting) so a now will have local scope and therefore will not affect the global scope of a while having its own scope inside function b().

From my piece of knowledge, hoisting happens with the variable declaration and function declaration, for example:
a = 7;
var a;
console.log(a)
What happens inside JavaScript's engine:
var a;
a = 7;
console.log(a);
// 7
Or:
console.log(square(7)); // Output: 49
function square(n) { return n * n; }
It will become:
function square(n) { return n * n; }
console.log(square(7)); // 49
But assignments such as variable assigment, function expression assignment will not be hoisted:
For example:
console.log(x);
var x = 7; // undefined
It may become like this:
var x;
console.log(x); // undefined
x = 7;

To describe hosting in javascript in one sentence is variables and functions are hoisted to the top of the scope that they are declared in.
I am assuming you are a beginner, to understand hoisting properly at first we have understood the difference between undefined and ReferenceError
var v;
console.log(v);
console.log(abc);
/*
The output of the above codes are:
undefined
ReferenceError: abc is not defined*/
now in the bellow code what we see? a variable and a function expression is decleard.
<script>
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
</script>
but the real picture with proof that the both variable and function are hoisted on the top of there scope:
console.log(totalAmo);
console.log(getSum(8,9));
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
console.log(totalAmo);
console.log(getSum(9,7));
Output of first two logs are undefined and TypeError: getSum is not a function because both var totalAmo and getSum are hoisted on the top of their scope like bellow
<script>
var totalAmo;
var getSum;
console.log(totalAmo);
console.log(getSum(8,9));
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
console.log(totalAmo);
console.log(getSum(9,7));
</script>
But for functions declaration whole functions hoisted on the top of their scope.
console.log(getId());
function getId(){
return 739373;
}
/* output: 739373, because the whole function hoisted on the top of the scope.*/
Now the same logic goes for those varibale, functions experessions and function declaratoins declared inside functional scope. Key point: they will not be hoisted on the top of the file;
function functionScope(){
var totalAmo;
var getSum;
console.log(totalAmo);
console.log(getSum(8,9));
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
}
So, when you use var keyword, variable and function hoisted on the top of there scope (global scope and function scope).
What about let and const, const and let are still both aware of the global scope and function scope just like var is, but const and let variables are also aware of another scope called blocked scope. a block scope is present whenever there is a block of code, such as for loop, if else statement, while loop etc.
When we use const and let to declare a variable in these block scope, the variable declaration only will be hoisted on the top of that block that it is in, and it will not be hoisted on the top of the parent function or top of the global scope that it is hoisted.
function getTotal(){
let total=0;
for(var i = 0; i<10; i++){
let valueToAdd = i;
var multiplier = 2;
total += valueToAdd*multiplier;
}
return total;
}
Variables in abobe example will be hoisted like bellow
function getTotal(){
let total;
var multiplier;
total = 0;
for(var i = 0; i<10; i++){
let valueToAdd;
valueToAdd = i;
multiplier = 2;
total += valueToAdd*multiplier;
}
return total;
}

ES5: function hoisting & variable hoisting
function hoisting priority is greater than variable hoisting
"use strict";
/**
*
* #author xgqfrms
* #license MIT
* #copyright xgqfrms
* #created 2016-06-01
* #modified
*
* #description function-hoisting.js
* #augments
* #example
* #link
*
*/
(function() {
const log = console.log;
var a = 1;
function b() {
a = 10;
log(`local a`, a)
return;
// function hoisting priority is greater than variable hoisting
function a() {}
}
b();
log(`global a`, a);
// local a 10
// global a 1
})();
which is equal to
(function() {
const log = console.log;
// define "a" in global scope
var a = 1;
function b() {
// define "a" in local scope
var a ;
// assign function to a
a = function () {};
// overwrites local variable "a"
a = 10;
log(`local a`, a);
return;
}
b();
// log global variable "a"
log(`global a`, a);
// local a 10
// global a 1
})();
the reason behind of hoisting
var a = 1;
//"a" is global scope
function b() {
var a = function () {};
//"a" is local scope
var x = 12;
//"x" is local scope
a = 10;
//global variable "a" was overwrited by the local variable "a"
console.log("local a =" + a);
return console.log("local x = " + x);
}
b();
// local a =10
// local x = 12
console.log("global a = " + a);
// global a = 1
console.log("can't access local x = \n");
// can't access local x =
console.log(x);
// ReferenceError: x is not defined
/**
* scpope & closure & hoisting (var/function)
*
* 1. scpope : the global var can be access in any place(the whole file scope), local var only can be accessed by the local scope(function/block scope)!
* Note: if a local variable not using var keywords in a function, it will become a global variable!
*
* 2. closure : a function inner the other function, which can access local scope(parent function) & global scope, howerver it's vars can't be accessed by others! unless, your return it as return value!
*
* 3. hoisting : move all declare/undeclare vars/function to the scope top, than assign the value or null!
* Note: it just move the declare, not move the value!
*
*/
ES6 let, const no exist hoisting
(() => {
const log = console.log;
log(a)
// Error: Uncaught ReferenceError: Cannot access 'a' before initialization
let a = 1;
})();
(() => {
const log = console.log;
log(b)
// Error: Uncaught ReferenceError: Cannot access 'b' before initialization
const b = 1;
})();
refs
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

I just read a great article about JavaScript Scoping and Hoisting by Ben Cherry in which he gives the following example:
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
alert(a);
Using the code above, the browser will alert "1".
I'm still unsure why it returns "1". Some of the things he says come to mind like:
All the function declarations are hoisted to the top. You can scope a variable using function. Still doesn't click for me.

Function hoisting means that functions are moved to the top of their scope. That is,
function b() {
a = 10;
return;
function a() {}
}
will be rewritten by the interpeter to this
function b() {
function a() {}
a = 10;
return;
}
Weird, eh?
Also, in this instance,
function a() {}
behaved the same as
var a = function () {};
So, in essence, this is what the code is doing:
var a = 1; //defines "a" in global scope
function b() {
var a = function () {}; //defines "a" in local scope
a = 10; //overwrites local variable "a"
return;
}
b();
alert(a); //alerts global variable "a"

What you have to remember is that it parses the whole function and resolves all the variables declarations before executing it. So....
function a() {}
really becomes
var a = function () {}
var a forces it into a local scope, and variable scope is through the entire function, so the global a variable is still 1 because you have declared a into a local scope by making it a function.

The function a is hoisted inside function b:
var a = 1;
function b() {
function a() {}
a = 10;
return;
}
b();
alert(a);
which is almost like using var:
var a = 1;
function b() {
var a = function () {};
a = 10;
return;
}
b();
alert(a);
The function is declared locally, and setting a only happens in the local scope, not the global var.

function declaration function a(){} is hoisted first and it behaves like var a = function () {};, hence in local scope a is created.
If you have two variable with same name (one in global another in local), local variable always get precedence over global variable.
When you set a=10, you are setting the local variable a , not the global one.
Hence, the value of global variable remain same and you get, alerted 1

Suprisingly, none of the answers here mention the relevancy of the Execution Context in the Scope Chain.
The JavaScript Engine wraps the currently executing code in an Execution Context. The base execution context is the global Execution Context. Each time a new function is invoked, a new Execution Context is created and put on the Execution Stack. Think of a Stack Frame sitting on an Invocation Stack in other programming languages. Last in first out. Now each Execution Context has its own Variable Environment and Outer Environment in JavaScript.
I will use the below example as a demonstration.
1) First, we enter the Creation Phase of the global Execution Context. Both the Outer Environment and Variable Environment of the Lexical Environment are created. The Global Object is setup and placed in memory with the special variable 'this' pointing to it. The function a and its code and the variable myVar with an undefined value are placed in memory in the global Variable Environment. it's important to note that function a's code is not executed. It is just placed in memory with function a.
2) Second, it is the Execution Phase of the Execution Context. myVar is no longer an undefined value. It is initialized with value of 1, which is stored in the global Variable Environment. The function a is invoked and a new Execution Context is created.
3) In the function a's Execution Context, it goes through the Creation and Execution Phase of its own Execution Context. It has its own Outer Environment and Variable Environment, thus, its own Lexical Environment. The function b and the variable myVar are stored in its Variable Environment. This Variable Environment is distinct from the global Variable Environment. Since the function a sits lexically (physically in code) on the same level as the global Execution Context, its Outer Environment is the global Execution Context. Thus, if the function a was to refer to a variable that is not in its Variable Environment, it will search the Scope Chain and try to find the variable in the Variable Environment of the global Execution Context.
4) The function b is invoked in function a. A new Execution Context is created. Since it sits lexically in function a, its Outer Environment is a. So when it references myVar, since myVar is not in function b's Variable Environment, it will look in function a's Variable Environment. It finds it there and console.log prints 2. But if the variable was not in function a's Variable Environment, then since function a's Outer Environment is the global Execution Context, then the Scope Chain will continue searching there.
5) After function b and a are finished execution, they are popped from the Execution Stack. The single-threaded JavaScript Engine continues execution at the global Execution Context. It invokes the b function. But there is no b function in the global Variable Environment and there is no other Outer Environment to search in the global Execution Context. Thus an exception is raised by the JavaScript Engine.
function a(){
function b(){
console.log(myVar);
}
var myVar = 2;
b();
}
var myVar = 1;
a();
b();
> 2
> Uncaught ReferenceError: b is not defined
The below example shows the Scope Chain in action. In the function b's Execution Context's Variable Environment, there is no myVar. So it searches its Outer Environment, which is the function a. The function a does not have myVar in its Variable Environment either. So the Engine searches function a's Outer Environment, which is the global Execution Context's Outer Environment and myVar is defined there. Hence, the console.log prints 1.
function a(){
function b(){
console.log(myVar);
}
b();
}
var myVar = 1;
a();
> 1
Regarding Execution Context and the Lexical Environment associated with it, including Outer Environment and Variable Environment, enable the scoping of variables in JavaScript. Even if you invoke the same function multiple times, for each invocation, it will create its own Execution Context. So each Execution Context will have its own copy of the variables in its Variable Environment. There is no sharing of variables.

function a() { } is a function statement, which creates an a variable local to the b function.
Variables are created when a function is parsed, regardless of whether the var or function statement gets executed.
a = 10 sets this local variable.

What is the bone of contention in this small snippet of code?
Case 1:
Include function a(){} definition inside the body of function b as follows. logs value of a = 1
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
console.log(a); // logs a = 1
Case 2
Exclude function a(){} definition inside the body of function b as follows. logs value of a = 10
var a = 1;
function b() {
a = 10; // overwrites the value of global 'var a'
return;
}
b();
console.log(a); // logs a = 10
Observation will help you realise that statement console.log(a) logs the following values.
Case 1 : a = 1
Case 2 : a = 10
Posits
var a has been defined and declared lexically in the global scope.
a=10 This statement is reassigning value to 10, it lexically sits inside the function b.
Explanation of both the cases
Because of function definition with name property a is same as the variable a. The variable a inside the function body b becomes a local variable. The previous line implies that the global value of a remains intact and the local value of a is updated to 10.
So, what we intend to say is that the code below
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
console.log(a); // logs a = 1
It is interpreted by the JS interpreter as follows.
var a = 1;
function b() {
function a() {}
a = 10;
return;
}
b();
console.log(a); // logs a = 1
However, when we remove the function a(){} definition, the value of 'a' declared and defined outside the function b, that value gets overwritten and it changes to 10 in case 2. The value gets overwritten because a=10 refers to the global declaration and if it were to be declared locally we must have written var a = 10;.
var a = 1;
function b() {
var a = 10; // here var a is declared and defined locally because it uses a var keyword.
return;
}
b();
console.log(a); // logs a = 1
We can clarify our doubt further by changing the name property in function a(){} definition to some other name than 'a'
var a = 1;
function b() {
a = 10; // here var a is declared and defined locally because it uses a var keyword.
return;
function foo() {}
}
b();
console.log(a); // logs a = 1

Hoisting is a concept made for us to make it easier to understand. What actually happens is the declarations are done first with respect to their scopes and the assignments will happen after that(not at the same time).
When the declarations happen, var a, then function b and inside that b scope, function a is declared.
This function a will shadow the variable a coming from the global scope.
After the declarations are done, the values assign will start, the global a will get the value 1 and the a inside function b will get 10.
when you do alert(a), it will call the actual global scope variable.
This little change to the code will make it more clear
var a = 1;
function b() {
a = 10;
return a;
function a() { }
}
alert(b());
alert(a);

It is happening because of the Variable name is same as the function name means "a".
Thus due to Javascript hoisting it try to solve the naming conflict and it will return a = 1.
I was also confused about this until i read this post on "JavaScript Hoisting" http://www.ufthelp.com/2014/11/JavaScript-Hoisting.html
Hope it helps.

Here's my recap of the answer with more annotation and an acompaniying fiddle to play around with.
// hoisting_example.js
// top of scope ie. global var a = 1
var a = 1;
// new scope due to js' functional (not block) level scope
function b() {
a = 10; // if the function 'a' didn't exist in this scope, global a = 10
return; // the return illustrates that function 'a' is hoisted to top
function a(){}; // 'a' will be hoisted to top as var a = function(){};
}
// exec 'b' and you would expect to see a = 10 in subsequent alert
// but the interpreter acutally 'hoisted' the function 'a' within 'b'
// and in doing so, created a new named variable 'a'
// which is a function within b's scope
b();
// a will alert 1, see comment above
alert(a);
https://jsfiddle.net/adjavaherian/fffpxjx7/

scpope & closure & hoisting (var/function)
scpope : the global var can be access in any place(the whole file
scope), local var only can be accessed by the local
scope(function/block scope)!
Note: if a local variable not using
var keywords in a function, it will become a global variable!
closure : a function inner the other function, which can access
local scope(parent function) & global scope, howerver it's vars
can't be accessed by others! unless, your return it as return value!
hoisting : move all declare/undeclare vars/function to the scope
top, than assign the value or null!
Note: it just move the declare,not move the value!
var a = 1;
//"a" is global scope
function b() {
var a = function () {};
//"a" is local scope
var x = 12;
//"x" is local scope
a = 10;
//global variable "a" was overwrited by the local variable "a"
console.log("local a =" + a);
return console.log("local x = " + x);
}
b();
// local a =10
// local x = 12
console.log("global a = " + a);
// global a = 1
console.log("can't access local x = \n");
// can't access local x =
console.log(x);
// ReferenceError: x is not defined

Hoisting In JavaScript means, variable declarations are executed through out the program before any code is executed. Therefore declaring a variable anywhere in the code is equivalent to declaring it at the beginning.

Its all depends on the scope of variable 'a'. Let me explain by creating scopes as images.
Here JavaScript will create 3 scopes.
i) Global scope.
ii) Function b() scope.
iii) Function a() scope.
Its clear when you call 'alert' method scope belongs to Global that time, so it will pick value of variable 'a' from Global scope only that is 1.

Long Post!
But it will clear the air!
The way Java Script works is that it involves a two step process:
Compilation(so to speak) - This step registers variables and function declarations and their respective scope. It does not involve evaluating function expression: var a = function(){} or variable expression (like assigning 3 to x in case of var x =3; which is nothing but the evaluation of R.H.S part.)
Interpreter: This is the execution/evaluation part.
Check the output of below code to get an understanding:
//b() can be called here!
//c() cannot be called.
console.log("a is " + a);
console.log("b is " + b);
console.log("c is " + c);
var a = 1;
console.log("Now, a is " + a);
var c = function() {};
console.log("Now c is " + c);
function b() {
//cannot write the below line:
//console.log(e);
//since e is not declared.
e = 10; //Java script interpreter after traversing from this function scope chain to global scope, is unable to find this variable and eventually initialises it with value 10 in global scope.
console.log("e is " + e) // works!
console.log("f is " + f);
var f = 7;
console.log("Now f is " + f);
console.log("d is " + d);
return;
function d() {}
}
b();
console.log(a);
Lets break it:
In the compilation phase,
'a' would be registered under global scope with value 'undefined'.
Same goes for 'c', its value at this moment would be 'undefined' and not the 'function()'.
'b' would be registered as a function in the global scope.
Inside b's scope, 'f' would be registered as a variable which would be undefined at this moment and function 'd' would be registered.
When interpreter runs, declared variables and function() (and not expressions) can be accessed before the interpreter reaches the actual expression line. So, variables would be printed 'undefined' and declared anonymous function can be called earlier. However, trying to access undeclared variable before its expression initialisation would result in an error like:
console.log(e)
e = 3;
Now, what happens when you have variable and function declaration with same name.
Answer is - functions are always hoisted before and if the same name variable is declared, it is treated as duplicate and ignored. Remember, order does not matter. Functions are always given precedence. But during evaluation phase you can change the variable reference to anything (It stores whatever was the last assignment) Have a look at the below code:
var a = 1;
console.log("a is " + a);
function b() {
console.log("a inside the function b is " + a); //interpreter finds 'a' as function() in current scope. No need to go outside the scope to find 'a'.
a = 3; //a changed
console.log("Now a is " + a);
return;
function a() {}
}
var a; //treated as duplicate and ignored.
b();
console.log("a is still " + a + " in global scope"); //This is global scope a.

Hoisting is behavioural concept of JavaScript. Hoisting (say moving) is concept that explains how and where variables should be declared.
In JavaScript, a variable can be declared after it has been used because Function declarations and variable declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the JavaScript interpreter.
We encounter two types of hoisting in most cases.
1.Variable declaration hoisting
Lets understand this by this piece of code.
a = 5; // Assign 5 to a
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = a; // Display a in the element
var a; // Declare a
//output-> 5
Here declaration of variable a will be hosted to top invisibly by the javascript interpreter at the time of compilation. So we were able to get value of a. But this approach of declaration of variables is not recommended as we should declare variables to top already like this.
var a = 5; // Assign and declare 5 to a
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = a; // Display a in the element
// output -> 5
consider another example.
function foo() {
console.log(x)
var x = 1;
}
is actually interpreted like this:
function foo() {
var x;
console.log(x)
x = 1;
}
In this case x will be undefined
It does not matter if the code has executed which contains the declaration of variable. Consider this example.
function foo() {
if (false) {
var a = 1;
}
return;
var b = 1;
}
This function turns out to be like this.
function foo() {
var a, b;
if (false) {
a = 1;
}
return;
b = 1;
}
In variable declaration only variable definition hoists, not the assignment.
Function declaration hoisting
Unlike the variable hoisting the function body or assigned value will also be hoisted. Consider this code
function demo() {
foo(); // this will give error because it is variable hoisting
bar(); // "this will run!" as it is function hoisting
var foo = function () {
alert("this would not run!!");
}
function bar() {
alert("this will run!!");
}
}
demo();
Now as we understood both variable and function hoisting, let's understand this code now.
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
alert(a);
This code will turn out to be like this.
var a = 1; //defines "a" in global scope
function b() {
var a = function () {}; //defines "a" in local scope
a = 10; //overwrites local variable "a"
return;
}
b();
alert(a);
The function a() will have local scope inside b(). a() will be moved to top while interpreting the code with its definition (only in case of function hoisting) so a now will have local scope and therefore will not affect the global scope of a while having its own scope inside function b().

From my piece of knowledge, hoisting happens with the variable declaration and function declaration, for example:
a = 7;
var a;
console.log(a)
What happens inside JavaScript's engine:
var a;
a = 7;
console.log(a);
// 7
Or:
console.log(square(7)); // Output: 49
function square(n) { return n * n; }
It will become:
function square(n) { return n * n; }
console.log(square(7)); // 49
But assignments such as variable assigment, function expression assignment will not be hoisted:
For example:
console.log(x);
var x = 7; // undefined
It may become like this:
var x;
console.log(x); // undefined
x = 7;

To describe hosting in javascript in one sentence is variables and functions are hoisted to the top of the scope that they are declared in.
I am assuming you are a beginner, to understand hoisting properly at first we have understood the difference between undefined and ReferenceError
var v;
console.log(v);
console.log(abc);
/*
The output of the above codes are:
undefined
ReferenceError: abc is not defined*/
now in the bellow code what we see? a variable and a function expression is decleard.
<script>
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
</script>
but the real picture with proof that the both variable and function are hoisted on the top of there scope:
console.log(totalAmo);
console.log(getSum(8,9));
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
console.log(totalAmo);
console.log(getSum(9,7));
Output of first two logs are undefined and TypeError: getSum is not a function because both var totalAmo and getSum are hoisted on the top of their scope like bellow
<script>
var totalAmo;
var getSum;
console.log(totalAmo);
console.log(getSum(8,9));
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
console.log(totalAmo);
console.log(getSum(9,7));
</script>
But for functions declaration whole functions hoisted on the top of their scope.
console.log(getId());
function getId(){
return 739373;
}
/* output: 739373, because the whole function hoisted on the top of the scope.*/
Now the same logic goes for those varibale, functions experessions and function declaratoins declared inside functional scope. Key point: they will not be hoisted on the top of the file;
function functionScope(){
var totalAmo;
var getSum;
console.log(totalAmo);
console.log(getSum(8,9));
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
}
So, when you use var keyword, variable and function hoisted on the top of there scope (global scope and function scope).
What about let and const, const and let are still both aware of the global scope and function scope just like var is, but const and let variables are also aware of another scope called blocked scope. a block scope is present whenever there is a block of code, such as for loop, if else statement, while loop etc.
When we use const and let to declare a variable in these block scope, the variable declaration only will be hoisted on the top of that block that it is in, and it will not be hoisted on the top of the parent function or top of the global scope that it is hoisted.
function getTotal(){
let total=0;
for(var i = 0; i<10; i++){
let valueToAdd = i;
var multiplier = 2;
total += valueToAdd*multiplier;
}
return total;
}
Variables in abobe example will be hoisted like bellow
function getTotal(){
let total;
var multiplier;
total = 0;
for(var i = 0; i<10; i++){
let valueToAdd;
valueToAdd = i;
multiplier = 2;
total += valueToAdd*multiplier;
}
return total;
}

ES5: function hoisting & variable hoisting
function hoisting priority is greater than variable hoisting
"use strict";
/**
*
* #author xgqfrms
* #license MIT
* #copyright xgqfrms
* #created 2016-06-01
* #modified
*
* #description function-hoisting.js
* #augments
* #example
* #link
*
*/
(function() {
const log = console.log;
var a = 1;
function b() {
a = 10;
log(`local a`, a)
return;
// function hoisting priority is greater than variable hoisting
function a() {}
}
b();
log(`global a`, a);
// local a 10
// global a 1
})();
which is equal to
(function() {
const log = console.log;
// define "a" in global scope
var a = 1;
function b() {
// define "a" in local scope
var a ;
// assign function to a
a = function () {};
// overwrites local variable "a"
a = 10;
log(`local a`, a);
return;
}
b();
// log global variable "a"
log(`global a`, a);
// local a 10
// global a 1
})();
the reason behind of hoisting
var a = 1;
//"a" is global scope
function b() {
var a = function () {};
//"a" is local scope
var x = 12;
//"x" is local scope
a = 10;
//global variable "a" was overwrited by the local variable "a"
console.log("local a =" + a);
return console.log("local x = " + x);
}
b();
// local a =10
// local x = 12
console.log("global a = " + a);
// global a = 1
console.log("can't access local x = \n");
// can't access local x =
console.log(x);
// ReferenceError: x is not defined
/**
* scpope & closure & hoisting (var/function)
*
* 1. scpope : the global var can be access in any place(the whole file scope), local var only can be accessed by the local scope(function/block scope)!
* Note: if a local variable not using var keywords in a function, it will become a global variable!
*
* 2. closure : a function inner the other function, which can access local scope(parent function) & global scope, howerver it's vars can't be accessed by others! unless, your return it as return value!
*
* 3. hoisting : move all declare/undeclare vars/function to the scope top, than assign the value or null!
* Note: it just move the declare, not move the value!
*
*/
ES6 let, const no exist hoisting
(() => {
const log = console.log;
log(a)
// Error: Uncaught ReferenceError: Cannot access 'a' before initialization
let a = 1;
})();
(() => {
const log = console.log;
log(b)
// Error: Uncaught ReferenceError: Cannot access 'b' before initialization
const b = 1;
})();
refs
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

I just read a great article about JavaScript Scoping and Hoisting by Ben Cherry in which he gives the following example:
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
alert(a);
Using the code above, the browser will alert "1".
I'm still unsure why it returns "1". Some of the things he says come to mind like:
All the function declarations are hoisted to the top. You can scope a variable using function. Still doesn't click for me.

Function hoisting means that functions are moved to the top of their scope. That is,
function b() {
a = 10;
return;
function a() {}
}
will be rewritten by the interpeter to this
function b() {
function a() {}
a = 10;
return;
}
Weird, eh?
Also, in this instance,
function a() {}
behaved the same as
var a = function () {};
So, in essence, this is what the code is doing:
var a = 1; //defines "a" in global scope
function b() {
var a = function () {}; //defines "a" in local scope
a = 10; //overwrites local variable "a"
return;
}
b();
alert(a); //alerts global variable "a"

What you have to remember is that it parses the whole function and resolves all the variables declarations before executing it. So....
function a() {}
really becomes
var a = function () {}
var a forces it into a local scope, and variable scope is through the entire function, so the global a variable is still 1 because you have declared a into a local scope by making it a function.

The function a is hoisted inside function b:
var a = 1;
function b() {
function a() {}
a = 10;
return;
}
b();
alert(a);
which is almost like using var:
var a = 1;
function b() {
var a = function () {};
a = 10;
return;
}
b();
alert(a);
The function is declared locally, and setting a only happens in the local scope, not the global var.

function declaration function a(){} is hoisted first and it behaves like var a = function () {};, hence in local scope a is created.
If you have two variable with same name (one in global another in local), local variable always get precedence over global variable.
When you set a=10, you are setting the local variable a , not the global one.
Hence, the value of global variable remain same and you get, alerted 1

Suprisingly, none of the answers here mention the relevancy of the Execution Context in the Scope Chain.
The JavaScript Engine wraps the currently executing code in an Execution Context. The base execution context is the global Execution Context. Each time a new function is invoked, a new Execution Context is created and put on the Execution Stack. Think of a Stack Frame sitting on an Invocation Stack in other programming languages. Last in first out. Now each Execution Context has its own Variable Environment and Outer Environment in JavaScript.
I will use the below example as a demonstration.
1) First, we enter the Creation Phase of the global Execution Context. Both the Outer Environment and Variable Environment of the Lexical Environment are created. The Global Object is setup and placed in memory with the special variable 'this' pointing to it. The function a and its code and the variable myVar with an undefined value are placed in memory in the global Variable Environment. it's important to note that function a's code is not executed. It is just placed in memory with function a.
2) Second, it is the Execution Phase of the Execution Context. myVar is no longer an undefined value. It is initialized with value of 1, which is stored in the global Variable Environment. The function a is invoked and a new Execution Context is created.
3) In the function a's Execution Context, it goes through the Creation and Execution Phase of its own Execution Context. It has its own Outer Environment and Variable Environment, thus, its own Lexical Environment. The function b and the variable myVar are stored in its Variable Environment. This Variable Environment is distinct from the global Variable Environment. Since the function a sits lexically (physically in code) on the same level as the global Execution Context, its Outer Environment is the global Execution Context. Thus, if the function a was to refer to a variable that is not in its Variable Environment, it will search the Scope Chain and try to find the variable in the Variable Environment of the global Execution Context.
4) The function b is invoked in function a. A new Execution Context is created. Since it sits lexically in function a, its Outer Environment is a. So when it references myVar, since myVar is not in function b's Variable Environment, it will look in function a's Variable Environment. It finds it there and console.log prints 2. But if the variable was not in function a's Variable Environment, then since function a's Outer Environment is the global Execution Context, then the Scope Chain will continue searching there.
5) After function b and a are finished execution, they are popped from the Execution Stack. The single-threaded JavaScript Engine continues execution at the global Execution Context. It invokes the b function. But there is no b function in the global Variable Environment and there is no other Outer Environment to search in the global Execution Context. Thus an exception is raised by the JavaScript Engine.
function a(){
function b(){
console.log(myVar);
}
var myVar = 2;
b();
}
var myVar = 1;
a();
b();
> 2
> Uncaught ReferenceError: b is not defined
The below example shows the Scope Chain in action. In the function b's Execution Context's Variable Environment, there is no myVar. So it searches its Outer Environment, which is the function a. The function a does not have myVar in its Variable Environment either. So the Engine searches function a's Outer Environment, which is the global Execution Context's Outer Environment and myVar is defined there. Hence, the console.log prints 1.
function a(){
function b(){
console.log(myVar);
}
b();
}
var myVar = 1;
a();
> 1
Regarding Execution Context and the Lexical Environment associated with it, including Outer Environment and Variable Environment, enable the scoping of variables in JavaScript. Even if you invoke the same function multiple times, for each invocation, it will create its own Execution Context. So each Execution Context will have its own copy of the variables in its Variable Environment. There is no sharing of variables.

function a() { } is a function statement, which creates an a variable local to the b function.
Variables are created when a function is parsed, regardless of whether the var or function statement gets executed.
a = 10 sets this local variable.

What is the bone of contention in this small snippet of code?
Case 1:
Include function a(){} definition inside the body of function b as follows. logs value of a = 1
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
console.log(a); // logs a = 1
Case 2
Exclude function a(){} definition inside the body of function b as follows. logs value of a = 10
var a = 1;
function b() {
a = 10; // overwrites the value of global 'var a'
return;
}
b();
console.log(a); // logs a = 10
Observation will help you realise that statement console.log(a) logs the following values.
Case 1 : a = 1
Case 2 : a = 10
Posits
var a has been defined and declared lexically in the global scope.
a=10 This statement is reassigning value to 10, it lexically sits inside the function b.
Explanation of both the cases
Because of function definition with name property a is same as the variable a. The variable a inside the function body b becomes a local variable. The previous line implies that the global value of a remains intact and the local value of a is updated to 10.
So, what we intend to say is that the code below
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
console.log(a); // logs a = 1
It is interpreted by the JS interpreter as follows.
var a = 1;
function b() {
function a() {}
a = 10;
return;
}
b();
console.log(a); // logs a = 1
However, when we remove the function a(){} definition, the value of 'a' declared and defined outside the function b, that value gets overwritten and it changes to 10 in case 2. The value gets overwritten because a=10 refers to the global declaration and if it were to be declared locally we must have written var a = 10;.
var a = 1;
function b() {
var a = 10; // here var a is declared and defined locally because it uses a var keyword.
return;
}
b();
console.log(a); // logs a = 1
We can clarify our doubt further by changing the name property in function a(){} definition to some other name than 'a'
var a = 1;
function b() {
a = 10; // here var a is declared and defined locally because it uses a var keyword.
return;
function foo() {}
}
b();
console.log(a); // logs a = 1

Hoisting is a concept made for us to make it easier to understand. What actually happens is the declarations are done first with respect to their scopes and the assignments will happen after that(not at the same time).
When the declarations happen, var a, then function b and inside that b scope, function a is declared.
This function a will shadow the variable a coming from the global scope.
After the declarations are done, the values assign will start, the global a will get the value 1 and the a inside function b will get 10.
when you do alert(a), it will call the actual global scope variable.
This little change to the code will make it more clear
var a = 1;
function b() {
a = 10;
return a;
function a() { }
}
alert(b());
alert(a);

It is happening because of the Variable name is same as the function name means "a".
Thus due to Javascript hoisting it try to solve the naming conflict and it will return a = 1.
I was also confused about this until i read this post on "JavaScript Hoisting" http://www.ufthelp.com/2014/11/JavaScript-Hoisting.html
Hope it helps.

Here's my recap of the answer with more annotation and an acompaniying fiddle to play around with.
// hoisting_example.js
// top of scope ie. global var a = 1
var a = 1;
// new scope due to js' functional (not block) level scope
function b() {
a = 10; // if the function 'a' didn't exist in this scope, global a = 10
return; // the return illustrates that function 'a' is hoisted to top
function a(){}; // 'a' will be hoisted to top as var a = function(){};
}
// exec 'b' and you would expect to see a = 10 in subsequent alert
// but the interpreter acutally 'hoisted' the function 'a' within 'b'
// and in doing so, created a new named variable 'a'
// which is a function within b's scope
b();
// a will alert 1, see comment above
alert(a);
https://jsfiddle.net/adjavaherian/fffpxjx7/

scpope & closure & hoisting (var/function)
scpope : the global var can be access in any place(the whole file
scope), local var only can be accessed by the local
scope(function/block scope)!
Note: if a local variable not using
var keywords in a function, it will become a global variable!
closure : a function inner the other function, which can access
local scope(parent function) & global scope, howerver it's vars
can't be accessed by others! unless, your return it as return value!
hoisting : move all declare/undeclare vars/function to the scope
top, than assign the value or null!
Note: it just move the declare,not move the value!
var a = 1;
//"a" is global scope
function b() {
var a = function () {};
//"a" is local scope
var x = 12;
//"x" is local scope
a = 10;
//global variable "a" was overwrited by the local variable "a"
console.log("local a =" + a);
return console.log("local x = " + x);
}
b();
// local a =10
// local x = 12
console.log("global a = " + a);
// global a = 1
console.log("can't access local x = \n");
// can't access local x =
console.log(x);
// ReferenceError: x is not defined

Hoisting In JavaScript means, variable declarations are executed through out the program before any code is executed. Therefore declaring a variable anywhere in the code is equivalent to declaring it at the beginning.

Its all depends on the scope of variable 'a'. Let me explain by creating scopes as images.
Here JavaScript will create 3 scopes.
i) Global scope.
ii) Function b() scope.
iii) Function a() scope.
Its clear when you call 'alert' method scope belongs to Global that time, so it will pick value of variable 'a' from Global scope only that is 1.

Long Post!
But it will clear the air!
The way Java Script works is that it involves a two step process:
Compilation(so to speak) - This step registers variables and function declarations and their respective scope. It does not involve evaluating function expression: var a = function(){} or variable expression (like assigning 3 to x in case of var x =3; which is nothing but the evaluation of R.H.S part.)
Interpreter: This is the execution/evaluation part.
Check the output of below code to get an understanding:
//b() can be called here!
//c() cannot be called.
console.log("a is " + a);
console.log("b is " + b);
console.log("c is " + c);
var a = 1;
console.log("Now, a is " + a);
var c = function() {};
console.log("Now c is " + c);
function b() {
//cannot write the below line:
//console.log(e);
//since e is not declared.
e = 10; //Java script interpreter after traversing from this function scope chain to global scope, is unable to find this variable and eventually initialises it with value 10 in global scope.
console.log("e is " + e) // works!
console.log("f is " + f);
var f = 7;
console.log("Now f is " + f);
console.log("d is " + d);
return;
function d() {}
}
b();
console.log(a);
Lets break it:
In the compilation phase,
'a' would be registered under global scope with value 'undefined'.
Same goes for 'c', its value at this moment would be 'undefined' and not the 'function()'.
'b' would be registered as a function in the global scope.
Inside b's scope, 'f' would be registered as a variable which would be undefined at this moment and function 'd' would be registered.
When interpreter runs, declared variables and function() (and not expressions) can be accessed before the interpreter reaches the actual expression line. So, variables would be printed 'undefined' and declared anonymous function can be called earlier. However, trying to access undeclared variable before its expression initialisation would result in an error like:
console.log(e)
e = 3;
Now, what happens when you have variable and function declaration with same name.
Answer is - functions are always hoisted before and if the same name variable is declared, it is treated as duplicate and ignored. Remember, order does not matter. Functions are always given precedence. But during evaluation phase you can change the variable reference to anything (It stores whatever was the last assignment) Have a look at the below code:
var a = 1;
console.log("a is " + a);
function b() {
console.log("a inside the function b is " + a); //interpreter finds 'a' as function() in current scope. No need to go outside the scope to find 'a'.
a = 3; //a changed
console.log("Now a is " + a);
return;
function a() {}
}
var a; //treated as duplicate and ignored.
b();
console.log("a is still " + a + " in global scope"); //This is global scope a.

Hoisting is behavioural concept of JavaScript. Hoisting (say moving) is concept that explains how and where variables should be declared.
In JavaScript, a variable can be declared after it has been used because Function declarations and variable declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the JavaScript interpreter.
We encounter two types of hoisting in most cases.
1.Variable declaration hoisting
Lets understand this by this piece of code.
a = 5; // Assign 5 to a
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = a; // Display a in the element
var a; // Declare a
//output-> 5
Here declaration of variable a will be hosted to top invisibly by the javascript interpreter at the time of compilation. So we were able to get value of a. But this approach of declaration of variables is not recommended as we should declare variables to top already like this.
var a = 5; // Assign and declare 5 to a
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = a; // Display a in the element
// output -> 5
consider another example.
function foo() {
console.log(x)
var x = 1;
}
is actually interpreted like this:
function foo() {
var x;
console.log(x)
x = 1;
}
In this case x will be undefined
It does not matter if the code has executed which contains the declaration of variable. Consider this example.
function foo() {
if (false) {
var a = 1;
}
return;
var b = 1;
}
This function turns out to be like this.
function foo() {
var a, b;
if (false) {
a = 1;
}
return;
b = 1;
}
In variable declaration only variable definition hoists, not the assignment.
Function declaration hoisting
Unlike the variable hoisting the function body or assigned value will also be hoisted. Consider this code
function demo() {
foo(); // this will give error because it is variable hoisting
bar(); // "this will run!" as it is function hoisting
var foo = function () {
alert("this would not run!!");
}
function bar() {
alert("this will run!!");
}
}
demo();
Now as we understood both variable and function hoisting, let's understand this code now.
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
alert(a);
This code will turn out to be like this.
var a = 1; //defines "a" in global scope
function b() {
var a = function () {}; //defines "a" in local scope
a = 10; //overwrites local variable "a"
return;
}
b();
alert(a);
The function a() will have local scope inside b(). a() will be moved to top while interpreting the code with its definition (only in case of function hoisting) so a now will have local scope and therefore will not affect the global scope of a while having its own scope inside function b().

From my piece of knowledge, hoisting happens with the variable declaration and function declaration, for example:
a = 7;
var a;
console.log(a)
What happens inside JavaScript's engine:
var a;
a = 7;
console.log(a);
// 7
Or:
console.log(square(7)); // Output: 49
function square(n) { return n * n; }
It will become:
function square(n) { return n * n; }
console.log(square(7)); // 49
But assignments such as variable assigment, function expression assignment will not be hoisted:
For example:
console.log(x);
var x = 7; // undefined
It may become like this:
var x;
console.log(x); // undefined
x = 7;

To describe hosting in javascript in one sentence is variables and functions are hoisted to the top of the scope that they are declared in.
I am assuming you are a beginner, to understand hoisting properly at first we have understood the difference between undefined and ReferenceError
var v;
console.log(v);
console.log(abc);
/*
The output of the above codes are:
undefined
ReferenceError: abc is not defined*/
now in the bellow code what we see? a variable and a function expression is decleard.
<script>
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
</script>
but the real picture with proof that the both variable and function are hoisted on the top of there scope:
console.log(totalAmo);
console.log(getSum(8,9));
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
console.log(totalAmo);
console.log(getSum(9,7));
Output of first two logs are undefined and TypeError: getSum is not a function because both var totalAmo and getSum are hoisted on the top of their scope like bellow
<script>
var totalAmo;
var getSum;
console.log(totalAmo);
console.log(getSum(8,9));
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
console.log(totalAmo);
console.log(getSum(9,7));
</script>
But for functions declaration whole functions hoisted on the top of their scope.
console.log(getId());
function getId(){
return 739373;
}
/* output: 739373, because the whole function hoisted on the top of the scope.*/
Now the same logic goes for those varibale, functions experessions and function declaratoins declared inside functional scope. Key point: they will not be hoisted on the top of the file;
function functionScope(){
var totalAmo;
var getSum;
console.log(totalAmo);
console.log(getSum(8,9));
var totalAmo = 8;
var getSum = function(a, b){
return a+b;
}
}
So, when you use var keyword, variable and function hoisted on the top of there scope (global scope and function scope).
What about let and const, const and let are still both aware of the global scope and function scope just like var is, but const and let variables are also aware of another scope called blocked scope. a block scope is present whenever there is a block of code, such as for loop, if else statement, while loop etc.
When we use const and let to declare a variable in these block scope, the variable declaration only will be hoisted on the top of that block that it is in, and it will not be hoisted on the top of the parent function or top of the global scope that it is hoisted.
function getTotal(){
let total=0;
for(var i = 0; i<10; i++){
let valueToAdd = i;
var multiplier = 2;
total += valueToAdd*multiplier;
}
return total;
}
Variables in abobe example will be hoisted like bellow
function getTotal(){
let total;
var multiplier;
total = 0;
for(var i = 0; i<10; i++){
let valueToAdd;
valueToAdd = i;
multiplier = 2;
total += valueToAdd*multiplier;
}
return total;
}

ES5: function hoisting & variable hoisting
function hoisting priority is greater than variable hoisting
"use strict";
/**
*
* #author xgqfrms
* #license MIT
* #copyright xgqfrms
* #created 2016-06-01
* #modified
*
* #description function-hoisting.js
* #augments
* #example
* #link
*
*/
(function() {
const log = console.log;
var a = 1;
function b() {
a = 10;
log(`local a`, a)
return;
// function hoisting priority is greater than variable hoisting
function a() {}
}
b();
log(`global a`, a);
// local a 10
// global a 1
})();
which is equal to
(function() {
const log = console.log;
// define "a" in global scope
var a = 1;
function b() {
// define "a" in local scope
var a ;
// assign function to a
a = function () {};
// overwrites local variable "a"
a = 10;
log(`local a`, a);
return;
}
b();
// log global variable "a"
log(`global a`, a);
// local a 10
// global a 1
})();
the reason behind of hoisting
var a = 1;
//"a" is global scope
function b() {
var a = function () {};
//"a" is local scope
var x = 12;
//"x" is local scope
a = 10;
//global variable "a" was overwrited by the local variable "a"
console.log("local a =" + a);
return console.log("local x = " + x);
}
b();
// local a =10
// local x = 12
console.log("global a = " + a);
// global a = 1
console.log("can't access local x = \n");
// can't access local x =
console.log(x);
// ReferenceError: x is not defined
/**
* scpope & closure & hoisting (var/function)
*
* 1. scpope : the global var can be access in any place(the whole file scope), local var only can be accessed by the local scope(function/block scope)!
* Note: if a local variable not using var keywords in a function, it will become a global variable!
*
* 2. closure : a function inner the other function, which can access local scope(parent function) & global scope, howerver it's vars can't be accessed by others! unless, your return it as return value!
*
* 3. hoisting : move all declare/undeclare vars/function to the scope top, than assign the value or null!
* Note: it just move the declare, not move the value!
*
*/
ES6 let, const no exist hoisting
(() => {
const log = console.log;
log(a)
// Error: Uncaught ReferenceError: Cannot access 'a' before initialization
let a = 1;
})();
(() => {
const log = console.log;
log(b)
// Error: Uncaught ReferenceError: Cannot access 'b' before initialization
const b = 1;
})();
refs
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const