048-hoisting.js

// SECTION 1: JAVASCRIPT ENGINE
// - Parsing
// - Execution

// You write JavaScript code → The engine parses it → Creates an execution context → Executes the code.

// SECTION 2: EXECUTION CONTEXT
// 1. Global Execution Context (GEC)
// 2. Function Execution Context (FEC)
// const name = "Alex";

// const greet = () => {
// const message = "Hello";
// console.log(message + " " + name);
// };

// greet();

// SECTION 3: PHASES OF EXECUTION CONTEXT
// Phase 1: Memory Creation Phase (Creation Phase)
// Phase 2: Code Execution Phase
console.log(age);// What do you think this will output?
constage=25;

console.log(greeting);// undefined
vargreeting="Hello World";
console.log(greeting);// "Hello World"

// SECTION 4: HOISTING
// Hoisting with var:
console.log(x);// undefined
varx=10;
console.log(x);// 10

varx;// Declaration hoisted
console.log(x);// undefined
x=10;// Initialization stays here
console.log(x);// 10

// Hoisting with let and const:
console.log(y);// ReferenceError: Cannot access 'y' before initialization
lety=20;

// SECTION 5: FUNCTION HOISTING
// Function Declarations:
sayHello();// "Hello!" - This works!

functionsayHello(){
console.log("Hello!");
}

// Function Expressions with var:
sayHi();// TypeError: sayHi is not a function

varsayHi=function(){
console.log("Hi!");
};

// Function Expressions with const:
greetUser();// ReferenceError: Cannot access 'greetUser' before initialization

constgreetUser=function(){
console.log("Greetings!");
};

// Arrow Functions:
welcome();// ReferenceError: Cannot access 'welcome' before initialization

constwelcome=()=>{
console.log("Welcome!");
};

// SECTION 6: PRACTICAL EXAMPLE
console.log("1:",a);// undefined
console.log("2:",calculate(5));// 25

vara=10;

functioncalculate(num){
constresult=num*num;
returnresult;
}

console.log("3:",a);// 10
console.log("4:",multiply(4,5));// ReferenceError

constmultiply=(x,y)=>{
returnx*y;
};

// SECTION 7: THE CALL STACK
constfirst=()=>{
console.log("First function");
second();
console.log("First function again");
};

constsecond=()=>{
console.log("Second function");
third();
console.log("Second function again");
};

constthird=()=>{
console.log("Third function");
};

first();

// Output
// First function
// Second function
// Third function
// Second function again
// First function again

// Temporal dead zone 
// SECTION 1: JAVASCRIPT ENGINE
// - Parsing
// - Execution

// You write JavaScript code → The engine parses it → Creates an execution context → Executes the code.

// SECTION 2: EXECUTION CONTEXT
// 1. Global Execution Context (GEC)
// 2. Function Execution Context (FEC)
// const name = "Alex";

// const greet = () => {
// const message = "Hello";
// console.log(message + " " + name);
// };

// greet();

// SECTION 3: PHASES OF EXECUTION CONTEXT
// Phase 1: Memory Creation Phase (Creation Phase)
// Phase 2: Code Execution Phase
console.log(age);// What do you think this will output?
constage=25;

console.log(greeting);// undefined
vargreeting="Hello World";
console.log(greeting);// "Hello World"

// SECTION 4: HOISTING
// Hoisting with var:
console.log(x);// undefined
varx=10;
console.log(x);// 10

varx;// Declaration hoisted
console.log(x);// undefined
x=10;// Initialization stays here
console.log(x);// 10

// Hoisting with let and const:
console.log(y);// ReferenceError: Cannot access 'y' before initialization
lety=20;

// SECTION 5: FUNCTION HOISTING
// Function Declarations:
sayHello();// "Hello!" - This works!

functionsayHello(){
console.log("Hello!");
}

// Function Expressions with var:
sayHi();// TypeError: sayHi is not a function

varsayHi=function(){
console.log("Hi!");
};

// Function Expressions with const:
greetUser();// ReferenceError: Cannot access 'greetUser' before initialization

constgreetUser=function(){
console.log("Greetings!");
};

// Arrow Functions:
welcome();// ReferenceError: Cannot access 'welcome' before initialization

constwelcome=()=>{
console.log("Welcome!");
};

// SECTION 6: PRACTICAL EXAMPLE
console.log("1:",a);// undefined
console.log("2:",calculate(5));// 25

vara=10;

functioncalculate(num){
constresult=num*num;
returnresult;
}

console.log("3:",a);// 10
console.log("4:",multiply(4,5));// ReferenceError

constmultiply=(x,y)=>{
returnx*y;
};

// SECTION 7: THE CALL STACK
constfirst=()=>{
console.log("First function");
second();
console.log("First function again");
};

constsecond=()=>{
console.log("Second function");
third();
console.log("Second function again");
};

constthird=()=>{
console.log("Third function");
};

first();

// Output
// First function
// Second function
// Third function
// Second function again
// First function again

// Temporal dead zone 
// SECTION 1: JAVASCRIPT ENGINE
// - Parsing
// - Execution

// You write JavaScript code → The engine parses it → Creates an execution context → Executes the code.

// SECTION 2: EXECUTION CONTEXT
// 1. Global Execution Context (GEC)
// 2. Function Execution Context (FEC)
// const name = "Alex";

// const greet = () => {
// const message = "Hello";
// console.log(message + " " + name);
// };

// greet();

// SECTION 3: PHASES OF EXECUTION CONTEXT
// Phase 1: Memory Creation Phase (Creation Phase)
// Phase 2: Code Execution Phase
console.log(age);// What do you think this will output?
constage=25;

console.log(greeting);// undefined
vargreeting="Hello World";
console.log(greeting);// "Hello World"

// SECTION 4: HOISTING
// Hoisting with var:
console.log(x);// undefined
varx=10;
console.log(x);// 10

varx;// Declaration hoisted
console.log(x);// undefined
x=10;// Initialization stays here
console.log(x);// 10

// Hoisting with let and const:
console.log(y);// ReferenceError: Cannot access 'y' before initialization
lety=20;

// SECTION 5: FUNCTION HOISTING
// Function Declarations:
sayHello();// "Hello!" - This works!

functionsayHello(){
console.log("Hello!");
}

// Function Expressions with var:
sayHi();// TypeError: sayHi is not a function

varsayHi=function(){
console.log("Hi!");
};

// Function Expressions with const:
greetUser();// ReferenceError: Cannot access 'greetUser' before initialization

constgreetUser=function(){
console.log("Greetings!");
};

// Arrow Functions:
welcome();// ReferenceError: Cannot access 'welcome' before initialization

constwelcome=()=>{
console.log("Welcome!");
};

// SECTION 6: PRACTICAL EXAMPLE
console.log("1:",a);// undefined
console.log("2:",calculate(5));// 25

vara=10;

functioncalculate(num){
constresult=num*num;
returnresult;
}

console.log("3:",a);// 10
console.log("4:",multiply(4,5));// ReferenceError

constmultiply=(x,y)=>{
returnx*y;
};

// SECTION 7: THE CALL STACK
constfirst=()=>{
console.log("First function");
second();
console.log("First function again");
};

constsecond=()=>{
console.log("Second function");
third();
console.log("Second function again");
};

constthird=()=>{
console.log("Third function");
};

first();

// Output
// First function
// Second function
// Third function
// Second function again
// First function again

// Temporal dead zone 
// SECTION 1: JAVASCRIPT ENGINE
// - Parsing
// - Execution

// You write JavaScript code → The engine parses it → Creates an execution context → Executes the code.

// SECTION 2: EXECUTION CONTEXT
// 1. Global Execution Context (GEC)
// 2. Function Execution Context (FEC)
// const name = "Alex";

// const greet = () => {
// const message = "Hello";
// console.log(message + " " + name);
// };

// greet();

// SECTION 3: PHASES OF EXECUTION CONTEXT
// Phase 1: Memory Creation Phase (Creation Phase)
// Phase 2: Code Execution Phase
console.log(age);// What do you think this will output?
constage=25;

console.log(greeting);// undefined
vargreeting="Hello World";
console.log(greeting);// "Hello World"

// SECTION 4: HOISTING
// Hoisting with var:
console.log(x);// undefined
varx=10;
console.log(x);// 10

varx;// Declaration hoisted
console.log(x);// undefined
x=10;// Initialization stays here
console.log(x);// 10

// Hoisting with let and const:
console.log(y);// ReferenceError: Cannot access 'y' before initialization
lety=20;

// SECTION 5: FUNCTION HOISTING
// Function Declarations:
sayHello();// "Hello!" - This works!

functionsayHello(){
console.log("Hello!");
}

// Function Expressions with var:
sayHi();// TypeError: sayHi is not a function

varsayHi=function(){
console.log("Hi!");
};

// Function Expressions with const:
greetUser();// ReferenceError: Cannot access 'greetUser' before initialization

constgreetUser=function(){
console.log("Greetings!");
};

// Arrow Functions:
welcome();// ReferenceError: Cannot access 'welcome' before initialization

constwelcome=()=>{
console.log("Welcome!");
};

// SECTION 6: PRACTICAL EXAMPLE
console.log("1:",a);// undefined
console.log("2:",calculate(5));// 25

vara=10;

functioncalculate(num){
constresult=num*num;
returnresult;
}

console.log("3:",a);// 10
console.log("4:",multiply(4,5));// ReferenceError

constmultiply=(x,y)=>{
returnx*y;
};

// SECTION 7: THE CALL STACK
constfirst=()=>{
console.log("First function");
second();
console.log("First function again");
};

constsecond=()=>{
console.log("Second function");
third();
console.log("Second function again");
};

constthird=()=>{
console.log("Third function");
};

first();

// Output
// First function
// Second function
// Third function
// Second function again
// First function again

// Temporal dead zone 
// SECTION 1: JAVASCRIPT ENGINE
// - Parsing
// - Execution

// You write JavaScript code → The engine parses it → Creates an execution context → Executes the code.

// SECTION 2: EXECUTION CONTEXT
// 1. Global Execution Context (GEC)
// 2. Function Execution Context (FEC)
// const name = "Alex";

// const greet = () => {
// const message = "Hello";
// console.log(message + " " + name);
// };

// greet();

// SECTION 3: PHASES OF EXECUTION CONTEXT
// Phase 1: Memory Creation Phase (Creation Phase)
// Phase 2: Code Execution Phase
console.log(age);// What do you think this will output?
constage=25;

console.log(greeting);// undefined
vargreeting="Hello World";
console.log(greeting);// "Hello World"

// SECTION 4: HOISTING
// Hoisting with var:
console.log(x);// undefined
varx=10;
console.log(x);// 10

varx;// Declaration hoisted
console.log(x);// undefined
x=10;// Initialization stays here
console.log(x);// 10

// Hoisting with let and const:
console.log(y);// ReferenceError: Cannot access 'y' before initialization
lety=20;

// SECTION 5: FUNCTION HOISTING
// Function Declarations:
sayHello();// "Hello!" - This works!

functionsayHello(){
console.log("Hello!");
}

// Function Expressions with var:
sayHi();// TypeError: sayHi is not a function

varsayHi=function(){
console.log("Hi!");
};

// Function Expressions with const:
greetUser();// ReferenceError: Cannot access 'greetUser' before initialization

constgreetUser=function(){
console.log("Greetings!");
};

// Arrow Functions:
welcome();// ReferenceError: Cannot access 'welcome' before initialization

constwelcome=()=>{
console.log("Welcome!");
};

// SECTION 6: PRACTICAL EXAMPLE
console.log("1:",a);// undefined
console.log("2:",calculate(5));// 25

vara=10;

functioncalculate(num){
constresult=num*num;
returnresult;
}

console.log("3:",a);// 10
console.log("4:",multiply(4,5));// ReferenceError

constmultiply=(x,y)=>{
returnx*y;
};

// SECTION 7: THE CALL STACK
constfirst=()=>{
console.log("First function");
second();
console.log("First function again");
};

constsecond=()=>{
console.log("Second function");
third();
console.log("Second function again");
};

constthird=()=>{
console.log("Third function");
};

first();

// Output
// First function
// Second function
// Third function
// Second function again
// First function again

// Temporal dead zone 
// SECTION 1: JAVASCRIPT ENGINE
// - Parsing
// - Execution

// You write JavaScript code → The engine parses it → Creates an execution context → Executes the code.

// SECTION 2: EXECUTION CONTEXT
// 1. Global Execution Context (GEC)
// 2. Function Execution Context (FEC)
// const name = "Alex";

// const greet = () => {
// const message = "Hello";
// console.log(message + " " + name);
// };

// greet();

// SECTION 3: PHASES OF EXECUTION CONTEXT
// Phase 1: Memory Creation Phase (Creation Phase)
// Phase 2: Code Execution Phase
console.log(age);// What do you think this will output?
constage=25;

console.log(greeting);// undefined
vargreeting="Hello World";
console.log(greeting);// "Hello World"

// SECTION 4: HOISTING
// Hoisting with var:
console.log(x);// undefined
varx=10;
console.log(x);// 10

varx;// Declaration hoisted
console.log(x);// undefined
x=10;// Initialization stays here
console.log(x);// 10

// Hoisting with let and const:
console.log(y);// ReferenceError: Cannot access 'y' before initialization
lety=20;

// SECTION 5: FUNCTION HOISTING
// Function Declarations:
sayHello();// "Hello!" - This works!

functionsayHello(){
console.log("Hello!");
}

// Function Expressions with var:
sayHi();// TypeError: sayHi is not a function

varsayHi=function(){
console.log("Hi!");
};

// Function Expressions with const:
greetUser();// ReferenceError: Cannot access 'greetUser' before initialization

constgreetUser=function(){
console.log("Greetings!");
};

// Arrow Functions:
welcome();// ReferenceError: Cannot access 'welcome' before initialization

constwelcome=()=>{
console.log("Welcome!");
};

// SECTION 6: PRACTICAL EXAMPLE
console.log("1:",a);// undefined
console.log("2:",calculate(5));// 25

vara=10;

functioncalculate(num){
constresult=num*num;
returnresult;
}

console.log("3:",a);// 10
console.log("4:",multiply(4,5));// ReferenceError

constmultiply=(x,y)=>{
returnx*y;
};

// SECTION 7: THE CALL STACK
constfirst=()=>{
console.log("First function");
second();
console.log("First function again");
};

constsecond=()=>{
console.log("Second function");
third();
console.log("Second function again");
};

constthird=()=>{
console.log("Third function");
};

first();

// Output
// First function
// Second function
// Third function
// Second function again
// First function again

// Temporal dead zone 
// SECTION 1: JAVASCRIPT ENGINE
// - Parsing
// - Execution

// You write JavaScript code → The engine parses it → Creates an execution context → Executes the code.

// SECTION 2: EXECUTION CONTEXT
// 1. Global Execution Context (GEC)
// 2. Function Execution Context (FEC)
// const name = "Alex";

// const greet = () => {
// const message = "Hello";
// console.log(message + " " + name);
// };

// greet();

// SECTION 3: PHASES OF EXECUTION CONTEXT
// Phase 1: Memory Creation Phase (Creation Phase)
// Phase 2: Code Execution Phase
console.log(age);// What do you think this will output?
constage=25;

console.log(greeting);// undefined
vargreeting="Hello World";
console.log(greeting);// "Hello World"

// SECTION 4: HOISTING
// Hoisting with var:
console.log(x);// undefined
varx=10;
console.log(x);// 10

varx;// Declaration hoisted
console.log(x);// undefined
x=10;// Initialization stays here
console.log(x);// 10

// Hoisting with let and const:
console.log(y);// ReferenceError: Cannot access 'y' before initialization
lety=20;

// SECTION 5: FUNCTION HOISTING
// Function Declarations:
sayHello();// "Hello!" - This works!

functionsayHello(){
console.log("Hello!");
}

// Function Expressions with var:
sayHi();// TypeError: sayHi is not a function

varsayHi=function(){
console.log("Hi!");
};

// Function Expressions with const:
greetUser();// ReferenceError: Cannot access 'greetUser' before initialization

constgreetUser=function(){
console.log("Greetings!");
};

// Arrow Functions:
welcome();// ReferenceError: Cannot access 'welcome' before initialization

constwelcome=()=>{
console.log("Welcome!");
};

// SECTION 6: PRACTICAL EXAMPLE
console.log("1:",a);// undefined
console.log("2:",calculate(5));// 25

vara=10;

functioncalculate(num){
constresult=num*num;
returnresult;
}

console.log("3:",a);// 10
console.log("4:",multiply(4,5));// ReferenceError

constmultiply=(x,y)=>{
returnx*y;
};

// SECTION 7: THE CALL STACK
constfirst=()=>{
console.log("First function");
second();
console.log("First function again");
};

constsecond=()=>{
console.log("Second function");
third();
console.log("Second function again");
};

constthird=()=>{
console.log("Third function");
};

first();

// Output
// First function
// Second function
// Third function
// Second function again
// First function again

// Temporal dead zone 
// SECTION 1: JAVASCRIPT ENGINE
// - Parsing
// - Execution

// You write JavaScript code → The engine parses it → Creates an execution context → Executes the code.

// SECTION 2: EXECUTION CONTEXT
// 1. Global Execution Context (GEC)
// 2. Function Execution Context (FEC)
// const name = "Alex";

// const greet = () => {
// const message = "Hello";
// console.log(message + " " + name);
// };

// greet();

// SECTION 3: PHASES OF EXECUTION CONTEXT
// Phase 1: Memory Creation Phase (Creation Phase)
// Phase 2: Code Execution Phase
console.log(age);// What do you think this will output?
constage=25;

console.log(greeting);// undefined
vargreeting="Hello World";
console.log(greeting);// "Hello World"

// SECTION 4: HOISTING
// Hoisting with var:
console.log(x);// undefined
varx=10;
console.log(x);// 10

varx;// Declaration hoisted
console.log(x);// undefined
x=10;// Initialization stays here
console.log(x);// 10

// Hoisting with let and const:
console.log(y);// ReferenceError: Cannot access 'y' before initialization
lety=20;

// SECTION 5: FUNCTION HOISTING
// Function Declarations:
sayHello();// "Hello!" - This works!

functionsayHello(){
console.log("Hello!");
}

// Function Expressions with var:
sayHi();// TypeError: sayHi is not a function

varsayHi=function(){
console.log("Hi!");
};

// Function Expressions with const:
greetUser();// ReferenceError: Cannot access 'greetUser' before initialization

constgreetUser=function(){
console.log("Greetings!");
};

// Arrow Functions:
welcome();// ReferenceError: Cannot access 'welcome' before initialization

constwelcome=()=>{
console.log("Welcome!");
};

// SECTION 6: PRACTICAL EXAMPLE
console.log("1:",a);// undefined
console.log("2:",calculate(5));// 25

vara=10;

functioncalculate(num){
constresult=num*num;
returnresult;
}

console.log("3:",a);// 10
console.log("4:",multiply(4,5));// ReferenceError

constmultiply=(x,y)=>{
returnx*y;
};

// SECTION 7: THE CALL STACK
constfirst=()=>{
console.log("First function");
second();
console.log("First function again");
};

constsecond=()=>{
console.log("Second function");
third();
console.log("Second function again");
};

constthird=()=>{
console.log("Third function");
};

first();

// Output
// First function
// Second function
// Third function
// Second function again
// First function again

// Temporal dead zone