In the JavaScript Function tutorial , we learned how to define or declare a function using the function keyword. In this tutorial, we will learn about function literals, Expression, and Anonymous functions in JavaScript. A function literal is a method of defining an unnamed or anonymous function. By far, we define a function expression using the function keyword followed by the function name, along with parameters in parentheses and the function code block.
function function_name(parameters)
{
// function body
}
In the above syntax, we are defining a function with the function name.
Function Expression
A function Expression is an alternative term for function declaration. Although the function expression syntax and function declaration syntax are identical, yet there are some differences between them. What distinguishes a function expression from the function declaration is the function name. In a function declaration, the function name is mandatory, but the function name is optional in a function expression. And another difference is the normal function declaration is hoisted at the top of the script, whereas the function expression does not. In simple terms, we can say that when we write the function declaration at the right side of the assignment operator (=), it becomes a function expression.
Example
<script>
// function declaration
function func1()
{
return 2+3
}
//named function expression
let name = function func2()
{
2+3
}
//unnamed function expression
let u_name = function()
{
return 2+3
}
</script>
JavaScript Anonymous function
An anonymous function is a function expression that does not have a function name. The anonymous function's syntax is similar to the normal function declaration except for the function name part.
Syntax
function(parameters)
{
//function body
}
If the Anonymous function does not have a name, how can we call it? The Anonymous function is generally used with JavaScript Event Listener. Although we have not discussed JavaScript event listeners yet, we will learn them in the coming tutorial. But for now, just remember an Event listener is a JavScript built-in function that can call another function when some event occurs on the web-page such as a user click on the button or hover the mouse over any specific element.
<!DOCTYPE html>
<html>
<head>
<title></title>
<body>
<button>Click Me </button>
<script>
button = document.querySelector('button')
button.addEventListener('click', function(){document.write("Hello")});
</script>
</body>
</html>
Output
Behind the code
In the above code, the
function(){document.write("Hello")}
statement is an anonymous function that gets automatically called when the user clicks the button.
JavaScript Literals
A JavaScript literal is a fancy term we used when we provide a variable name to an unnamed anonymous function. In the above section, we learned how to define an Anonymous function by using Function expression. Now let's see how to define a literal or function variable for the anonymous function. Defining a function literal is similar to defining or declaring a variable in JavaScript. We can write the declarative keyword followed by the literal name and assign the anonymous function to it using the assignment operator.
Syntax
let literal_name = function <optional function name> (parameters ){//function body}
Example
<script>
let add = function(x, y)
{
return x+y
}
result = add(200, 300);
document.write(result)
</script>
Output
500
Behind the Code
In the above example, we assigned a literal name
add
to the anonymous function that sums two numbers x and y. After assigning the name to the anonymous function expression we use the
add
variable as a function by adding parenthesis, and call the function.
Summary
- A function expression is a function defined at the right side of the assignment operator.
- The anonymous function does not have a function name.
- A function literal is the variable name for the unnamed or anonymous function.