Hello Coder! This blog is specially written to provide clarity on how your code works behind the scenes. In my opinion, when you know how your code works behind the scenes, you can predict what it will do before running it.
Okay so let’s start 😄
name = "Piyush sir";
console.log("Hello ", name);
my question to you what will be print in console , Piyush sir absolutly right . But how this code execute and variable store in memory , let see
First, a Global Execution Context is created, and it has two phases:
Phase 1: Memory Phase
Phase 2: Code Phase
After the GEC is formed for this code, JavaScript traverses the code, and all variables in the code are allocated memory, but the initial value of all variables is undefined.
Then the code phase executes. The first part in the code phase is name = "Piyush sir", so in the memory phase, it updates the name with Piyush sir . okay so now name variable value is from undefined to Piyush sir. Next part of the code phase, which is console.log(name);, so it simply logs Piyush sir , then delete Gblobal Execution Context .
console.log("Hello ", name);
name = "Piyush sir";
let see how this code execute
so basically here when code run then a GEC create with and all variable name with undefined and it has two phase as we know so :
Memory Phase name variable is undefined then start code phase console.log("Hello ", name); so result is Hello Piyush sir . And then assign name variable undefined to Piyush sir , then delete Gblobal Execution Context .
let person = {
name: "Hitesh sir",
city: "Jaipur"
}
console.log(name);
console.log(person.name);
Hoisting
A JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution .
Here intresting thing is person is not undefined first direct in memory assign variable person = {name: "Hitesh sir",city: "Jaipur"} . So basically here is the cocept come Hoisting . var is hoisted but let and const are not hoisted that’s why previous code where we declare a variable with var are undefined and then after code phase execution value asssign to that varible .
Note : Actually let and const are Hoisted but due to TDZ (Temporal Dead Zone) variable is unreachable (not give access variable) .
cosole.log(animeName);
let animeName = "Jujutsu Kaisen";
when run this code then i got error : ReferenceError: Cannot access 'animeName' before initialization means in GEC this variable exist but when i try to access that TDZ block access to that variable . Let think if animeName variable not exist then i will got other error ReferenceError: animeName is not defined but i got other error so hence prove let and const are Hoisted but TDZ block access that variable .
so this console.log(name); throw error because nowhere even in GEC (Global Context Execution) name variable exist so it throw ReferenceError: name is not defined . After the throw error GEC delete never be console.log(person.name); execute.
let person = {
name: "Hitesh sir",
city: "Jaipur"
}
console.log(person.name);
Before executing console.log(person.name);, during the memory phase, the variable person = {name: "Hitesh sir", city: "Jaipur"} is created. Then console.log(person.name); executes, and I get the result Hitesh sir.
let person = {
name: "Hitesh sir",
getFullName : function(){
let a = 10;
console.log(`Hey ${name}`);
}
}
console.log(person.name);
person.getFullName();
let's see what happens when we run this code. First, a Global Execution Context is created, which has two phases. In the memory phase, a person variable, which is an object, is added. Then, in the code phase, JavaScript executes the code. When it reaches console.log(person.name);, it executes this line, and we get Hitesh sir. Then, it moves down and sees a function has been called, so it goes to that function. This function also has variables, so a Local Execution Context is created, which also has two phases: 1. memory phase 2. code phase. In the memory phase, the variable a = 10 and this = object are stored, but no name variable exists. So when this line executes, I get the error ReferenceError: name is not defined.
But if you notice, when I debug the getFullName function, I see this = object. Actually, this holds the current object, which is person. So I can say the this keyword solves my problem because this is an object, and this has the name key property of the person object. So I do this:
let person = {
name: "Hitesh sir",
getFullName : function(){
let a = 10;
console.log(`Hey ${this.name}`);
}
}
console.log(person.name); // Expected Output: Hitesh sir
person.getFullName(); // Expected output: Hey Hitesh sir
I hope this information proves helpful to you, fellow developers.