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
Selected Reading
Assigning function to variable in JavaScript?
In JavaScript, you can assign a function to a variable in several ways. This allows you to store functions for later use, pass them as arguments, or return them from other functions.
Method 1: Function Expression
The most common way is using a function expression, where you assign an anonymous function to a variable:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Function Assignment</title>
</head>
<body>
<script>
// Assigning function to variable
var greet = function(name) {
return "Hello, " + name + "!";
};
// Using the function
console.log(greet("John"));
console.log(greet("Alice"));
</script>
</body>
</html>
Hello, John! Hello, Alice!
Method 2: Arrow Function (ES6)
You can also use arrow functions for a more concise syntax:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arrow Function Assignment</title>
</head>
<body>
<script>
// Arrow function assignment
const multiply = (a, b) => a * b;
const square = x => x * x;
console.log(multiply(5, 3));
console.log(square(4));
</script>
</body>
</html>
15 16
Method 3: Assigning Named Functions
You can assign a named function to a variable:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Named Function Assignment</title>
</head>
<body>
<script>
// Define a named function
function calculateArea(radius) {
return Math.PI * radius * radius;
}
// Assign to variable
var areaCalculator = calculateArea;
console.log(areaCalculator(5));
console.log(calculateArea(5)); // Both work the same
</script>
</body>
</html>
78.53981633974483 78.53981633974483
Practical Example: Function Returning Array
Here's a practical example that processes data and returns results:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Function Returning Data</title>
</head>
<body>
<script>
// Function assigned to variable
var getStudentGrades = function(students) {
var grades = [];
for(var i = 0; i < students.length; i++) {
grades.push(students[i].grade);
}
return grades.join(", ");
};
var studentList = [
{name: "John", grade: "A"},
{name: "Alice", grade: "B"},
{name: "Bob", grade: "A+"}
];
console.log(getStudentGrades(studentList));
</script>
</body>
</html>
A, B, A+
Key Points
- Functions are first-class objects in JavaScript, meaning they can be assigned to variables
- Function expressions create functions at runtime
- Arrow functions provide shorter syntax but have different
thisbinding - Assigned functions can be called using the variable name followed by parentheses
Conclusion
Assigning functions to variables is a powerful feature in JavaScript that enables functional programming patterns. Use function expressions for most cases, and arrow functions when you need concise syntax.
Updated on: 2026-03-15T23:18:59+05:30
272 Views
Advertisements