JavaScript Functions: A detailed Guide

Javascript is a programming language and it is highly dependent on functions like many other languages to make code more modular and concise. In functional Programming functions are pure Functions, which means if the input is not changed the output of a function will remain the same.

Simple Types of Function

Some basic types of functions are :

  • Function Declaration: This is the most common type of function in JavaScript. It is defined using the "function" keyword, followed by the function name, a set of parentheses, and a block of code within curly braces. Function declarations are hoisted, which means they are available for use throughout the entire script, before or after they are defined.
Copy codefunction greet() {
  console.log("Hello World!");
}
greet(); // "Hello World!"
  • Function Expression: A function expression is a function that is assigned to a variable. It is defined using the "var" keyword, followed by the variable name, the "=" operator, the "function" keyword, and the function definition. Function expressions are not hoisted, which means they can only be called after they are defined.
Copy codevar greet = function() {
  console.log("Hello World!");
};
greet(); // "Hello World!"
  • Arrow Function: Arrow functions, also known as "fat arrow" functions, are a more concise way of defining functions in JavaScript. They are defined using the "=>" operator, and do not have their own "this" keyword.
Copy codelet greet = () => {
  console.log("Hello World!");
};
greet(); // "Hello World!"
  • Constructor Functions: These are special functions that are used to create and initialize new objects. They are defined using the "function" keyword, followed by a capitalized function name. They are called using the "new" keyword.
Copy codefunction Person(name) {
  this.name = name;
}
let john = new Person("John");
console.log(john.name); // "John"
  • Closure Function: Closures are functions that have access to the scope of their parent function, even after the parent function has returned. Closures are created by returning a function from within another function.
Copy codefunction outerFunction() {
  let x = 10;
  return function innerFunction() {
    console.log(x);
  }
}
let closureFunction = outerFunction();
closureFunction(); // 10

Higher Order Function

A higher-order function is a function that takes one or more functions as arguments or returns a function as its result.

In JavaScript, a higher-order function is a function that:

  1. Accepts one or more functions as arguments: A higher-order function can take one or more functions as arguments and use them within its own function body. For example, a higher-order function that takes two functions and returns the result of one of them based on a condition:
Copy codefunction conditionallyApply(func1, func2, condition) {
  if (condition) {
    return func1();
  } else {
    return func2();
  }
}

let func1 = () => { return 'first function' };
let func2 = () => { return 'second function'};
console.log(conditionallyApply(func1, func2, true)) // 'first function'

Higher-order functions can be used to create more abstract and reusable code. They are particularly useful in functional programming, where they are used to create functional primitives that can be combined to form more complex operations.

In summary, a higher-order function is a function that takes one or more functions as arguments or returns a function as its result. This allows for more abstract and reusable code to be written, making it a powerful tool in functional programming.

Immediately Invoked Function Expression

An Immediately Invoked Function Expression (IIFE) is a function that is defined and immediately executed as soon as it is defined. It is also known as a Self-Executing Anonymous Function (SEAF).

An IIFE is defined using a function expression and is immediately invoked by adding parentheses after the function expression. The function expression is typically anonymous and does not have a function name.

The general syntax for an IIFE is:

Copy code(function () {
  // function code here
})();

IIFEs are commonly used in JavaScript to create a new scope so that variables and functions defined within the IIFE are not visible outside of it. This can be useful for isolating variables and functions that are only needed within a specific part of the code.

IIFEs can also be used to pass in variables from the parent scope as arguments, which can then be used within the IIFE:

Copy codelet message = "Hello";
(function (msg) {
  console.log(msg); // "Hello"
})(message);

In summary, an IIFE (Immediately Invoked Function Expression) is a function that is defined and immediately executed as soon as it is defined. It is typically anonymous and does not have a function name. IIFEs are commonly used in JavaScript to create a new scope and to isolate variables and functions that are only needed within a specific part of the code.

Did you find this article valuable?

Support Ashish Jha by becoming a sponsor. Any amount is appreciated!