# What is Hoisting in JavaScript?

JavaScript is a fascinating and sometimes perplexing programming language that behaves unexpectedly in certain scenarios. One of these concepts is hoisting, where we may not fully grasp what is happening behind the scenes. In this guide, I will explain hoisting in JavaScript with examples to shed some light on this topic.

What is Hoisting?

To understand hoisting, we need to grasp how the JavaScript engine executes code. When we run JavaScript code, the engine creates a global execution context.

The global execution context consists of two phases: creation and execution.

During the creation phase, JavaScript moves all variable declarations and function declarations to the top. Then, during the execution phase, the engine executes the code line by line from top to bottom. This process of moving declarations to the top is known as hoisting.

Now that we have a theoretical understanding of hoisting, let's explore some code examples.

1. Variable Hoisting
    

Variables declared with the `var` keyword are hoisted. If we initialize a variable before declaring it, it will work perfectly fine. For example:

```javascript
name = "John";
console.log(name);
var name;
// Output: John
```

Note that only the declaration is hoisted, not the initialization. For example:

```javascript
console.log(name);
var name = "John";
// Output: undefined
```

Variables declared with `let` and `const` are also hoisted, but they are not initialized with `undefined` like variables declared with `var`. For example:

```javascript
name = "John";
console.log(name);
let name;
// Output: ReferenceError: Cannot access 'name' before initialization
```

1. Function Hoisting
    

Function declarations are hoisted, which means a function can be called before it is defined. For example:

```javascript
console.log(sayHello("John"));

function sayHello(name) {
    return `Hello, ${name}!`;
}

// Output: Hello, John!
```

However, this is not the case for function expressions and arrow functions. Let's see an example:

```javascript
console.log(sayHello("John"));
const sayHello = function () {
    return `Hello, ${name}!`;
}

// Output: ReferenceError: Cannot access 'sayHello' before initialization
```

Conclusion

Hoisting is an important concept in JavaScript that is often overlooked. Understanding hoisting is crucial, especially for technical interviews. In this article, we have discussed how hoisting works under the hood and provided examples of variable and function hoisting. I hope this clears up any doubts you may have had regarding hoisting.