hoistedVariable = 3;

console.log(hoistedVariable); // outputs 3 even when the variable is declared after it is initialized   

var hoistedVariable;

/*Hoisting is JavaScript's default behavior of moving 

all declarations to the top of the current scope (script or function).

Be carefull that only declaration gets hoisted NOT the initialitations*/

​

var x = 5;

alert("x is  = "+x+". y is = "+y);//result => x is = 5. y is = undefined.

var y = 7;

​

/*

note that the code doesn't produce the error "y is not defined" like

it would if we would omit y. It executes but not in the way you would want.

*/

​

Within the function, we first declare the name 

variable with the var keyword. This means that 

the variable gets hoisted (memory space is set 

up during the creation phase) with the default 

value of undefined, until we actually get to the 

line where we define the variable. We haven't defined

the variable yet on the line where we try to log the 

name variable, so it still holds the value of undefined.

​

Variables with the let keyword (and const) are hoisted,

but unlike var, don't get initialized. They are not

accessible before the line we declare (initialize) 

them. This is called the "temporal dead zone". When we 

try to access the variables before they are declared, 

JavaScript throws a ReferenceError.

​

function sayHi() {

  console.log(name);

  console.log(age);

  var name = 'Lydia';

  let age = 21;

}

​

sayHi();

​

​

​

// why does javascript have hoisting?

​

As Stoyan Stefanov explains in "JavaScript Patterns" book, the hoisting is 

result of JavaScript interpreter implementation.

​

The JS code interpretation is performed in two passes. 

a) During the first pass, the interpreter processes 

variable[NOT the initialitations] and function declarations.

​

b)The second pass is the actual code execution step. The interpreter processes 

function expressions and undeclared variables.

​

Thus, we can use the "hoisting" concept to describe such behavior.

console.log(functionBelow("Hello"));

var functionBelow = function(greet) {

   return `${greet} world`;

}

console.log(functionBelow("Hi"));

/*

Hoisting in JavaScript is a behavior in which a function 

or a variable can be used before declaration

*/

​

// using test before declaring

console.log(test);   // undefined

var test;

console.log(functionBelow("Hello"));

function functionBelow(greet) {

   return `${greet} world`;

}

console.log(functionBelow("Hi"));

// Example 1 

// Only y is hoisted

​

x = 1; // Initialize x, and if not already declared, declare it - but no hoisting as there is no var in the statement.

console.log(x + " " + y); // '1 undefined'

// This prints value of y as undefined as JavaScript only hoists declarations

var y = 2; // Declare and Initialize y

​

​

// Example 2 

// No hoisting, but since initialization also causes declaration (if not already declared), variables are available.

​

a = 'Cran'; // Initialize a

b = 'berry'; // Initialize b

console.log(a + "" + b); // 'Cranberry'

// hoisting is as if your `function fun() {}` was located here. 

​

fun(); // works. 

​

function fun() {}

// program to print the text

greet();

​

function greet() {

    console.log('Hi, there.');

}