Preface
There are two ways to create a function in JavaScript:Function expressions and function declarations. In this article, we will discuss when to use function expressions and function declarations and explain the difference between them.
Function declarations have been used for a long time, but function expressions have gradually dominated. There are some key differences between function expressions and function declarations, let's take a look at these differences and when to use function expressions and function declarations in your code.
// Function declarationfunction funcDeclaration() {
return "Function declaration";
}
// Function expressionconst funcExpression = function () {
return "Function Expression";
};
What is a function declaration?
Function declaration is the way to create and name a function, and start using itfunctionKeyword declaration function.
For example:
function customFunction() {
// Function logic ("Hello")
};
As seen above, the function name (customFunction) is declared when creating a function, so that the function can be called before it is defined.
as follows:
customFunction();
function customFunction() {
// Function logic ("Hello");
}
Benefits of function declaration
- It can make the code more readable: If there is a very long function, giving it a name can help track what it is doing.
- Function declaration is promoted: Functions defined in this way can be called before definition, which is useful if you need to use the function before definition.
What are function expressions?
Function expressions are created and assigned to variables. The function defined in this way is an anonymous function, which means it has no name.
For example:
const customFunction = function() {
// Function logic ("Hello")
};
As mentioned above, the function is assigned tocustomFunctionVariable, this method must first define the function before it can be called.
The following method is wrong:
customFunction();
const customFunction = function() {
// Function logic ("Hello")
};
Benefits of Function Expressions
- More flexible than function declarations: Function expressions can be created and assigned to different variables, which can be helpful when you need to use the same function in different places.
- Function expression not promoted: They cannot be used until they are defined in the code. This is helpful if you want to make sure that the function is only used after definition.
The difference between function expression and function declaration
There are several key differences between function expressions and function declarations:
- Function declarations are promoted (for promotion, please refer to "Javascript variable function declaration enhances deep understanding》, while function expressions do not. It can be called before defining a function declaration, but you cannot do this using a function expression.
- Using function expressions, you can use it immediately after defining a function. Using function declarations, you must wait until the entire script is parsed.
- Function expressions can be anonymous, while function declarations cannot.
Scope in function expressions
andletStatement is similar, function declarations are promoted to the top of other codes. Function expressions will not be promoted. This allows them to keep copies of local variables from the scope in which they are defined.
Usually, function declarations and function expressions can be used interchangeably, but sometimes function expressions generate more understandable code without the need for temporary function names.
How to choose between an expression and a declaration
So, when should function expressions and function declarations be used?
The answer depends on the requirements, if a more flexible function or a function that is not promoted, then the function expression is the first choice. If you need a function that is more readable and understandable, use the function declaration.
As seen above, the two syntaxes are similar, with the most obvious difference being that function expressions are anonymous, while function declarations have names. Function declarations are usually used when you need to do something that function expressions cannot do. If you don't need to do anything that can only be done with a function declaration, it's usually better to use a function expression.
When you need to create a recursive function or need to call the function before defining it, you need to use a function declaration.
As a rule of thumb, use function expressions to get cleaner code when these things are not needed.
When to select function declaration and function expression
In most cases, it is easy to determine which method to define a function is best suited for the needs. The following guidelines can make decisions quickly in most cases.
Use function declarations in the following cases
- Need a more readable and understandable function (such as a long function, or a function that needs to be used in different places)
- Anonymous functions are not suitable for requirements
- Need to create a recursive function
- This function needs to be called before definition
Use function expressions in the following cases
- Need a more flexible feature
- Need an unimproved feature
- This function should only be used when defined
- The function is anonymous or does not require a name for later use
- Want to control when a function is executed, use techniques such as calling function expressions (IIFE) immediately
This is the end of this article about the usage and differences between JavaScript function expressions and function declarations. For more related JS function declaration content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!