Hoisting in JavaScript refers to the hoisting of variable and function declarations to the top of the scope in which they reside during code execution. This means that these variables or functions can be used before they are declared without raising an error.
Variable declaration hoisting:
In JavaScript, variables declared with the `var` keyword are hoisted to the top of the scope. For example:
```javascript
console.log(x); // output undefined
var x = 5;
```
In the above code, the variable `x` is printed before its declaration, but its value is `undefined`. This is because the variable declaration is hoisted to the top of the scope, but the assignment remains where it was. Therefore, the variable exists before it is declared, but its value has not yet been assigned.
Function declaration hoisting:
Unlike variable declarations, functions created using the function declaration syntax are hoisted by the entire declaration. For example:
```javascript
foo(); // 输出 "Hello"
function foo() {
console.log("Hello");
}
```
In the code above, the function `foo` is called before its declaration and no error is raised. This is because function declarations are hoisted to the top of the scope, making them accessible and callable before they are declared.
Note that only function declarations are fully hoisted, function expressions are not. For example:
```javascript
bar(); // 报错: bar is not a function
var bar = function() {
console.log("World");
};
```
In the above code, a function is created using a function expression and assigned to the variable `bar`. Because the variable declaration is hoisted, `bar` exists before the function expression, but its value is `undefined`. Therefore, trying to call `bar()` will result in an error.
Summary:
Declaration hoisting in JavaScript makes variable and function declarations available at the top of the scope they are in. Although the declaration is hoisted, the assignment remains in place. When writing JavaScript code, understanding the behavior of declaration hoisting can help you avoid unexpected errors and gain a better understanding of the order in which code executes.
Here are some examples of claim promotion:
Example 1: Variable declaration hoisting
```javascript
console.log(x); // output undefined
var x = 5;
```
Explanation: The variable `x` was printed before it was declared, but its value was `undefined`. This is because the variable declaration is hoisted to the top of the scope, but the assignment remains where it was.
Example 2: Function declaration hoisting
```javascript
foo(); // 输出 "Hello"
function foo() {
console.log("Hello");
}
```
Explanation: The function `foo` is called before it is declared without raising an error. This is because function declarations are hoisted to the top of the scope, making them accessible and callable before they are declared.
Example 3: Function expressions are not hoisted
```javascript
bar(); // 报错: bar is not a function
var bar = function() {
console.log("World");
};
```
Explanation: A function was created using a function expression and assigned to the variable `bar`. Because the variable declaration is hoisted, `bar` exists before the function expression, but its value is `undefined`. Therefore, trying to call `bar()` will result in an error.
These examples demonstrate the behavior of variable and function declaration hoisting. Understanding the principles and rules of declaration hoisting can help you understand how JavaScript code behaves during execution.