---
title: "Explain the concept of \"hoisting\" in JS. How does it affect variable and function declarations?"  
description: "Explain the concept of \"hoisting\" in JS. How does it affect variable and function declarations?"  
author: "Ravi Vishwakarma"  
published: 2024-06-17  
updated: 2024-06-17  
canonical: https://www.mindstick.com/interview/33907/explain-the-concept-of-hoisting-in-js-how-does-it-affect-variable-and-function-declarations  
category: "javascript"  
tags: ["web development", "javascript", "front-end development"]  
reading_time: 4 minutes  

---

# Explain the concept of "hoisting" in JS. How does it affect variable and function declarations?

JavaScript **Hoisting** refers to the process whereby the interpreter appears to move the declaration of **functions**, **variables**, **classes**, or imports to the top of their [scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope), before execution of the code.

#### Variable Hoisting:

When you declare a variable using `var` or `let`, the declaration is hoisted to the top of its scope. Here's how hoisting affects variables:

- **Declaration Hoisting:** The declaration of a variable using the var or let keyword is hoisted to the top of its containing scope. This means the variable is available throughout the scope, even before the actual line where it's declared.

```javascript
console.log(x); // undefined (not ReferenceError) due to hoisting
var x = 10;
```

After hoisting, the code behaves like this:

```javascript
var x; // declaration is hoisted
console.log(x); // undefined
x = 10; // initialization happens at its original position
```

- **Initialization:** Only the declaration (not the initialization) is hoisted. Therefore, if you try to access the value of a variable before it is initialized, you will get "undefined".

```javascript
console.log(x); // undefined
var x = 10;
```

- **Block Scope with let:** Variables declared with let and const are also hoisted to the top of their block scope, but they are not initialized. Trying to access them before their declaration results in a 'ReferenceError'.

```javascript
console.log(x); // ReferenceError: Cannot access 'x' before initialization
let x = 10;
```

#### Function Hoisting:

Function declarations are fully hoisted, including both the function name and its body. This allows you to call a function before its actual declaration in the code.

- **Function Declaration Hoisting:**

```javascript
foo(); // 'Hello, world!'

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

After hoisting code like this

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

- **Function Expressions are Not Hoisted:** Function expressions (where you assign a function to a variable) are not hoisted in the same way as function declarations. Only the variable declaration is hoisted, not the function assignment.

```javascript
foo(); // TypeError: foo is not a function

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

After hoisting code behaves like this.

```javascript
var foo;
foo(); // foo is not a function
foo = function() {
    console.log('Hello, world!');
};
```

## Answers

### Answer by Ravi Vishwakarma

JavaScript **Hoisting** refers to the process whereby the interpreter appears to move the declaration of **functions**, **variables**, **classes**, or imports to the top of their [scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope), before execution of the code.

#### Variable Hoisting:

When you declare a variable using `var` or `let`, the declaration is hoisted to the top of its scope. Here's how hoisting affects variables:

- **Declaration Hoisting:** The declaration of a variable using the var or let keyword is hoisted to the top of its containing scope. This means the variable is available throughout the scope, even before the actual line where it's declared.

```javascript
console.log(x); // undefined (not ReferenceError) due to hoisting
var x = 10;
```

After hoisting, the code behaves like this:

```javascript
var x; // declaration is hoisted
console.log(x); // undefined
x = 10; // initialization happens at its original position
```

- **Initialization:** Only the declaration (not the initialization) is hoisted. Therefore, if you try to access the value of a variable before it is initialized, you will get "undefined".

```javascript
console.log(x); // undefined
var x = 10;
```

- **Block Scope with let:** Variables declared with let and const are also hoisted to the top of their block scope, but they are not initialized. Trying to access them before their declaration results in a 'ReferenceError'.

```javascript
console.log(x); // ReferenceError: Cannot access 'x' before initialization
let x = 10;
```

#### Function Hoisting:

Function declarations are fully hoisted, including both the function name and its body. This allows you to call a function before its actual declaration in the code.

- **Function Declaration Hoisting:**

```javascript
foo(); // 'Hello, world!'

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

After hoisting code like this

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

- **Function Expressions are Not Hoisted:** Function expressions (where you assign a function to a variable) are not hoisted in the same way as function declarations. Only the variable declaration is hoisted, not the function assignment.

```javascript
foo(); // TypeError: foo is not a function

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

After hoisting code behaves like this.

```javascript
var foo;
foo(); // foo is not a function
foo = function() {
    console.log('Hello, world!');
};
```


---

Original Source: https://www.mindstick.com/interview/33907/explain-the-concept-of-hoisting-in-js-how-does-it-affect-variable-and-function-declarations

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.