Different Types of JavaSript Functions

gaurbprajapati

gaurbprajapati

Posted on June 5, 2023

Different Types of JavaSript Functions

1. Function Declarations:

   function add(a, b) {
     return a + b;
   }
Enter fullscreen mode Exit fullscreen mode

Function declarations define a named function with the function keyword, followed by the function name and a set of parentheses for parameters. They are hoisted to the top of their scope, meaning they can be called before they are defined in the code.

2. Function Expressions:

   const multiply = function(a, b) {
     return a * b;
   };
Enter fullscreen mode Exit fullscreen mode

Function expressions involve assigning a function to a variable. They are created using the function keyword, followed by optional function name (anonymous if omitted), and a set of parentheses for parameters. Function expressions are not hoisted and can only be called after they are defined.

3. Arrow Functions:

   const square = (x) => {
     return x * x;
   };
Enter fullscreen mode Exit fullscreen mode

Arrow functions provide a concise syntax for writing functions. They use the arrow (=>) operator and automatically bind this to the surrounding context. They are commonly used for anonymous functions and have an implicit return if the body is a single expression.

4. Immediately Invoked Function Expressions (IIFE):

   (function() {
     // Code executed immediately
   })();
Enter fullscreen mode Exit fullscreen mode

IIFEs are self-invoking functions that are executed immediately after they are defined. They are enclosed within parentheses to ensure the function is treated as an expression. IIFEs are commonly used to create a new scope, encapsulate code, and avoid polluting the global namespace.

5. Methods:

   const obj = {
     name: 'John',
     greet: function() {
       console.log(`Hello, ${this.name}!`);
     }
   };

   obj.greet(); // Output: Hello, John!
Enter fullscreen mode Exit fullscreen mode

Methods are functions that are defined as properties of objects. They can be called using the object reference followed by the dot notation. Methods have access to the object's properties and can use the this keyword to refer to the object.

6. Callback Functions:

``` 
 function doSomething(callback) {
// Perform some tasks

 // Invoke the callback function
 callback();
      } 

     function callbackFunction() {
    console.log("Callback function executed!");
      }

    // Pass callbackFunction as a callback to doSomething
     doSomething(callbackFunction);

   ```
Enter fullscreen mode Exit fullscreen mode

Callback functions are functions passed as arguments to other functions. They are invoked by the receiving function at a specific time or when a certain event occurs. Callback functions are commonly used for handling asynchronous operations, event handling, and functional programming patterns.

7. Anonymous Function with Function Expression:

   const greet = function(name) {
     console.log(`Hello, ${name}!`);
   };

   greet('John'); // Output: Hello, John!
Enter fullscreen mode Exit fullscreen mode

In this example, the greet variable is assigned an anonymous function using a function expression. The function takes a name parameter and logs a greeting to the console. It can be called using the greet variable.

8. Anonymous Function as a Callback:

   function calculate(a, b, operation) {
     const result = operation(a, b);
     console.log(`Result: ${result}`);
   }

   calculate(5, 3, function(x, y) {
     return x * y;
   }); // Output: Result: 15
Enter fullscreen mode Exit fullscreen mode

Here, the calculate function takes three arguments: a, b, and operation, where operation is a callback function. The callback function is defined anonymously as a parameter to the calculate function and multiplies a and b. It is invoked within the calculate function to perform a specific operation.

These are some of the common types of functions in JavaScript. Understanding their differences and use cases can help you write clean, modular, and maintainable code.

💖 💪 🙅 🚩
gaurbprajapati
gaurbprajapati

Posted on June 5, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related