Difference between Anonymous and Named functions in JavaScript

12 August 2024

0

In JavaScript or in any programming language per say, functions, loops, mathematical operators and variables are the most widely used tools. This article will tell you about the difference between anonymous functions and named functions. We will discuss all the required concepts in this article to know the named and anonymous functions in and out.

Anonymous Functions: As the name suggests, “anonymous function” refers to a function that does not have a name or a title. In JavaScript, an anonymous function is something that is declared without an identification. It’s the distinction between a regular and an anonymous function. An anonymous function cannot be accessed after it is created; it can only be retrieved by a variable in which it is stored as a function value. There can be several arguments to an anonymous function, but only one expression.

Syntax:

function(){
   // Function Body
}

Let’s understand through examples.

Example 1: We build an anonymous function that prints a message to the console in this example. After that, the function is saved in the test variable. We can call the function by invoking test().

Javascript

<script> 
   var test = function () { 
      console.log("This is an anonymous function!"); 
   }; 
   test(); 
</script> 

Output:

This is an anonymous function!

Example 2: The anonymous function can also take arguments.

Javascript

<script> 
   var test = function (platform) { 
      console.log("This is an anonymous ", platform); 
   }; 
  
   test("function!"); 
</script> 

Output:

This is an anonymous function!

We can indeed pass anonymous functions as parameters into another function because JavaScript allows Higher-Order Functions.

Example 3: Here, we send an anonymous function to the setTimeout() method as a callback function. This calls the anonymous function 1500 milliseconds later.

Javascript

<script> 
   setTimeout(function () { 
   console.log("This is an anonymous function!"); 
   }, 1500); 
</script> 

Output:

This is an anonymous function!

Named Functions: In JavaScript, named functions are simply a way of referring to a function that employs the function keyword followed by a name that can be used as a callback to that function. Normal functions with a name or identifier are known as named functions. They can be employed in an expression or declared in a statement. The function’s name is stored within its body, which can be handy. And we may use the name to get a function to call itself, or to retrieve its attributes like every object.

Syntax:

function displayMessage(){
 // function..body
}

Let’s understand the concept with some examples:

Example 1: We will define a normal function that prints a message in this example.

Javascript

<script> 
   function test() { 
       console.log (`This is a named function!`); 
   }; 
</script> 

Output:

This is a named function!

Example 2: You can add named functions to variables on objects, and then call the function on the object.

Javascript

<script> 
   function test() { 
       console.log (`This is a ${this.func}`); 
   } 
   const func = { 
       func: 'named function!', 
       test 
   } 
   func.test(); 
</script>

Output:

This is a named function!

Example 3: In JavaScript, named functions are one of the most frequent ways to call functions. You’ll run into them all the time. Another point worth mentioning here is how to use the return keyword to return a value from a function. This isn’t limited to named functions.

Javascript

<script> 
   function createPerson(firstName, lastName) { 
       return { 
           firstName: firstName, 
           lastName: lastName, 
           getFullName() { 
               return firstName + ' ' + lastName; 
           } 
       } 
   } 
   let name = createPerson('This is a', 'named function!'); 
     
   console.log(name.getFullName()); 
</script> 

Output:

This is a named function!