What is Hoisting in JavaScript?

Imagine that you are preparing for a magic show. Before starting, the magician organizes all the items he will use on stage, placing the cards, rabbits and hat in the right place. This helps him do the tricks without getting messed up.

In JavaScript, something similar happens when you write your code. The "magician", in this case, is JavaScript, which organizes some things before starting to run the program. This automatic organization is called hoisting.

---

How Does Hoisting Work?

1. Settings First:
   JavaScript takes all declarations of variables and functions and "climbs" them to the top of the code. It's as if he said: "Before I start, I'm going to separate everything that's important so I don't get lost."

2. Important:
   Only the declarations are moved to the top, not the assigned values. It's as if you were saying, "Hey, this magic hat exists!", but JavaScript only figures out how to use the hat when it arrives at the right time in the code.

---

A Simple Example

See this code:

console.log(meuNome); // undefined
var meuNome = "Jonas";
console.log(meuNome); // Jonas

At first it seems strange: How does JavaScript know that myName exists before I declare it?

This happens because he does something like this behind the scenes:

var meuNome; // Declaração "subiu"
console.log(meuNome); // undefined
meuNome = "Jonas"; // Valor atribuído
console.log(meuNome); // Jonas

In other words, it adds the declaration of the variable myName, but only assigns the value "Jonas" in the right place.

Hoisting with let and const

Now, there is an important difference: if you use let or const, JavaScript does not let you use the variables before declaring.
Check it out:

console.log(idade); // Erro: Cannot access 'idade' before initialization
let idade = 14;

This happens because let and const are "stored" in a special area and can only be used after you have declared them.

Hoisting with Functions

Functions in JavaScript are also "raised". See this example:

cumprimentar();

function cumprimentar() {
  console.log("Olá!");
}

Even calling the function before declaring, it works! This happens because JavaScript "climbs" the entire function to the top of the code.

Conclusion

Hoisting is as if JavaScript were a super organized magician: it takes a quick look at your code before it starts running, separates all the variable and function declarations, and only then does the show begin.

But remember: with great power comes great responsibility. Using hoisting without understanding it can cause confusion. So, declare your variables and functions carefully so that your code is clearer and more organized!

The above is the detailed content of What is Hoisting in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!