Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Explain the differences in the usage of foo between function foo() {} and var foo = function() {}
In JavaScript, we have different ways to define the functions. The function foo() {} and var foo = function() { } is two different ways to define the function. Both ways have their benefits and different use cases; however, both give the same result when executing the function.
So, this tutorial will teach us the difference between both ways to define a function.
Explanation of the function foo() { }: function declaration
The function foo() { } is the normal way to declare the function in JavaScript, which every beginner and developer uses. Also, we can call it a named function.
JavaScript evaluates the function declaration when program execution control reaches the scope in which the function is declared. Function declaration evaluation is not part of the step-by-step process but is evaluated at the start.
Also, a function declaration is hoisted at the top of every code in the particular scope where it is declared. So, we can call the function anywhere in the scope, even before the declaration.
Syntax
Users can follow the syntax below to declare the function.
function foo(parameters, .... ) {
// function body
}
In the above syntax, the ‘function’ is a keyword representing the function declaration, and foo is the function name.
Example
We have defined the function foo() via function declaration in this example. After that, we invoked it as we invoked the 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>
Example
In the example below, we have defined the function with parameters. We have passed the invokedPosition as a second parameter, representing where we have invoked the function.
We have invoked the foo() function before declaration as JavaScript evaluates the function at the start when the execution flow enters the scope and is hoisted at 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>
Explanation of the var foo = function() { }: function expression
The var foo = function() { } is also the same as defining the function and is called the function expression. Here, the function() { } is a function expression which we are storing in the foo variable. The foo is a normal variable like other variables, and even we can store numbers and strings in the foo variable.
JavaScript doesn’t evaluate the function expression at the start like the function declaration. It evaluates the function expression step-by-step. When the execution flow reaches the function expression, JavaScript evaluates the expression and stores it inside the foo variable.
Also, the function expression is not hoisted on the top of the code, so we can’t call it before defining the function expression like the function declaration.
Syntax
Users can follow the syntax below to define the function using the function expression.
var foo = function (params) {
// function body
};
In the above syntax, the function is defined without the name, so we can call it an anonymous function. We can use the foo variable as an identifier of the function.
Example
In this example, we have defined the function using the function expression and stored it inside the foo identifier. After that, we used the foo identifier to invoke the function expression stored inside that, and also we passed the parameter 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>
There are different use cases of the function expression. Users can use it as a callback function to write the short syntax of the function. Also, users can use it as a closure function. Sometimes, we need to pass the function as an argument, and then we can use the function expression.
Example
In this example, we have passed the function expression as an argument of the sort() method. Users can see that we have passed the anonymous function as an argument rather than writing the declaration with a name.
<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>
Difference between function foo() { } and var foo = function() { }
The following table highlights the major differences between function foo() { } and var foo = function() { }:
function foo() { } |
var foo = function() { } |
|---|---|
It is a function declaration. |
It is a function expression. |
It is hoisted at the top of the scope. |
It is not hoisted in the scope. |
JavaScript evaluates it at the start of the scope execution. |
JavaScript evaluates it in the step-by-step code execution. |
We can identify it using the function name. |
We can identify it using the identifier in which it is stored. |
It is used to define the normal function. |
It is used when we need to pass a function as an argument or need to use a function as a closure. |
Conclusion
In JavaScript, there are two ways to define a function: function declarations and function expressions. Function declarations are defined using the function keyword, followed by the function name, and are usually written as function foo() {}. Function declarations are evaluated by JavaScript when the program execution reaches the scope in which they are declared, and are hoisted to the top of the code in that scope. This means that they can be called before they are declared.
Function expressions are defined using a variable and are usually written as var foo = function() {}. Function expressions are not hoisted and must be defined before they are called. Function declarations and function expressions can perform the same tasks, but they have different syntax and evaluation behaviors.
878 Views
