HOISTING IN JAVASCRIPT
Tags: javascript, webdev, beginners, tutorial
Published: 2023-11-08 03:12:04

As I did when I first heard of hoisting in programming, we may have assumed it was a complicated idea, but it's actually a fairly simple concept in JavaScript.

Code hoisting is automatic in javascript and can lead to confusion if you are not aware of it. So it is very good to follow best practice if you want to write predictable(Your code outcome is easily understood and anticipated) and readable code

**Meaning of Hoisting**
Hoisting is the magic trick that occurs when your code runs. When you write code, JavaScript secretly moves variable and function declarations to the top before executing the code, making it appear as if you wrote them at the top of the containing block, even if you placed them later in your code.

For example, if you have a variable declared at the bottom of your code, JavaScript will act as if you declared it at the top. Therefore, you can use the variable before you declare it, and JavaScript won't generate an error.


```
var myVar; // Declaration (no value assigned yet)

myVar = 42; // Initialization (assigning the value 42 to myVar)

var anotherVar = "Hello, World!"; // Declaration and Initialization
```

Below is a breakdown of how hoisting works for variables and functions in JavaScript.

**Variable Hoisting:**
When declaring a variable using the 'var' keyword, JavaScript moves the declaration to the top; however, the assignment (initialization) of the variable remains in its original place. This means that the variable is accessible but not initialized before the actual declaration in the code.

**Example:**

```
console.log(myVar); // this will output undefined
var myVar = 6;
console.log(myVar); // this will output 6
```

The variable **myVar**  in the above code is hoisted to the top of the current scope, but its value is undefined until it is assigned the value 6.

Note that this  behaviour applies to variables declared with **var**. Variables declared with **let** and **const** will result in an error if accessed before declaration.

**Here's an example of how variables declared with let or const behave:**

```
console.log(myVar); //this will output Uncaught ReferenceError: Cannot access 'myVar' before initialization  

let myVar = 6; 
```

**Function Hoisting:**
Function declarations are also hoisted in JavaScript. This means that you can use a function before it's declared in your code.

```
sayHello(); // Output: "Hello, World!"

function sayHello() {
  console.log("Hello, World!");
}

```

In the above  function declarations,  the sayHello function is moved to the top of the current scope, allowing you to call it before its actual declaration in the code.

Also, note that function expressions (e.g., using the 'var,' 'let,' or 'const' keywords to assign a function to a variable) do not exhibit the same hoisting behavior. Only the function declaration itself is hoisted, not the function assigned to a variable.

**Here's an example of how function expressions behave**
```
sayHello(); // Error: sayHello is not a function

var sayHello = function() {
  console.log("Hello, World!");
};
```

In this article, we've broken down JavaScript hoisting and discussed its use cases. Thank you for reading to the end. This marks my debut article, and I'll continue dissecting more JavaScript concepts as I delve deeper into the language.