What is hoisting ?
Hoisting is the process of arranging all the program codes in proper way and allowing users to use them without errors.
What is hosting in javascript ?
This is a javascript process of moving all the declaration to the top of the code.
We all know javascript is not a compiled programming language.
However, javascript engine compiles the code line by line.
What happens inside javascript ?
variables and functions declarations are put into memory during the compilation process before the code is executed.
During the compilation process we may get the following errors.
1. ReferenceError
2. TypeError
3. undefined
Javascript advanced course !!!
Click to Learn More about – Javascript online learning
1. Reference error.
This occurs when we try to call a variable which is not declared.
Example :
<script>
document.writeln("Reference Error <br/>");
document.writeln("Variable b is called before initializing the Sum() function <br/>");
console.log("The value of b = " + b);
function Sum(){
var a = 10;
var b = 20;
}
</script>
Output :
2. Reference error inside a function
This occurs when we try to call a variable which is not declared.
Example :
<script>
document.writeln("Reference Error inside the function<br/>");
function printValue(){
document.writeln("The value of a = " + a + "<br/>");
document.writeln("The value of b = " + b + "<br/>");
var a = 10;
var b = 20;
var c = 30;
document.writeln("The value of c = " + c + "<br/>");
}
printValue();
document.writeln("The value of c = " + c + "<br/>");
</script>
Output :
3. Type error
This occurs when a value of the variable is not of the expected type.
Example :
<script>
document.writeln("Type Error <br/>");
document.writeln("Declaring a variable a = 10 <br/>");
var a = 10;
document.writeln("When calling the variable as a function a();<br/>");
a();
</script>
Output :
4. Type error inside a function
This occurs when a value of the variable is not of the expected type.
Example :
<script>
document.writeln("Type Error inside the function<br/>");
function printValue(){
var a = 10;
var b = 20;
var c = 30;
document.writeln("The value of a = " + a + "<br/>");
document.writeln("The value of b = " + b + "<br/>");
document.writeln("The value of c = " + c + "<br/>");
a();
}
printValue();
</script>
Output :
5. Undefined error
This occurs when the variable called has no assigned value or is not initialised.
Example :
<script>
document.writeln("Undefined Error <br/>");
document.writeln("Calling a variable before declaring<br/>");
console.log("The value of a = " + a);
var a = 10;
document.writeln("When calling the variable before decalring, throws undefined error<br/>");
</script>
Output :
6. Undefined error inside function
This occurs when the variable called has no assigned value or is not initialised.
Example :
<script>
document.writeln("Type Error inside the function<br/>");
function printValue(){
var a = 10;
var b = 20;
var c = 30;
document.writeln("The value of a = " + a + "<br/>");
document.writeln("The value of b = " + b + "<br/>");
document.writeln("The value of c = " + c + "<br/>");
a();
}
printValue();
</script>
Output :
How to avoid these errors ?
Javascript hoisting process should be handled.
Moving all the declarations at the top of the scope before code execution.
So whenever we call the variables or functions its reference is available in the top.
This process avoids errors.
Example :
<script>
var x = 100;
var y = 200;
var z = 300;
document.writeln("The value of x = " + x + "<br/>");
document.writeln("The value of y = " + y + "<br/>");
document.writeln("The value of z = " + z + "<br/>");
function printValue(){
var a = 10;
var b = 20;
var c = 30;
document.writeln("The value of a = " + a + "<br/>");
document.writeln("The value of b = " + b + "<br/>");
document.writeln("The value of c = " + c + "<br/>");
}
printValue();
</script>
Output :
