Introduction

Functions are like little helpers in your code. You can give them a name and tell them what to do, and then you can use them over and over again whenever you need that task done.

Function statement/ declaration

This is the standard method for declaring a function in JavaScript, where you specify the function name, parameters, and return value of the function.

function greeting(name) {
  return `Hello ${name}`;
}

Here, we declare our function named "greeting" and pass one parameter, which is "name". The function returns a message.

Function Expression

Function expressions differ from function declarations. In a function expression, we assign a function as a value to a variable.

const functionExpression = function () {
  console.log("this is function expression");
};

Here, we declare our function named functionExpression. We can invoke our function by using the variable name we declared, like this: functionExpression().

The difference between a function statement and an expression lies in hoisting. In JavaScript, the engine hoists the function declaration to the top of the code, allowing you to invoke it before the function is declared. However, if you try to access a function expression before its declaration, you'll encounter an uncaught error.

Anonymous Functions

An anonymous function is declared without specifying a name. You can declare an anonymous function using the function keyword followed by parentheses. It can also be used as an argument to other functions, like higher-order functions.

const greet = function () {
  // your code here
  console.log("This is anonyomous function");
};
greet();

The only way to invoke this function is by giving it an identifier, such as "greet", so we can call it using greet().

Name Function Expression

You can declare a name function expression by assign as value to a variable and also give function name

let f2 = function xyz() {
  console.log("hello javascript");
};
f2();
//output = hello javascript

If you attempt to access xyz() in the global scope, it will throw an error because xyz() is not defined. However, you can access the function using its assigned variable name.

Arrow functions

The arrow function is available in the ES6 version of JavaScript. It provides a cleaner way to declare a function and is also similar to a function expression.

const arrow = (params) => {
  console.log(`this is ${params} function`);
};

arrow("arrow");
// this is arrow function

The arrow function statement can implicitly return values. This means that in some cases, the keyword return isn’t needed to return the value of a function.

const sums = () => 5 + 5;
console.log(sums());
// output 10

In some cases, the arrow function implicitly returns values, but when the function body is wrapped in curly brackets, you need to use the return keyword explicitly to return a value.

const sums = () => {
  5 + 5;
};

console.log(sums()); // undefined

const sums = () => {
  return 5 + 5;
};

console.log(sums()); //10

Immediately-invoked Function Expressions (IIFE)

IIFE (Immediately Invoked Function Expression) is a way to execute a function immediately as soon as it's created. IIFEs are useful because they don’t pollute the global object and variables, and they provide a simple way to isolate variable declarations.

(function f1() {
  console.log('Db is connected');
})();
// Db is connected

//arrow function
(() => {
  console.log("This is arrow function With IIFE");
})();
//This is arrow function With IIFE

To sum up, mastering different JavaScript function types is key to writing cleaner and more efficient code. Keep experimenting and learning!

Types of functions in JavaScript

Table of contents