JAVASCRIPT

js hoisting

/*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.
*/

javascript hoisting

/*
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;

why does javascript have hoisting

// 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.

hoisting in javscript

1)Before your javascript(.js) file run there is global execution context
that is created even file is empty.Two phase Creation phase and Execution Phase.
2)In creation phase GEC create global object and this.In browser global object 
will be browser.Javascript engines allocate memory for function even before your
code run.
3)After creation phase,There is Execution phase.

sayHi() //hello
function sayHi(){
console.log("hello")
}

Javascript already know your function even before it is executed
because of hoisting as in creation phase it memorized all javascript function 
declaration.

sayHi(); //error out because of sayHi is const varible not exact function.
const sayHi= function (){
console.log("hey")
}

javascript hoisting

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

hoisting in javascript

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

fun(); // works. 

function fun() {}

JavaScript Hoisting

x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x;                     // Display x in the element

var x; // Declare x

javascript Hoisting

// accessing class
const p = new Person(); // ReferenceError

// defining class
class Person {
  constructor(name) {
    this.name = name;
  }
}

function hoisting in js

console.log(functionBelow("Hello"));
var functionBelow = function(greet) {
   return `${greet} world`;
}
console.log(functionBelow("Hi"));

function hoisting in js

console.log(functionBelow("Hello"));
function functionBelow(greet) {
   return `${greet} world`;
}
console.log(functionBelow("Hi"));

Hoisting in JavaScript MDN

// 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'