DEV Community

Cover image for Function In JS
Parthipan M
Parthipan M

Posted on

Function In JS

Functions in JavaScript are reusable blocks of code designed to perform specific tasks. They allow you to organize, reuse, and modularize code. They can take inputs, perform actions, and return outputs.

Understanding Functions

In functions, parameters are placeholders defined in the function, while arguments are the actual values you pass when calling the function.

Example:

function greet(name) {   // 'name' is a parameter
  console.log("Hello " + name);
}

greet("Alice");  // "Alice" is the argument
Enter fullscreen mode Exit fullscreen mode
  • Parameter: name (placeholder inside the function).

  • Argument: "Alice" (real value given at call time).

Default Parameters :

  • Default parameters are used when no argument is provided during the function call.

  • If no value is passed, the function automatically uses the default value.

For Examble :

function greet(name = "Guest") {
  console.log("Hello, " + name);
}

greet();
greet("Aman");
Enter fullscreen mode Exit fullscreen mode

Return Statement

  • The return statement is used to send a result back from a function.

  • When return executes, the function stops running at that point.

  • The returned value can be stored in a variable or used directly.

For Example:

function add(a, b) {
  return a + b; // returns the sum
}

let result = add(5, 10);
console.log(result);
Enter fullscreen mode Exit fullscreen mode

Types of Functions

Here are all the main types of functions in JavaScript:

1. Named Function

A function that has its own name when declared. It’s easy to reuse and debug because the name shows up in error messages or stack traces.

function greet() {
  return "Hello!";
}
console.log(greet());
Enter fullscreen mode Exit fullscreen mode

2. Anonymous Function

An anonymous function is a function defined without an explicit name. It is commonly used as a callback or assigned to a variable.

const greet = function() {
  return "Hi there!";
};
console.log(greet());
Enter fullscreen mode Exit fullscreen mode

3. Function Expression

A function expression is a function created as part of an expression and assigned to a variable or passed to another function. It can be named or anonymous.

const add = function(a, b) {
  return a + b;
};
console.log(add(2, 3));
Enter fullscreen mode Exit fullscreen mode

4. Arrow Function (ES6)

A new way to write functions using the => syntax. They are shorter and do not have their own this binding, which makes them useful in some cases.

const square = n => n * n;
console.log(square(4));
Enter fullscreen mode Exit fullscreen mode

5. Immediately Invoked Function Expression (IIFE)

IIFE functions are executed immediately after their definition. They are often used to create isolated scopes.

(function () {
    console.log("This runs immediately!");
})();
Enter fullscreen mode Exit fullscreen mode

6. Callback Functions

A callback function is passed as an argument to another function and is executed after the completion of that function

function num(n, callback) {
    return callback(n);
}

const double = (n) => n * 2;

console.log(num(5, double));
Enter fullscreen mode Exit fullscreen mode

7. Constructor Function

A special type of function used to create multiple objects with the same structure. It’s called with the new keyword.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const user = new Person("Neha", 22);
console.log(user.name);
Enter fullscreen mode Exit fullscreen mode

8. Async Function

Functions that handle asynchronous tasks. Declared with async, they return a Promise, and you can use await inside them to pause until another Promise resolves.

async function fetchData() {
  return "Data fetched!";
}
fetchData().then(console.log);
Enter fullscreen mode Exit fullscreen mode

9. Generator Function

Declared with an asterisk *, these functions can pause execution using yield and resume later. Useful for lazy loading values or handling iterators.

function* numbers() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = numbers();
console.log(gen.next().value); 
console.log(gen.next().value);
Enter fullscreen mode Exit fullscreen mode

10. Recursive Function

A function that calls itself until a condition is met. Very useful for problems like factorial, Fibonacci, or tree traversals.

function factorial(n) {
  if (n === 0) return 1;
  return n * factorial(n - 1);
}
console.log(factorial(5));
Enter fullscreen mode Exit fullscreen mode

11. Higher-Order Function

A function that either takes another function as a parameter or returns another function. These are common in JavaScript (e.g., map, filter, reduce).

function applyOperation(a, b, operation) {
    return operation(a, b);
}
function add(x, y) {
    return x + y;
}
console.log(applyOperation(2, 3, add));
Enter fullscreen mode Exit fullscreen mode
  • applyOperation() is a higher-order function because it accepts another function (add) as an argument.

  • The passed function is executed inside applyOperation()

12. Nested Functions

Functions defined within other functions are called nested functions. They have access to the variables of their parent function.

function outerFun(a) {
    function innerFun(b) {
        return a + b;
    }
    return innerFun;
}

const addTen = outerFun(10);
console.log(addTen(5));
Enter fullscreen mode Exit fullscreen mode

13. Pure Functions

Pure functions return the same output for the same inputs and do not produce side effects. They do not modify state outside their scope, such as modifying global variables, changing the state of objects passed as arguments, or performing I/O operations.

function pureAdd(a, b) {
    return a + b;
}

console.log(pureAdd(2, 3));
Enter fullscreen mode Exit fullscreen mode

14. Rest Parameter Function

Uses the ... syntax to collect remaining arguments into an array. Useful when the number of arguments is unknown.

function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3, 4));

Enter fullscreen mode Exit fullscreen mode

Top comments (0)