DEV Community: Logeshwaran

Javascript Hoisting

Logeshwaran — Mon, 08 Mar 2021 13:50:40 +0000

Are you confused about javascript hoisting?
Don't worry! From this blog, your confusion will go away and you will get a clear idea about javascript hoisting. So.......let's start!

What is Javascript Hoisting?

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. But...but ..Technically this will not happen.

Whenever any javascript code is executed Global Execution context
(If you don't know, read this) is created.
It has two phases one is the Creation phase and the other one is the Execution phase.

The variables and functions are put into memory before the execution phase. This will help us to use a function or a variable before it is declared. This behavior is known as Hoisting.

Let me show you what is happening...

Hoisting in variables

  var a;            //Declaration 
  a = 5;            //Initialization
  console.log(a);    //Prints 5

In the above code, first variable a is declared and then initialized and it is used.

  a = 5;            //Initialization
  console.log(a);   
  var a;            //Declaration

What will you think the above code will print? It will print an error?
No, it prints the value of a. How it prints the value of a. Let me show using the global execution context.

The above diagram shows that the global execution context is created, in that two phases are there(Creation phase and Execution phase).

In the creation phase code is not executed, only the memory is allocated. So, the javascript will allocate memory for each function and variable. This is how for variable a memory is allocated and undefined assigned.

In the Execution phase, the javascript will run the code line by line. So, it will assign the value 5 for the variable a and then prints the value(shown below). Because the line initialization line comes before the console.log.

So, before executing the code the javascript will allocate memory for all variables. Due to this behavior, we can able to access the variable without an error. (If you still don't understand read this).

Only Declarations are hoisted

    console.log(a);  //prints undefined
    a = 5;           // Initialization
    var a;           // Declaration
    console.log(a);  //Prints 5

Why the first console.log print undefined not 5? Is Hoisting is not working?

No, hoisting is happening. Only Declarations are hoisted not initialization. It means in the creation phase only memory is allocated, values are not assigned. In the execution phase, values are assigned, until that it is undefined. In the execution phase until the second line(a =5) value of the variable a, is undefined. After the second line, the values are assigned to the variable. So, it prints the value 5 in the last line.

Function Hoisting

let a=5,
    b=5;

let result = add(a,b);
console.log(result);

function add(x,y){
  return x+y; 
}

The above code works perfectly fine. Because in the creation phase the javascript copies the function code to the add variable(shown below), instead of assigning undefined like variables.

The above diagram shows that in the creation phase the javascript assigns undefined for variables, but....for functions, it assigns the code. So, in the execution phase wherever the function is called it give the code, and do the work.

Functions expressions are not hoisted

let a=5,
    b=5;

let result = add(a,b);   //Prints “TypeError : add is not a function”

console.log(result);     

var add = function(x,y){
  return x+y; 
}

If you execute the code, it will show the following result.

   “TypeError : add is not a function

Let's look into Global execution for the above code,

Here add is considered as a variable and assigned undefined value.
So, if you call it as a function it will produce a TypeError.

Conclusion

So, we have learned that when you run the code, the Global Execution context is created. In that, there are two phases, which is the Creation phase and the Execution phase. In the creation phase, for variables memory is allocated and for function, code is copied. Due to this behavior, we can able to access the variable before it is declared.
This is known as "Hoisting in Javascript".

Thank you for reading the article. If you like it please share it with your friends. If you have any questions, feel free to ask in the comments.

Happy Coding!!😀

Understanding Global Execution Context and Execution Context Stack

Logeshwaran — Wed, 03 Mar 2021 15:07:11 +0000

This blog will help you understand javascript better, here you will learn about Execution context and Execution context stack.

Execution context(EC)

It is like an environment where javascript code is evaluated and executed. Whenever any code in javascript is executed, it is run in Execution context.

Types of Execution context

            1. Global Execution context 
            2. Functional Execution context
            3. Eval function Execution context.

Global Execution context

This is the default execution context. The global code, (i.e the code which is not in the function and object) is executed in it.
Since javascript is single-threaded, only one execution context is possible.

Function Execution context

The code inside the function is executed here. Multiple execution contexts are possible because there will be chances of having multiple functions inside one program.

Eval function Execution context

The code inside the eval function is executed here. This is the rare function used by developers.

Execution Context stack

It is used to store the execution contexts. Whenever the javascript code starts its execution global execution context is created and the execution context stack is created (Calling stack). It works based on 'Last in, first out'.

When the javascript engine starts executing the javascript code global execution context is created and pushed on the top of the call stack. When it reaches a function in a code, the functional execution context is created and pushed on the top of the stack.

It looks kinda overwhelming, right?. Let me explain with a simple program and diagrams.

Let's take a small code.

     console.log("Hello");

     function first(){
       console.log("First");
       second(); //Second function is called here.
      }

     function second(){
      console.log("Second");
      }

     first();//first function is called here.

     Console.log("End");

When the JS engine starts executing, the global execution context is created and pushed to the top of the call stack.

After it prints Hello, it starts executing line by line. When the JS reaches the line(shown below), the first function is pushed to the top of the call stack and starts executed.

first();

After pushing to the call stack, It starts executing the first function line by line. So, it prints "first" and there is the second function is called. When the JS engine reaches the line(shown below), the second function is called and it is pushed into the call stack.

second();

The second function starts executed and prints "second". After that inside the second function, there is nothing to execute. After completing the execution of the second function, it is popped out of the stack. This is called "Last in, first-out". After that, there is nothing to execute in the first function. So, it is popped out of the call stack.

After executing all the code, the global execution context is popped out of the call stack. This is how the execution context stack is created.

Now, let's talk about the Execution context. It has two phases,
1.Creation phase
2.Execution phase

Creation phase

In this phase the JS engine scan through the code, it allocates memory for all variables and functions. For variables, it will allocate memory and assign an undefined. It will not execute any code.

Execution phase

In this phase, the JS engine starts executing the code line by line. It assigns values to the variable and executes the function calls.

Let's take some example code,

   let a = 3;
   let b = 4; 

   function add(num1,num2){
     let result = num1+num2;
     return result;
   }

   const addition = add(a,b);
   console.log(addition);

In the creation phase, the variables are stored "key: value" pairs(shown in the diagram). Now the code is not executed, just memory is allocated, for the variables it allocates undefined, and for function, it just copied the code. Along with this, it creates a global object (i.e window in the browsers) and creates this binding object, which points global object.

Now it starts executing the code line by line, in execution code, the values are assigned to a variable(shown below). When it reaches the function add another execution context is created. It is called a functional execution context. In that also two phases are there, creation and execution. Inside that creation phase, memory is allocated for the variables with the value of undefined(shown below).

After that execution starts and values are assigned and execution start (i.e values are added and stored in the result). The below diagram shows that function is executed and stored.

After that, it returns the value and stores it in the addition variable.
Now the add function is popped out of the stack.(shown below)

After printing the variable the global execution context is popped out of the call stack.

That’s it and if you found this article helpful please hit the like button and feel free to comment below! I’d be happy to talk 😃.

How to write good commit messages?

Logeshwaran — Thu, 03 Dec 2020 18:50:26 +0000

What is a `commit` message?

The commit command is used to save changes to our local repository after staging in Git. Before saving to our local repository, we need to tell Git which changes you need to save, as you have done lots of changes. A better way to do this, by adding commit messages to tell what changes you have done.

Why do we need to write good commit messages?

If the project history is seen only by you, you can write whatever you want. But, when multiple people are involving in that project, you have to write good commit messages. So that they could able to understand better. Roughly said, the commit is the comment of each change, what and why you have made the change.

Commit messages frequently communicate why such a change was made, so it helps to understand better. Thus better understanding and collaboration make work more efficient.

There are three important points:

To speed up the review process
To help the developer team to write good release notes.
To help the future maintainers(Why such feature was added).

How to write good commit messages?

There are no strict definitions for good commit messages, but generic rules have emerged. A commit message should have only one logical change.

There are several conventions used by different developer teams and companies. If you work in a particular company, you have to follow their conventions.

Good commit messages are not only good for others with who you may be collaborating but also for you, when you look back on your history you can able to understand much better.

The general format is :

Short (72 chars or less) summary of changes

More details explanatory text. wrap it to 72 characters. The blank
line separating the summary from the body is critical(unless you
omit the body entirely).

Write you commit message in the imperative: "Fix bug " and not "Fixed bug" or "Fixes bug".This convention matches up with commit messages generated by commands like git merge and git revert.
Further paragraphs come after blank lines.

Bullet points are okay, too.

Typically a hyphen or asterisk is used for the bullet, followed >by a single space. Use a hanging indent.

Rules for a great git commit message style

Separate subject from body with a blank line
Do not end the subject line with a period
Capitalize the subject line and each paragraph
Use the imperative mood in the subject line
Wrap lines at 72 characters
Use the body to explain what and why you have done something. In most cases, you can leave out details about how a change has been made.

You can make yours good too, this is the format I used to :

   type : subject

   body (optional)

1.TYPE

feat: The new feature you're adding to a particular application
fix: A bug fix
style: Feature and updates related to styling
refactor: Refactoring a specific section of the codebase
test: Everything related to testing
docs: Everything related to documentation
chore: Regular code maintenance.[ You can also use emojis to represent commit types]

2.Subject

This is a short description of the changes you have made. It should start with a Capital letter and should not exceed more than 50 characters. Eg: Add x filter instead of Added x filter or Adds x filter.

3.Body

It is used to explain what changes you have made and why you have made the changes. Not all commit messages need a body, it's optional.

Tips: If you have several logics and you if you feel difficult to commit message split up and do it.

How not to do it:

Don't do the end-of-day commits, it looks messy when you go through the history it looks messy, and others cannot able to understand.
Don't do lazy commits, it's really hard for others to understand what is going in the project.

DEV Community: Logeshwaran

Javascript Hoisting

What is Javascript Hoisting?

Hoisting in variables

Only Declarations are hoisted

Function Hoisting

Functions expressions are not hoisted

Conclusion

Understanding Global Execution Context and Execution Context Stack

Execution context(EC)

Types of Execution context

Global Execution context

Function Execution context

Eval function Execution context

Execution Context stack

Creation phase

Execution phase

How to write good commit messages?

What is a commit message?

Why do we need to write good commit messages?

How to write good commit messages?

Rules for a great git commit message style

1.TYPE

2.Subject

3.Body

How not to do it:

Want to learn more about git:

What is a `commit` message?