Javascript Hoisting
Tags: javascript, hoisting, interview, tutorial
Published: 2022-08-02 20:57:40

**JavaScript Hoisting** is one of the hot topics in a interview process and that is why I am going to help you master hoisting.

**What is it?**
1. [Scope](#scope)
2. [Blocks](#blocks)
3. [Global Scope](#global-scope)
4. [Block Scope](#block-scope)
5. [Scope Pollution](#scope-pollution)

**How it works?**
1. [Variable Hoisting](#variable-hoisting)
2. [Function Hoisting](#function-hoisting)
2. [Class Hoisting](#class-hoisting)

**Exercises**
1. [Hoisting Exercises](#hoisting-exercises)

---

## Scope <a name="scope"></a>
Scope defines where variables can be accessed or referenced.

## Blocks <a name="blocks"></a>
Block is the code found inside a set of curly braces {}

```javascript
function greet() {
    b = 'hello';
    console.log(b); // hello
    var b;
}

greet();
```

## Global Scope <a name="global-scope"></a>
Global scope are variables that are declared outside of blocks.

```javascript
const color = 'blue';
 
const returnSkyColor = () => {
  return color; // blue 
};
 
console.log(returnSkyColor()); // blue
```
## Block Scope <a name="block-scope"></a>
Variables that are declared with block scope are known as local variables, because they are only available to the code that is part of the same block.

```javascript
const logSkyColor = () => {
  let color = 'blue'; 
  console.log(color); // blue 
};
 
logSkyColor(); // blue 
console.log(color); // ReferenceError
```

## Scope Pollution <a name="scope-pollution"></a>
Scope pollution is when we have too many global variables that exist in the global namespace, or when we reuse variables across different scopes.

```javascript
let num = 50;
 
const logNum = () => {
  num = 100; // Take note of this line of code
  console.log(num);
};
 
logNum(); // Prints 100
console.log(num); // Prints 100
```

## Variable Hoisting <a name="variable-hoisting"></a>
Variable hoisting acts differently depending on how the variable is declared **(var,let,const)**.

####Notes:
- Variables declared with the keyword **let are block scoped**;
- The **const** keyword allow **immutable variables**. That is, variables whose **value cannot be modified once assigned**;
- Variables declared with **let and const remain uninitialised** at the beginning of execution whilst variables declared with **var** are initialised with a **value of undefined**.

### Variable var

```javascript
var foo;

console.log(foo); // undefined

foo = 'foo';

console.log(foo); // "foo"
```

### Variable let & const

```javascript
console.log(foo); // Uncaught ReferenceError: Cannot access 'foo' before initialization

let foo = 'bar';  // Same behavior for variables declared with const
```

## Function hoisting <a name="function-hoisting"></a>
Function hoisting allows us to call a function before it is defined

```javascript
foo(); // "foo"

function foo() {
	console.log('foo');
}
```

BUT NOT **Function Expressions**

```javascript
foo(); // Uncaught TypeError: foo is not a function
var foo = function () { }

bar(); // Uncaught ReferenceError: Cannot access 'bar' before initialization
let bar = function () { }

baz(); // Uncaught ReferenceError: Cannot access 'baz' before initialization
const baz = function () { }
```

## Class Hoisting <a name="class-hoisting"></a>

```javascript
var Frodo = new Hobbit();
Frodo.height = 100;
Frodo.weight = 300;
console.log(Frodo); // Output: ReferenceError: Hobbit is not defined

class Hobbit {
  constructor(height, weight) {
    this.height = height;
    this.weight = weight;
  }
}
```

## Hoisting Exercises <a name="hoisting-exercises"></a>

1. 

```javascript

function func11(){
	var a=5;
	console.log(a, b); 
	var b=6;
}
func11();
```

2. 

```javascript
console.log(var1);   
var var1 = 1;
function func(){
  console.log(var1);    
  var var1 = 2;
  console.log(var1);    
}
var var1 = 3;
console.log(var1);     
func();
```

3. 

```javascript
function func(){
  //console.log(var1);   
  //console.log(let1);   
  if(true){
  	var var1 = 2;
  	let let1 = 23;
  }
  //console.log(var1);   
  //console.log(let1);   
}
var var1 = 3;
func();
```

4. 

```javascript
func1();        
func2();        
function func1(){
	console.log('func1');
}
var func2 = function(){
	console.log('func2');
}
```

5. 

```javascript
var var1=2;
console.log(i);       
for(var i=0; i<11; i++){
	console.log('asdf');
}
console.log(i);    
```