Normal Functions:
🔍 What is it?
- Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compilation phase, before the code execution.
❓ How is it used?
- Function declarations are hoisted entirely, meaning that the entire function body is moved to the top of the scope, making it available for invocation even before it appears in the code.
- Function expressions, however, are not hoisted entirely. Only the variable declaration is hoisted, while the assignment (the function definition) remains in place.
Why is it needed?
- Hoisting allows developers to call functions before they are defined in the code, which can be useful for structuring code and improving readability.
Examples:
```javascript
// Function declaration
greet(); // Output: "Hello, world!"
function greet() {
console.log("Hello, world!");
}
// Function expression
sayHello(); // Throws an error: sayHello is not a function
var sayHello \= function() {
console.log("Hello!");
};
```
Arrow Functions:
🔍 What is it?
- Arrow functions are a more concise syntax for writing function expressions in JavaScript, introduced in ECMAScript 6 (ES6). Unlike normal functions, arrow functions do not have their own
thiscontext and are not suitable for use as constructors.
❓ How is it used?
- Arrow functions can be used in place of traditional function expressions, especially for short anonymous functions. They have a simpler syntax and lexically bind the
thisvalue, meaning they inheritthisfrom the surrounding code.
Why is it needed?
- Arrow functions provide a more concise syntax for defining functions, making the code cleaner and easier to read. They also eliminate the need to use
bind,call, orapplyto maintain the correctthiscontext.
Examples:
```javascript
// Traditional function expression
var add \= function(x, y) {
return x + y;
};
console.log(add(2, 3)); // Output: 5
// Arrow function
var add \= (x, y) \=> x + y;
console.log(add(2, 3)); // Output: 5
// Arrow function with multiple statements
var greet \= name \=> {
console.log("Hello, " + name + "!");
};
greet("Alice"); // Output: "Hello, Alice!"
```
Differences:
- Scope of
this: Arrow functions do not have their ownthiscontext; instead, they inheritthisfrom the surrounding code (lexical scoping). Normal functions have their ownthiscontext, which is determined by how they are called. - Hoisting Behavior: Normal function declarations are hoisted entirely, allowing them to be called before they appear in the code. Function expressions, including arrow functions, are only partially hoisted, with the variable declaration being hoisted but not the function definition.
- Use Cases: Arrow functions are often used for short anonymous functions and for methods that do not need their own
thiscontext. Normal functions are still commonly used for function declarations and for methods that require their ownthiscontext, such as object methods and constructor functions.