DEV Community

Cover image for What are the Types of Functions in JavaScript?
Tiberius Mairura
Tiberius Mairura

Posted on • Edited on

What are the Types of Functions in JavaScript?

What is a Function?

A function is a block of reusable code that performs a specific task.

There are 3 types of functions in JavaScript:

  • Anonymous functions
  • Named functions
  • Immediately Invoked Function Expression

Anonymous Functions

These are functions without names attached to them. Typically, these functions will be declared with the function keyword but without a name.

The syntax of an anonymous function looks like:

// declaring an anonymous function
function(){
 // function body
}
Enter fullscreen mode Exit fullscreen mode

Here is an example of an anonymous function:

// declaring an anonymous function
function(){
  console.log('I am anonymous!'); // I am anonymous!
}
Enter fullscreen mode Exit fullscreen mode

In the above example, we have defined an anonymous function that prints out the string 'I am anonymous!' to the console.

It is important to note that we cannot access the anonymous fuction after its creation. However, if we want to access it, we can assign the function to a variable.

// declaring an anonymous function
let anonymousFun = function(){
  console.log('I am anonymous!'); 
}
anonymousFun(); // I am anonymous!
Enter fullscreen mode Exit fullscreen mode

Named Functions

These are functions which on declaration, they are assigned a name. This allows us to access the function later on just by referencing the name of the function.
The general syntax looks like:

function functionName(/*parameters*/){
  // function body
}
Enter fullscreen mode Exit fullscreen mode

Here is an example of a named function:

function myNamedFun(){
   console.log('I am a named function'); 
}

// accessing the function
myNamedFun(); // I am a named function

Enter fullscreen mode Exit fullscreen mode

Immediately Invoked Function Expression

Immediately Invoked Function Execution(IIFE) is a function that executes immediately after its declaration.
The general syntax for IIFEs looks like:

(
  function(){
    // function body
}
)()
Enter fullscreen mode Exit fullscreen mode

Here is an example of a IIFE function:

(function immediatelyInvoked(){
   console.log('I will execute imediately!');  // I will execute imediately!
})();

Enter fullscreen mode Exit fullscreen mode

I like thinking about IIFEs as code blocks that live in their 'own environment' such that they are not affected by any other code that will execute thereafter.

You can find the IIFE helpful when you want to quickly initialize variables or objects in a larger function.

If you are keen, you must have noticed that the IIFE is more of an anonymous function. Therefore, we can assign them a variable and later on use the variable as shown below:

let myFun = (function immediatelyInvoked(){
   return 'I will execute imediately!';  
})();

console.log(myFun) // I will execute imediately!
Enter fullscreen mode Exit fullscreen mode

Key Takeaways

  1. A function is a block of reusable code that perfoms a specific task
  2. There are 3 types of functions in JavaScript:
    • Anonymous functions
    • Named functions
    • Immediately Invoked Function Expression

Top comments (2)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Your anonymousFun example is not correct. Anonymous functions assigned to a variable are no longer anonymous - they are assigned a name:

console.log( (function() {}).name )   // ''
const a = function() {}
console.log( a.name )   // 'a'
Enter fullscreen mode Exit fullscreen mode
Collapse
 
hermitex profile image
Tiberius Mairura

Noted! I will reach back when after checking the mistake in the article.