Functions are one of the fundamental building blocks in JavaScript. They allow you to group code into reusable blocks, making your code modular, organized, and easier to maintain.

  1. Defining a Function You can define a function using the function keyword followed by a name, a list of parameters enclosed in parentheses, and a block of code enclosed in curly braces.

    Syntax:

      function functionName(parameters) {
    // Code to be executed
}

    Example:

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

greet("Alice"); // Outputs: Hello, Alice!
greet("Bob");   // Outputs: Hello, Bob!

  2. Function Expressions A function can also be defined as an expression. In this case, the function is assigned to a variable.

    Syntax:

      const functionName = function(parameters) {
    // Code to be executed
};

    Example:

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

console.log(multiply(3, 4)); // Outputs: 12

  3. Arrow Functions Arrow functions provide a more concise syntax for writing function expressions. They are particularly useful for writing short functions.

    Syntax:

      const functionName = (parameters) => {
    // Code to be executed
};

    Example:

      const square = x => x * x;

console.log(square(5)); // Outputs: 25

  4. Returning Values Functions can return values using the return keyword. Once a return statement is executed, the function terminates, and the returned value can be used elsewhere in your code.

    Syntax:

      function functionName(parameters) {
    return value;
}

    Example:

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

const result = add(10, 20);
console.log(result); // Outputs: 30

  5. Parameters and Arguments

    • Parameters are the variables listed in the function definition.
    • Arguments are the values passed to the function when it is called.

    Example:

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

greet("Alice");               // Outputs: Hello, Alice!
greet("Bob", "Goodbye");     // Outputs: Goodbye, Bob!

    In this example, greeting has a default value of “Hello” but can be overridden when calling the function.

  6. Function Scope Variables declared inside a function are local to that function and cannot be accessed from outside. This is known as function scope.

    Example:

      function testScope() {
    let localVariable = "I am local";
    console.log(localVariable); // Outputs: I am local
}

testScope();
console.log(localVariable); // Error: localVariable is not defined

  7. IIFE (Immediately Invoked Function Expression) An IIFE is a function that runs as soon as it is defined. It is often used to create a new scope to avoid polluting the global namespace.

    Syntax:

      (function() {
    // Code to be executed immediately
})();

    Example:

      (function() {
    let message = "This is an IIFE!";
    console.log(message); // Outputs: This is an IIFE!
})();

  8. Function Constructor Functions can also be created using the Function constructor, although this is less common and often avoided.

    Syntax:

      const func = new Function('parameters', 'code');

    Example:

      const subtract = new Function('a', 'b', 'return a - b;');

console.log(subtract(10, 5)); // Outputs: 5