Thank you for printing our content at www.domain-name.com.
Please check back soon for new
contents.
(https://programiz.pro?utm_source=programiz-top-
CODING Try hands-on coding bar&utm_campaign=programiz&utm_medium=referral)
PRO with Programiz PRO
36% OFF Claim Discount Now
Search tutorials & examples
(/)
www.domain-name.com
JavaScript Hoisting
In this tutorial, you will learn about JavaScript hoisting
with the help of examples.
Hoisting in JavaScript is a behavior in which a function or
a variable can be used before declaration. For example,
// using test before declaring
console.log(test); // undefined
var test;
Run Code (/javascript/online-compiler)
The above program works and the output will be
undefined . The above program behaves as
// using test before declaring
var test;
console.log(test); // undefined
Run Code (/javascript/online-compiler)
Since the
Thank you for printing variable
our content test is only declared
at www.domain-name.com. and check
Please has noback soon for new
contents.
value, undefined value is assigned to it.
(https://programiz.pro?utm_source=programiz-top-
CODING TryIf you want
hands-on to learn more
coding about variables, visit JavaScript
bar&utm_campaign=programiz&utm_medium=referral)
PRO with Programiz(/javascript/variables-constants).
Variables PRO
36% OFF Claim Discount Now
Note: In hoisting, though it seems that the
Search tutorials & examples
(/)
declaration has moved up in the program, the
www.domain-name.com
actual thing that happens is that the function and
variable declarations are added to memory during
the compile phase.
Variable Hoisting
In terms of variables and constants, keyword var is
hoisted and let and const does not allow hoisting.
For example,
// program to display value
a = 5;
console.log(a);
var a; // 5
Run Code (/javascript/online-compiler)
In the above example, variable a is used before
declaring it. And the program works and displays the
output 5 . The program behaves as:
// program to display value
var a;
a = 5;
console.log(a); // 5
Thank you for printing our content at www.domain-name.com. Please check back soon for new
Run Code (/javascript/online-compiler)
contents.
(https://programiz.pro?utm_source=programiz-top-
CODING Try hands-on coding bar&utm_campaign=programiz&utm_medium=referral)
PRO with Programiz PRO
36% OFF Claim Discount Now
However in JavaScript, initializations are not hoisted. For
example,
Search tutorials & examples
(/)
www.domain-name.com
// program to display value
console.log(a);
var a = 5;
Run Code (/javascript/online-compiler)
Output
undefined
The above program behaves as:
var a;
console.log(a);
a = 5;
Run Code (/javascript/online-compiler)
Only the declaration is moved to the memory in the
compile phase. Hence, the value of variable a is
undefined because a is printed without initializing it.
Thank you for printing our content at www.domain-name.com. Please check back soon for new
contents.
(https://programiz.pro?utm_source=programiz-top-
CODING Try hands-on coding bar&utm_campaign=programiz&utm_medium=referral)
PRO with Programiz PRO
36% OFF Claim Discount Now
Search tutorials & examples
(/)
Also, when the variable is used inside the function, the
www.domain-name.com
variable is hoisted only to the top of the function. For
example,
// program to display value
var a = 4;
function greet() {
b = 'hello';
console.log(b); // hello
var b;
}
greet(); // hello
console.log(b);
Run Code (/javascript/online-compiler)
Output
hello
Uncaught ReferenceError: b is not defined
In the above example, variable b is hoisted to the top of
the function greet and becomes a local variable. Hence
b is only accessible inside the function. b does not
become a global variable.
To learn more about local and global variables, visit
JavaScript Variable Scope
(https://www.programiz.com/javascript/variable-scope).
Thank you for printing our content at www.domain-name.com. Please check back soon for new
contents. Note: In hoisting, the variable declaration is only
accessible to the immediate scope.
(https://programiz.pro?utm_source=programiz-top-
CODING Try hands-on coding bar&utm_campaign=programiz&utm_medium=referral)
PRO with Programiz PRO
36% OFF Claim Discount Now
If a variable is used
Search with the
tutorials let keyword, that variable is
& examples
(/)
not hoisted. For example,
www.domain-name.com
// program to display value
a = 5;
console.log(a);
let a; // error
Run Code (/javascript/online-compiler)
Output
Uncaught ReferenceError: Cannot access 'a' before initial
While using let , the variable must be declared first.
Function Hoisting
A function can be called before declaring it. For example,
// program to print the text
greet();
function greet() {
console.log('Hi, there.');
}
Run Code (/javascript/online-compiler)
Output
Thank you for printing our content at www.domain-name.com. Please check back soon for new
Hi, there
contents.
(https://programiz.pro?utm_source=programiz-top-
CODING TryIn the above
hands-on program, the function greet is called before
coding bar&utm_campaign=programiz&utm_medium=referral)
PRO declaring
with ProgramizitPRO
and the program shows the output. This is due
36% OFF Claim Discount Now
to hoisting.
Search tutorials & examples
(/)
www.domain-name.com
However, when a function is used as an expression, an
error occurs because only declarations are hoisted. For
example;
// program to print the text
greet();
let greet = function() {
console.log('Hi, there.');
}
Run Code (/javascript/online-compiler)
Output
Uncaught ReferenceError: greet is not defined
If var was used in the above program, the error would be:
Uncaught TypeError: greet is not a function
Note: Generally, hoisting is not performed in other
programming languages like Python, C, C++, Java.
Hoisting can cause undesirable outcomes in your
program. And it is best to declare variables and
functions first before using them and avoid
hoisting.
Thank you for printing our content at www.domain-name.com. Please check back soon for new
contents.
In the case of variables, it is better to use let than
(https://programiz.pro?utm_source=programiz-top-
CODING var . coding
Try hands-on bar&utm_campaign=programiz&utm_medium=referral)
PRO with Programiz PRO
36% OFF Claim Discount Now
Search tutorials & examples
(/) Next Tutorial:
www.domain-name.com (/javascript/recursion)
JS Recursion
Previous Tutorial:
(/javascript/variable-scope)
JS Variable Scope
Share on:
(https://www.facebook.com/sharer/sharer.php? (https://twitter.com/in
u=https://www.programiz.com/javascript/hoisting) text=Check%20this%
Did you find this article helpful?
Related
Thank you for printing Tutorials
our content at www.domain-name.com. Please check back soon for new
contents.
JavaScript Tutorial
(https://programiz.pro?utm_source=programiz-top-
CODING Try hands-on coding bar&utm_campaign=programiz&utm_medium=referral)
JavaScript let Vs var
PRO with Programiz PRO
36% OFF Claim Discount Now
Search tutorials & examples
(/javascript/let-vs-var)
(/)
JavaScript Tutorial www.domain-name.com
JavaScript Variable Scope
(/javascript/variable-scope)
JavaScript Tutorial
JavaScript Classes
(/javascript/classes)
JavaScript Tutorial
JavaScript Function and Function Expressions
(/javascript/function)
