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
How can we assign a function to a variable in JavaScript?
In this tutorial, we will learn to assign a function to a variable in JavaScript. Functions are reusable code blocks that can be stored in variables as expressions. There are two main ways to achieve this: using anonymous functions and arrow functions.
Most JavaScript programmers are familiar with named functions, which follow this syntax:
function function_name() {
// function body
}
However, when we want to assign a function to a variable as an expression, we have two different approaches:
Creating Anonymous Functions
Creating Arrow Functions
Creating Anonymous Functions
An anonymous function is a function declared without a name. It's the first way to assign a function to a variable and works as an expression that compiles when code execution reaches that line.
Syntax
var functionVariable = function(parameters) {
// code to be executed
}
In this syntax, we assign an anonymous function expression to a variable, then invoke it using the variable name.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Anonymous Functions</h2>
<p>Assigning a function to a variable</p>
<div id="func"></div>
<div id="demo"></div>
<script>
var add = function(x, y) {
return x + y;
}
let result = add(3, 5);
document.getElementById("func").innerHTML = "Function stored in variable: " + add;
document.getElementById("demo").innerHTML = "add(3, 5) = " + result;
</script>
</body>
</html>
Function stored in variable: function(x, y) { return x + y; }
add(3, 5) = 8
Creating Arrow Functions
The arrow function is the modern way to assign functions to variables, introduced in ES6. It provides a shorter syntax without the function keyword, using an arrow (=>) instead.
Arrow functions are recommended when assigning functions to variables, especially when using const since the function reference remains constant.
Syntax
const variable = (parameters) => {
// function body
}
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Functions</h2>
<div>
<p>Arrow function assigned to variable</p>
<p id="demo1"></p>
<p id="demo2"></p>
</div>
<script>
const sum = (x, y, z) => {
return x + y + z;
}
let result = sum(10, 502, 340);
document.getElementById("demo1").innerHTML = "const sum = " + sum;
document.getElementById("demo2").innerHTML = "sum(10, 502, 340) = " + result;
</script>
</body>
</html>
const sum = (x, y, z) => { return x + y + z; }
sum(10, 502, 340) = 852
Comparison
| Method | Syntax Length | ES Version | Recommended Use |
|---|---|---|---|
| Anonymous Function | Longer | ES5+ | Legacy compatibility |
| Arrow Function | Shorter | ES6+ | Modern development |
Key Points
Use
constwhen assigning functions to variables to prevent reassignmentAnonymous functions compile at runtime, while named functions compile at parse time
Arrow functions have a more concise syntax and are preferred in modern JavaScript
Both approaches allow you to pass parameters and return values
Conclusion
JavaScript offers two effective ways to assign functions to variables: anonymous functions and arrow functions. Arrow functions are recommended for modern development due to their cleaner syntax and ES6 features.
27K+ Views
