In the current post I would like to develop some of what was discussed in part 3.

At the beginning, we'll slightly change our one.js JavaScript file.

Now that our file looks like this, let's think about what we actually wrote.

  • 1st line is variable a.
  • 3rd line is b function
  • 7th line is invoking our function b
  • 8th line is console logging variable a.

If someone has not seen this method before, the simplest explanation is that The console.log () method writes a message to the console. That's it.
Now that we understand every part of our code, after looking at our console in the browser, we'll see two things.

This is of course due to the console.log () method

Ok, now we will modify our one.js file again.

A lot hasn't changed right? The only thing we've moved is two lines of code to start with. Someone who had a contact with other languages ​​will probably scratch his head and say that we will get an error. Because how can you reference functions or variables that were created at a later stage of the file? And yet in JavaScript we will get something that we could not expect.

Surprise! Our code was run successfully. We received "I'm inside b function", and undefined instead of error. So even though our function is below where it's executed it still returned what we wanted to console.log.
Also when we look at the variable, it is still available for us. Only when we remove a variable completaly it will give us an error.

This JavaScript phenomenon is called 'Hoisting'.

To understand how this is all possible, we should dig deeper into the Execution Context. We are going back to Execution Context again. It has two phases. We will focus on the first one.

Creation Phase

As you recall from the previous section, along with Execution Context that wrapps our code we get the Global Object and special variable: this.

In this phase, the Creation Phase, Syntax Parser (first part of my blog posts) runs through our code and begins to set up what is written by us for translation to the language hardware can understand. When it recognizes you created variables and functions in the JavaScript file, it sets up a memory space for all variables and functions, and that's ( this step of setting up a memory space for variables and functions ) what everyone is calling the Hoisting. Although it might look like but our code isn't magically moved top.

When it comes to variables. After the the Hoisting, JavaScript engine puts a placeholder: undefined.  That's because although JavaScript reserved memory space for a variable, it does not know what the final value of variable will be, untill our code is run line by line. It is exactly what we see in first example above.

When it comes to the functions, hoisted is function's name the actual function definition.However, function definition hoisting only occurs for function declarations, not function expressions. But I will talk about them in the later parts of the blog.

Next Post

I will talk about Execution Context second phase: Execution Phase and undefined