JavaScript Function Expression and Literals

By | October 1, 2021
JavaScript Function Expression and Literals

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.

Vamware

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.

People are also reading:

Leave a Reply

Your email address will not be published. Required fields are marked *