Hoisting in Javascript
Tags: javascript, webdev, beginners, tutorial
Published: 2022-12-27 22:19:45


### Prerequisites:

* Scope
    

---


**Hoisting** is a term that refers to the behavior of variables and function declarations in JavaScript. Essentially, when JavaScript code is executed, declarations of variables and functions are *"hoisted"* to the **top of their scope**, meaning they are processed before any other code in their scope. This means that you can use a variable or call a function before it is actually declared in the code.

For example:

```javascript
console.log(x); // Outputs: undefined
var x = 5;
```

In this code, the `console.log` statement is executed before the `var x = 5` statement, but the code still runs without any errors. This is because the declaration of `x` is hoisted to the top of the code, so it is processed before any other code. However, the assignment of the value `5` to `x` is not hoisted, so the value of `x` is still `undefined` at the time that `console.log` is executed.

It's important to note that hoisting only affects declarations, not assignments. So in the example above, the value of `x` is `undefined` because the declaration of `x` was hoisted, but the assignment of `5` to `x` was not.

However, if we change the code to use the `let` or `const` keyword instead of `var`,

```javascript
console.log(x); // Outputs: Uncaught ReferenceError: x is not defined
let x = 5;
```

we get a different result: `Uncaught ReferenceError: x is not defined`

In this case, the output is an error because the `let` and `const` keywords do not exhibit hoisting behavior. The variables are not moved to the top of the scope and must be declared before they are used.

However, that doesn't mean that we should use `var` over `let` or `const`, actually, we should avoid using `var` as this will allow such behavior in your code and affect code readability by having variables that are used without seemingly being declared in the script `.js` file.

---

Function declarations are also hoisted in JavaScript. This means that you can call a function before it is declared in the code. For example:

```javascript
codefoo();

function foo() {
  console.log('Hello, world!');
}
```

The `foo` function is hoisted to the top of the current scope, so the code is interpreted as follows:

```javascript
function foo() {
  console.log('Hello, world!');
}

foo();
```

So, essentially, it's always a good idea to declare variables and functions at the top of their scope to avoid any confusion or unexpected behavior.

---

### Check your understanding

1. **What is hoisting in JavaScript?**
    
    A) A behavior that moves declarations to the top of the global scope before code execution
    
    B) A behavior that moves declarations to the bottom of the current scope before code execution
    
    C) A behavior that moves declarations to the top of the current scope before code execution
    
    D) A behavior that moves declarations to the middle of the current scope before code execution
    
2. **Which of the following is NOT true about hoisting in JavaScript?**
    
    A) It affects declarations, not assignments
    
    B) It moves function declarations to the top of the current scope
    
    C) It moves variable declarations to the top of the current scope
    
    D) It moves all declarations to the bottom of the current scope
    
3. **In the following code, what will be printed to the console?**
    

```javascript
console.log(x);
var x = 5;
```

A) 5

B) undefined

C) ReferenceError: x is not defined

D) TypeError: x is not a function

**Answers**

1. A
    
2. D
    
3. B