Skip to content
Related Articles

Related Articles

Difference between Anonymous and Named functions in JavaScript

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 27 Jan, 2022

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!

Difference between Anonymous and Named functions:

Anonymous functions

Named Functions

In JavaScript, anonymous functions (function expression) are those that are produced without a name or identifier to refer to them; they are defined as :

function(){

  // Function Body

}

Normal functions (function declaration) having a name or identifier to refer to them are referred to as named functions and are defined as:

function displayMessage(){

// function..body

}

Anonymous functions are never hoisted (loaded into memory at compilation).Named functions are hoisted (loaded into memory at compilation).
When invoking an anonymous function, you can only call it after the declaration line.A name function can be invoked before declaration.
Before ES6, the name properties of anonymous functions were set to the empty string.Before ES6, the name properties of named functions were set to their function names.
For easier programming, anonymous functions allow context scoping. When functions are utilized as data, arrow functions should be used.Because the function name appears in the error log, named functions are highly useful in debugging and determining which function produced an error.
Anonymous functions can be very handy when developing IIFEs (Instantly Invoked Function Expressions).Named functions are easier to reuse, which aids in the creation of clean code.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!