JavaScript Functions

Functions are one of the core building blocks in JavaScript. They allow you to encapsulate code into reusable units, making your code more modular and easier to maintain.

1. Defining Functions

There are several ways to define a function in JavaScript:

Function Declaration

A function declaration defines a named function. It can be called before or after its definition.

function greet(name) {
    return "Hello, " + name + "!";
}

            

Call the function like this: greet("Alice")

Function Expression

A function expression defines a function as part of an expression. It can be anonymous or named and can be used as a value.

const greet = function(name) {
    return "Hello, " + name + "!";
};

            

Call the function like this: greet("Alice")

Arrow Functions

Arrow functions provide a shorter syntax for writing functions. They are often used for inline functions.

const greet = (name) => "Hello, " + name + "!";

            

Call the function like this: greet("Alice")

2. Parameters and Arguments

Functions can accept parameters and arguments. Parameters are placeholders for the values that you pass into the function.

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

            

Call the function with arguments: sum(5, 10) returns 15

3. Return Values

Functions return values using the return statement. If no return value is specified, the function returns undefined.

function multiply(a, b) {
    return a * b;
}

            

Call the function: multiply(4, 5) returns 20

4. Scope and Closures

Scope refers to the visibility of variables within different parts of your code. Closures are functions that have access to variables from their outer (enclosing) scope, even after the outer function has finished executing.

Example of a Closure

function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

            

Here, the inner function has access to the count variable even after createCounter has returned.

5. Function Overloading

JavaScript does not support function overloading in the traditional sense. Instead, you can handle different numbers or types of arguments within a function using conditions.

function greet(name, greeting = "Hello") {
    return greeting + ", " + name + "!";
}
console.log(greet("Alice")); // Hello, Alice!
console.log(greet("Alice", "Hi")); // Hi, Alice!

            

Here, the function greet can handle different arguments by providing default values.

6. Recursion

Recursion is a technique where a function calls itself. It is often used for problems that can be broken down into smaller, similar problems.

function factorial(n) {
    if (n <= 1) return 1;
    return n * factorial(n - 1);
}

            

Call the function: factorial(5) returns 120

7. Higher-Order Functions

Higher-order functions are functions that take other functions as arguments or return functions as their result. They are useful for functional programming paradigms.

function applyFunction(fn, value) {
    return fn(value);
}

const square = x => x * x;
console.log(applyFunction(square, 4)); // 16

            

In this example, applyFunction is a higher-order function that applies a function fn to a value.