Hoisting In Javascript

https://www.youtube.com/watch?v=Fnlnw8uY6jo

Hoisting -->

var x= 7;

function getName(){

console.log("Namaste Javascript")

}

getName();

console.log(x);

output--> 

Namaste Javascript

7

But what if we try to access them before the initialization. 

getName();

console.log(x);

var x= 7;

function getName(){

console.log("Namaste Javascript")

}

Output:

Namaste Javascript
undefined

means getName was able to find the getName and invoked the function directly but var x was not.

what is this undefined??

what if I even remove the initialization of x??

getName();

console.log(x);

function getName(){

console.log("Namaste Javascript")

}

Output:

Namaste Javascript

index.js:3
console.log(x);
            ^

ReferenceError: x is not defined
    at Object.<anonymous> (index.js:3:13)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

before it was undefined now it is not defined. Is undefined and not defined the same thing?

No, if we try to run the code so before the code execution phase there will be the memory creation phase and it will look for x, but a memory for x was never reserved as we have removed the initialization for it. it will say the reference to access is not defined

This whole magic is known as hoisting in javascript.

Hoisting is a phenomenon in javascript by which you can access a variable even before initializing them or before you have put some value in it. You can access it without any errors.

what if we try to log this getName method-->

what if we try to access it before function initialization.

So in the case of x, it is giving undefined but for functions it is printing the function definition.

whenever we run a javascript code a global execution context gets created. It is created in two phases, the first phase is the memory creation phase and the second is the code execution phase.

even before the code starts executing memory is allocated to each and every variable and function

it stores a special keyword undefined for the variables, In the case of function the whole code is put in. even before we start to run this code.

This Anonymous is the global execution context.

 as soon as we invoke the function getName, again a new execution context will get created, and the execution context get pushed inside the call stack.

2 Golden Rules: 1. Variable declarations are scanned and are made undefined 2. Function declarations are scanned and are made available

what if we change the function to an arrow function 

when getName is an arrow function it behaves like another variable. it will allocate undefined to getName just like it allocates undefined to variable x.

1. In JS, before the code is executed, the variables get initialized to undefined. 2. Arrow functions enact as variables and get "undefined" during the memory creation phase while functions actually get run. 3. Hoisting: Mechanism in JS where the variable declarations are moved to the top of the scope before execution. Therefore it is possible to call a function before initializing it. 4. Whenever a JS program is run, a global execution block is created, which comprises of 2: Memory creation and Code execution. 5. Variable declarations are scanned and are made undefined 6. Function declarations are scanned and are made available

it behaves just like a variable, getName2 is undefined

only in case of proper function declaration, it will get you the whole function.