In JavaScript, we have different ways to define functions. function foo() {} and var foo = function() { } are two different ways of defining a function. Both methods have their advantages and different use cases; however, both give the same result when executing the function.
So, this tutorial will teach us the difference between the two ways of defining a function.
function foo() { } is the regular way to declare a function in JavaScript and is used by every beginner and developer. Alternatively, we can call it a named function.
When program execution control reaches the scope of the function declaration, JavaScript evaluates the function declaration. Function declaration evaluation is not part of the step-by-step process, but is evaluated at the beginning.
Additionally, function declarations are hoisted to the top of every code within the specific scope in which it is declared. Therefore, we can call the function anywhere in the scope, even before declaration.
Users can declare functions according to the following syntax.
function foo(parameters, .... ) {
// function body
}
In the above syntax, 'function' is the keyword representing the function declaration, and foo is the function name.
In this example, we define the function foo() through a function declaration. After that, we call it like a normal function.
<html>
<body>
<h2>function foo() { } (function declaration)</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
// declaring the function
function foo() {
output.innerHTML += "The function foo is invoked!";
}
foo();
</script>
</body>
</html>
In the example below, we define a function with parameters. We pass invokedPosition as the second argument, representing the position from which we are calling the function.
We called the foo() function before the declaration because JavaScript evaluates the function at the beginning when the execution flow enters the scope and is raised to the top.
<html>
<body>
<h2>function foo() { } (function declaration)</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
// As foo is hoisted on top, we can call the function before the declaration
foo(10, "Top");
// declaring the function with parameters
function foo(param1, inovkingPosition) {
output.innerHTML += "The function foo is invoked from " + inovkingPosition + "</br>";
output.innerHTML += "The value of the param1 is " + param1 + " <br/> <br/>";
}
foo(20, "bottom");
</script>
</body>
</html>
var foo = function() { } is also the same as defining a function, which is called a function expression. Here, function() { } is the function expression we store in the foo variable. foo is a normal variable like any other variable, even we can store numbers and strings in foo variable.
JavaScript does not evaluate function expressions at the beginning like function declarations do. It evaluates function expressions step by step. When the execution flow reaches a function expression, JavaScript evaluates the expression and stores it in the foo variable.
Additionally, the function expression is not hoisted to the top of the code, so we cannot call the function expression before defining it like a function declaration.
Users can use function expressions to define functions according to the following syntax.
var foo = function (params) {
// function body
};
In the above syntax, the function definition has no name, so we can call it an anonymous function. We can use the foo variable as the identifier of the function.
In this example, we defined the function using a function expression and stored it inside the foo identifier. After that, we use the foo identifier to call the function expression stored in it, passing the arguments in the foo identifier.
<html>
<body>
<h2>var foo = function() { } (function expression)</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
// defining the function expression and storing it in the foo variable
var foo = function (param) {
output.innerHTML += "Inside the function expression. </br>";
output.innerHTML += "The value of the param is " + param + "</br>";
};
// calling the function expression via foo identifier
foo("Hi Users!");
</script>
</body>
</html>
Function expressions have different use cases. Users can write a short syntax for functions using it as a callback function. In addition, users can also use it as a closure function. Sometimes, we need to pass a function as a parameter and then we can use function expressions.
In this example, we pass a function expression as an argument to the sort() method. Users can see that we are passing anonymous functions as parameters instead of writing declarations with names.
<html>
<body>
<h2>Passing function expression as an argument</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
let number = [320, 45, 3, 23, 54];
// passing the function expression as an argument of the sort() method
number.sort(function (element1, element2) {
return element2 - element1;
});
output.innerHTML += "The sorted array is " + number;
</script>
</body>
</html>
The following table highlights the main differences between function foo() { } and var foo = function() { }:
Function foo() { } |
var foo = function() { } |
|---|---|
This is a function declaration. |
It is a function expression. |
It is suspended from the top of the scope. |
It is not promoted in scope. |
JavaScript evaluates the scope at the beginning of its execution. |
JavaScript evaluates code as it steps through it. |
We can identify it by the function name. |
We can identify it using the identifier in which it is stored. |
is used to define ordinary functions. |
Use it when we need to pass a function as a parameter or need to use a function as a closure. |
In JavaScript, there are two ways to define functions: Function declaration and Function expression. Function declarations are defined using the function keyword, followed by the function name, usually written as function foo() {}. When program execution reaches the scope where the function is declared, JavaScript evaluates the function declaration and hoists it to the top of the code in that scope. This means they can be called before they are declared.
Function expressions are defined using variables, usually written as var foo = function() {}. Function expressions are not hoisted and must be defined before being called. Function declarations and function expressions can perform the same task, but they have different syntax and computational behavior.
The above is the detailed content of Explain the difference in foo usage between function foo() {} and var foo = function() {}. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
