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
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. The function is the code block that we can reuse quickly, often just by making a function call. There are two ways to declare a function in JavaScript, one is a named function, and another is an anonymous function.
Most JavaScript programmers are familiar with the name function, and users can follow the below syntax to declare the named function.
function function_name() { //function body }In the above syntax, users can see that, we can create a function definition with the function keyword and following by function name.
Now, what if we want to assign the whole function to the variable as an expression? Here, we have 2 different ways to achieve our goal.
Creating the Anonymous Function
Creating the Arrow Function
Creating the Anonymous Function
The anonymous function name suggests that we are declaring the function without its identity means its name.
It is the first way to assign the function to the variable.
Creating an anonymous function works as an expression and compiles when code execution reaches the function line, and the named function compiles at the start of the code execution.
Syntax
Programmers can follow the below syntax to bind the anonymous function to the variable.
var a = function ( parameters ) {
// code to be executed
}In the above syntax, users can see that we have assigned the expression of an anonymous function to the variable ‘a’. Furthermore, we can invoke the function using the variable ‘a’ and passed the parameters.
Example
In the below example, we will create an anonymous function and assign it to the variable as an expression. After that, we will call the anonymous function using the variable. Also, we will learn to pass the parameters inside the anonymous function.
<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Anonymous Functions. </h2>
<p> We could assign the function to a variable</p>
<div id="func"></div>
<div id="demo"></div>
<script>
var a = function ( x, y ) {
return x + y;
}
let result = a(3, 5);
document.getElementById("func").innerHTML = "var a = " + a
document.getElementById("demo").innerHTML = "a(3, 5) = " + result;
</script>
</body>
</html>In the above output, users can see that it renders the result returned from the function call using variable ‘a’.
Creating the Arrow Function
The second method to assign the function to the variable is the arrow function. It is similar to the above approach, but the difference is that we will create an anonymous function without using the ‘function’ keyword and use an arrow instead.
The arrow function is the shortest syntax to declare the function in JavaScript, and it makes programmers' tasks easy to write the function. It is the latest version of the anonymous function as introduced in the ES6.
Programmers can create a single variable using the var, let, or const keywords and assign the function expression to that. However, creating a variable with the const keyword is recommended to assign the function as the function expression always remains constant.
Syntax
Users can follow the below syntax to write the expression for the arrow function.
const variable = ( …parameters ) => {
// function body
}
Variable( parameters ); // invoke the arrow function.In the above syntax, users can see how we declared the arrow function expression without using the function keyword.
Example
In the below example, we will create the arrow function with parameters. Also, we will assign it to the variable and invoke through the variable.
<html>
<body>
<h2> JavaScript Arrow Functions. </h2>
<div>
<p> We assign arrow function to a variable func.</p>
<p id="demo1"> </p>
<p id="demo2"> </p>
</div>
<script>
let demoOutput = document.getElementById("demo1");
const func = (x, y, z) => {
return x + y + z;
}
let result = func(10, 502, 340);
document.getElementById("demo1").innerHTML = "const func =" + func;
document.getElementById("demo2").innerHTML = "func( 10, 502, 340 ) =" + result;
</script>
</body>
</html>In the above output, users can see that it prints whatever result returns from the arrow function when we call it using the variable.
Conclusion
We have learned the two different ways to assign the function expression to the variable. The first approach is using the anonymous function, which is also possible in the ES5. In the ES6, the arrow function was introduced to create an anonymous function and assign it to the variable.
It is recommended to use the arrow function as it is the shorter version of the anonymous function.
20K+ Views
To Continue Learning Please Login