Scribd
Upload
12 views

25 JavaScript Hoisting

Js hoisting

Uploaded by

vineethaiml
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

25 JavaScript Hoisting

Js hoisting

Uploaded by

vineethaiml
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

JAVASCRIPT HOISTING

What is Hoisting?

In JavaScript, all variable and function declarations are moved or hoisted to


the top of their current scope, regardless of where it is defined. This is the
default behavior of JavaScript interpreter which is called hoisting.

Function Hoisting

Functions that are defined using a function declaration are automatically


hoisted. That means they can be called before they have been defined.
// Calling function before declaration
sayHello(); // Outputs: Hello, I'm hoisted!
function sayHello() {
alert("Hello, I'm hoisted!");
}

As you can see, we've called the sayHello() function before it is defined, but
the code still works. This is because the function declaration is hoisted to the
top automatically behind the scenes.

Variable Hoisting

Similarly, the variable declarations are also hoisted to the top of their current
scope automatically. This means that if the variable is declared inside a
function block, it will be moved at the top of the function, but if it is declared
outside any function it will be moved to top of the script and become globally
available.
str = "Hello World!";
alert(str); // Outputs: Hello World!
var str;

However, JavaScript only hoists declarations, not initializations. That means if a


variable is declared and initialized after using it, the value will be undefined.
alert(str); // Outputs: undefined
var str;
str = "Hello World!";

Here's another example demonstrating the variable hoisting behavior of


JavaScript:
var i = 1; // Declare and initialize i
alert(i + ", " + j); // Outputs: 1, undefined
var j = 2; // Declare and initialize j
var x = 5; // Declare and initialize x
var y; // Declare y
alert(x + ", " + y); // Outputs: 5, undefined
y = 10; // Initialize y
var a = 3; // Declare and initialize a
b = 6; // Initialize b
alert(a + ", " + b); // Outputs: 3, 6
var b; // Declare b
var u = 4; // Declare and initialize u
alert(u + ", " + v); // Outputs: 4, undefined
var v; // Declare v
v = 8; // Initialize v

Variable hoisting may seem a little bit confusing at first glance, but if you go
through these examples carefully you will easily understand how it works.

JAVASCRIPT CLOSURES
Understanding the JavaScript Closures

In the JavaScript functions chapter you've learnt that in JavaScript a


variable's scope can be global or local.

A global variable can be accessed and manipulated anywhere in the program,


whereas a local variable can only be accessed and manipulated by the function
they are declared in.

However, there are certain situations when you want a variable to be available
throughout the script, but you don't want just any part of your code to be able
to change its value accidently.
// Global variable
var counter = 0;
// A function dedicated to manipulate the 'counter' variable
function makeCounter() {
return counter += 1;
}
// Calling the function
makeCounter();
console.log(counter); // Prints: 1
makeCounter();
console.log(counter); // Prints: 2
// Trying to manipulate the 'counter' variable from outside
counter = 10;
console.log(counter); // Prints: 10

As you can see in the above example, the value of the counter variable can be
changed from anywhere in the program, without calling
the makeCounter() function.
function makeCounter() {
// Local variable
var counter = 0; // Manipulating the 'counter' variable
return counter += 1;
}
// Calling the function
console .log(makeCounter()); // Prints: 1
console .log(makeCounter()); // Prints: 1

In this case the counter variable cannot be manipulated from outside, since it is
local to makeCounter() function, but its value will also not increase after
subsequent function call, because every time we call the function it reset
the counter variable value, which you can clearly see in the above example (line
no-11). The JavaScript closure can solve our problem.

A closure is basically an inner function that has access to the parent function's
scope, even after the parent function has finished executing. This is
accomplished by creating a function inside another function.
function makeCounter() {
var counter = 0;
// Nested function
function make() {
counter += 1; return counter;
}
return make;
}
/* Execute the makeCounter() function and store the returned
value in the myCounter variable */
var myCounter = makeCounter();
console .log(myCounter()); // Prints: 1
console .log(myCounter()); // Prints: 2

You might also like