Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Explain the differences in the usage of foo between function foo() {} and var foo = function() {}
In JavaScript, there are two primary ways to define functions: function declarations and function expressions. While both achieve similar results, they behave differently in terms of hoisting and evaluation timing.
Function Declaration: function foo() {}
Function declarations use the function keyword followed by the function name. They are hoisted to the top of their scope, meaning you can call them before they're defined in the code.
Syntax
function foo(parameters) {
// function body
}
Example: Basic Function Declaration
<html>
<body>
<h2>Function Declaration Example</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
// Function declaration
function foo() {
output.innerHTML += "Function foo is invoked!<br>";
}
foo();
</script>
</body>
</html>
Example: Hoisting Demonstration
<html>
<body>
<h2>Function Declaration Hoisting</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
// Call function before declaration (works due to hoisting)
foo(10, "before declaration");
function foo(param1, position) {
output.innerHTML += "Function called " + position + " with value: " + param1 + "<br>";
}
foo(20, "after declaration");
</script>
</body>
</html>
Function Expression: var foo = function() {}
Function expressions assign an anonymous function to a variable. They are not hoisted and must be defined before being called. The variable follows normal scoping rules.
Syntax
var foo = function(parameters) {
// function body
};
Example: Basic Function Expression
<html>
<body>
<h2>Function Expression Example</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
// Function expression
var foo = function(message) {
output.innerHTML += "Function expression says: " + message + "<br>";
};
foo("Hello from function expression!");
</script>
</body>
</html>
Example: Function Expression as Callback
<html>
<body>
<h2>Function Expression as Callback</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
let numbers = [320, 45, 3, 23, 54];
// Function expression as callback for sort()
numbers.sort(function(a, b) {
return b - a; // Sort in descending order
});
output.innerHTML += "Sorted array: " + numbers.join(", ");
</script>
</body>
</html>
Key Differences
| Aspect | function foo() {} | var foo = function() {} |
|---|---|---|
| Type | Function Declaration | Function Expression |
| Hoisting | Yes - entire function is hoisted | No - only variable declaration is hoisted |
| When evaluated | At parse time | At runtime when reached |
| Can call before definition | Yes | No |
| Common use cases | General function definition | Callbacks, conditional functions, closures |
When to Use Each
Use function declarations when you want a function available throughout its entire scope, regardless of where it's defined. This is ideal for main utility functions.
Use function expressions when you need to assign functions conditionally, pass them as arguments, or create closures. They're perfect for callbacks and event handlers.
Conclusion
Function declarations are hoisted and can be called before definition, while function expressions must be defined before use. Choose function declarations for general-purpose functions and function expressions for callbacks and conditional function creation.
1K+ Views
