English link: https://javascript.plainenglish.io/demystifying-javascript-arrow-functions-7b2a0908a2b3
Translated using the translation plan activity on Juejin
Arrow functions are an alternative method to function expressions, but they have some differences in syntax and cannot be used in all cases. If you haven't read about function expressions in JavaScript, I recommend reading this article before continuing.
Now, let's try to understand arrow functions from the aspects of syntax, execution, scope and hoisting, and with code examples.
1. Syntax#
const arrowFunctionSyntax = () => {
console.log('Hi, I am an arrow function');
};
arrowFunctionSyntax();
In the code example above, we can see that arrow functions are similar to function expressions because they are assigned to variables. The main difference lies in the way the functions are written. Here are the observations we can make from the above code based on its syntax:
- It does not include the function keyword.
- It does not have a function name, which means they are anonymous functions.
- It introduces the arrow
=>symbol.
const arrowFunctionWithOneParam = (number) => number + 1;
const arrowFunctionWithMultipleParams = (numberOne, numberTwo) => {
let sum = numberOne + numberTwo;
return sum;
};
console.log(arrowFunctionWithOneParam(5));
console.log(arrowFunctionWithMultipleParams(5, 6));
If we observe arrowFunctionWithOneParam and arrowFunctionWithMultipleParams together, we can notice the differences in parentheses (), curly braces {}, and the use of the return keyword. According to the syntax of arrow functions, if a function takes only one parameter, the parentheses () can be omitted. If a function contains only one statement, the curly braces {} can be omitted, and finally, the return keyword can also be omitted if the function contains only one statement.
2. Execution#
const arrowFunctionExecution = () => {
console.log('Hi, my execution is similar to normal function');
};
arrowFunctionExecution();
When executing arrow functions, their execution is similar to that of other normal functions. When the JS engine executes arrowFunctionExecution(), it creates a function, an execution context, and pushes it onto the call stack. Once the execution context is created, it starts the creation phase. In this phase, it creates the argument object and declares all variables in its local memory heap.
The main difference compared to normal functions lies in the declaration of this. Arrow functions do not have their own this variable; this is lexically resolved when used in arrow functions. Shortly after the creation phase, the execution phase begins. At this point, it starts executing the statement console.log(), and prints "Hi, my execution is similar to normal function" to the console.
3. Scope#
const arrowFunctionScope = () => {
console.log('Hi, my scoping rules work similar to function expression');
};
These functions follow the same scoping rules as other function expressions. They have their own scope, and any variables declared inside the function cannot be accessed outside the function. These functions also do not work with the call, apply, and bind methods, which usually rely on scope. If you haven't read about scopes in JavaScript, I recommend reading this article.
4. Hoisting#
amIGoingToBeHoisted();
var amIGoingToBeHoisted = () => {
console.log('The answer is NO');
};
Arrow functions are not hoisted because they are also function expressions, where the function is assigned as the value of a variable. When the JavaScript engine executes the above code, during the creation phase, the declaration statement var amIGoingToBeHoisted is moved to the top and initialized with the value undefined, leaving the initial value behind. During the execution phase, when encountering the statement amIGoingToBeHoisted, a type error is thrown because its value is undefined, which is not a function type after hoisting. To learn more about JavaScript hoisting, I recommend reading this article.