Course Overview

Overview of history of the JavaScript language

History of JavaScript

Overview of the relationship between JavaScript and Java

JavaScript vs Java

Overview of how JavaScript is evolved as a programming language

How is it evolved?

Overview of how we can track upcoming features in the JavaScript language

How to track upcoming features?

Overview of how the ECMAScript is versioned

How is ECMAScript versioned?

Explanation of whether JavaScript is interpreted or a compiled language

Is it interpreted or compiled?

Explanation of how JavaScript is executed

How is it executed?

Execution Context

Explanation of what is a callstack and how it is used in JavaScript

Callstack

Overview of memory management in JavaScript

Memory

What is JavaScript

What is hoisting?

Explanation of common misconception about hoisting in JavaScript

Misconception about hoisting

Hoisting

What is scope?

Explanation of global scope in JavaScript

Global scope

Explanation of function scope in JavaScript

Function scope

Block scope

Explanation of module scope in JavaScript

Module scope

Scope chain

Scope

What is coercion?

Diving into inner details of  coercion in JavaScript

Deeper look at coercion

Explanation of what abstract operations are and common types of abstract operations in JavaScript

Abstract operations

Explanation of how abstract or loose equality works in JavaScript

Abstract equality operator

Explanation of how the addition operator works in JavaScript

Addition operator

Explanation of how relational operators work in JavaScript

Relational operators

Coercion exercise for testing and practicing the knowledge learned in this module

Coercion exercise

Coercion

What is a closure?

Explanation of a common misconception about closures in JavaScript

Misconception about closures

Explanation of the problem of closures inside loops and how to fix it

Closures inside loops

Explanation of closures can be used to hide data

Data hiding using closures

Closures

What is prototypal inheritance?

Prototype chain

__proto__ property

Explanation of how we can create objects with custom prototypes in JavaScript

Custom prototypes

Explanation of how prototype chain is set with ES6 classes

ES6 classes and prototypes

Prototypes

Explanation of this keyword in JavaScript

What is this?

Explanation of how "this" works inside arrow functions

Arrow functions and "this"

Explanation of how value of "this" can be set explicitly

Explicitly binding "this"

globalThis

Summarizing "this"

'this' keyword

What is a symbol?

Explanation of why symbols were added in JavaScript

Why symbols?

Symbols and privacy

Explanation of global symbols in JavaScript

Global symbols

Explanation of what well-known symbols are in JavaScript

Well-known symbols

Symbol

Overview of asynchronous behavior of JavaScript

Overview

Overview of how callbacks help us write asynchronous code in JavaScript

Callbacks

Event loop

Promise

Explanation of promise chaining in JavaScript

Promise chaining

Explanation of some static methods of promises and their use cases

Use cases for static Promise methods

Explanation of async-await syntax in JavaScript

async await

Explanation of microtasks, how they are processed, and how they are linked to promises

Microtasks

Explanation of common anti-patterns to avoid when using promises in JavaScript

Promise anti-patterns

Asynchronous JavaScript

Explanation of what is an iterator in JavaScript

Iterators

Explanation of what is a generator in JavaScript

Generators

Explanation of how we can create asynchronous iterators in JavaScript

Asynchronous iterators

Explanation of how we can create asynchronous generators in JavaScript

Asynchronous generators

Iterators and Generators

Overview of what is debugging and different ways to debug JavaScript

Debugging

Overview of using the "debugger" statement to debug JavaScript

Debugger statement

Overview of using the breakpoints in browser developers' tools to debug JavaScript

Breakpoints in browser

Overview of using the VS Code debugger to debug JavaScript

VS Code debugger

Debugging JavaScript

Final thoughts and advice regarding how to continue the exciting journey of learning JavaScript

Conclusion

Wrap up

Enter your name and email address below, then click the **"Send my free chapter"** button to get started

300+ page PDF

EPub

newline Access with Replits

All Code Samples

Discord Community Access

One-time price of $69

Become a confident JavaScript pro by unraveling the most challenging aspects of the language. With easy-to-understand explanations and code examples, you’ll gain a deeper and solid understanding of JavaScript's most complex features.

Advanced JavaScript Unleashed is for beginner and intermediate developers alike, who want to elevate their JavaScript skills and become senior engineers by gaining a deeper understanding of the core topics of the language.

Advanced JavaScript Unleashed

In JavaScript, variables and functions can be accessed 

 their actual declaration, and the term used to describe this in JavaScript is "

The term "hoisting" is mostly associated with function declarations and variables declared with the "var" keyword. Let's take a look at how 

console.log(result); // undefined
var result = 5 + 10;

You can run the above code in the Replit below:

 in action. The first line in the above code outputs 

 on the console, but how is this possible? How are we able to access the 

 it is actually declared on the second line?

 step before the code is executed. The preprocessing of the JavaScript code before its execution allows the JavaScript engine to detect some errors early before any code is executed. The following code example shows this in action:

function print(obj) {
  console.log(obj;    // error
}

console.log("hello world");

Without any preprocessing of the code, the JavaScript engine cannot detect the syntax error inside the 

 function unless the function is invoked or called, and the above code should log "hello world" on the console without throwing any errors because the function containing the syntax error hasn't been called. But the above code throws an error instead of logging "hello world" on the console. Why is that? The answer is the processing step before the code execution.

The JavaScript engine scans the code before executing it, allowing it to detect some errors before any code is executed. This also enables the engine to handle variable declarations by registering the variables declared in the current scope. Before any scope starts, all the variables declared in that scope are registered for that scope. In other words, all the variables declared in a scope are reserved for that scope before the code in that scope is executed. This preprocessing of the code before its execution is what enables 

. This allows us to refer to "var" variables 

Let us revisit the code example given above that logs 

 logged on the console instead of the actual value of the 

The thing with the hoisting of the "var" variables is that only their 

 is hoisted, not their values. These variables are assigned the value of 

, and the actual value, 15 in the above code example, is assigned when their declaration is executed during the step-by-step execution of the code.

Function declarations, just like variables declared using the "var" keyword, are also hoisted. The following code example shows the hoisting of a function declaration in action:

startCar(); // starting the car...

function startCar() {
  console.log("starting the car...");
}

If "var" variables are assigned a value of 

 before their declaration is executed, how are we able to call the function 

 its declaration? How is the hoisting of function declarations different from the hoisting of variables declared using the 

 keyword? The difference here is that in the case of function declarations, the function's name is registered as a variable in the scope containing the function declaration, and it is initialized with the function itself.

 is registered as a variable in the global scope, and it is assigned the function. Unlike the "var" variables, there is no initialization with the 

 value in the case of function declarations.

It is hard to see how hoisting can be a useful feature for a programming language until we see the hoisting of function declarations. To be able to call a function before or after the function declaration is really useful and frees the developer from arranging the code in such a way that every function declaration comes 

 it is called. This helps in code organization, as we can declare functions together either at the top or at the bottom of the code file and call them from anywhere we want in that file.

For a long time, function declarations inside blocks weren't part of the ECMAScript specification, but that changed with the introduction of ES2015. Since the function declarations weren't part of the specification before 2015 and were allowed in the language by the JavaScript engines, they were handled differently by different engines.

In ES2015, the ECMAScript specification defined 

 rules for handling function declarations.

According to the standard rules, the function declarations inside blocks are 

 to the top of the block, converted into a function expression, and assigned to a variable declared with the 

The function hoisted inside the block is limited to the containing block and cannot be accessed by code outside the block containing the function.

It is important to note that the standard rules only come into effect in 

---
title: What is hoisting?
description: Explanation of hoisting in JavaScript
isPublicLesson: false
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/advanced-javascript-unleashed-app/-/tree/main/module_02/lesson_02.01
---

In JavaScript, variables and functions can be accessed _before_ their actual declaration, and the term used to describe this in JavaScript is "**Hoisting**."

## "var" declarations

The term "hoisting" is mostly associated with function declarations and variables declared with the "var" keyword. Let's take a look at how _hoisting_ is associated with the "var" variables.

Consider the following code example:

```js
console.log(result); // undefined
var result = 5 + 10;
```

You can run the above code in the Replit below:

<ReplitEmbed src="https://replit.com/@newlineauthors/hoisting-example1" />

The output of the above code shows _hoisting_ in action. The first line in the above code outputs `undefined` on the console, but how is this possible? How are we able to access the `result` variable _before_ it is actually declared on the second line?

This is made possible because of the **parsing** step before the code is executed. The preprocessing of the JavaScript code before its execution allows the JavaScript engine to detect some errors early before any code is executed. The following code example shows this in action:

```js
function print(obj) {
  console.log(obj;    // error
}

console.log("hello world");
```

Here's the Replit to run the above code:

<ReplitEmbed src="https://replit.com/@newlineauthors/hoisting-example2" />

Without any preprocessing of the code, the JavaScript engine cannot detect the syntax error inside the `print` function unless the function is invoked or called, and the above code should log "hello world" on the console without throwing any errors because the function containing the syntax error hasn't been called. But the above code throws an error instead of logging "hello world" on the console. Why is that? The answer is the processing step before the code execution.

The JavaScript engine scans the code before executing it, allowing it to detect some errors before any code is executed. This also enables the engine to handle variable declarations by registering the variables declared in the current scope. Before any scope starts, all the variables declared in that scope are registered for that scope. In other words, all the variables declared in a scope are reserved for that scope before the code in that scope is executed. This preprocessing of the code before its execution is what enables _hoisting_. This allows us to refer to "var" variables _before_ they are actually declared in the code.

Let us revisit the code example given above that logs `undefined` to the console.

```js
console.log(result); // undefined
var result = 5 + 10;
```

If the "var" variables are _hoisted_, and we can refer to them _before_ their declaration, then why is `undefined` logged on the console instead of the actual value of the `result` variable, which should be 15?

The thing with the hoisting of the "var" variables is that only their **declaration** is hoisted, not their values. These variables are assigned the value of `undefined`, and the actual value, 15 in the above code example, is assigned when their declaration is executed during the step-by-step execution of the code.

## Function declarations

Function declarations, just like variables declared using the "var" keyword, are also hoisted. The following code example shows the hoisting of a function declaration in action:

```js
startCar(); // starting the car...

function startCar() {
  console.log("starting the car...");
}
```

Here's the Replit to run the above code:

<ReplitEmbed src="https://replit.com/@newlineauthors/hoisting-example4" />

If "var" variables are assigned a value of `undefined` before their declaration is executed, how are we able to call the function _before_ its declaration? How is the hoisting of function declarations different from the hoisting of variables declared using the `var` keyword? The difference here is that in the case of function declarations, the function's name is registered as a variable in the scope containing the function declaration, and it is initialized with the function itself.

In the above code example, the `startCar` is registered as a variable in the global scope, and it is assigned the function. Unlike the "var" variables, there is no initialization with the `undefined` value in the case of function declarations.

It is hard to see how hoisting can be a useful feature for a programming language until we see the hoisting of function declarations. To be able to call a function before or after the function declaration is really useful and frees the developer from arranging the code in such a way that every function declaration comes _before_ it is called. This helps in code organization, as we can declare functions together either at the top or at the bottom of the code file and call them from anywhere we want in that file.

## Function declarations inside blocks

For a long time, function declarations inside blocks weren't part of the ECMAScript specification, but that changed with the introduction of ES2015. Since the function declarations weren't part of the specification before 2015 and were allowed in the language by the JavaScript engines, they were handled differently by different engines.

In ES2015, the ECMAScript specification defined **standard** and **legacy** rules for handling function declarations.

### Standard rules

According to the standard rules, the function declarations inside blocks are _hoisted_ to the top of the block, converted into a function expression, and assigned to a variable declared with the `let` keyword.

The function hoisted inside the block is limited to the containing block and cannot be accessed by code outside the block containing the function.