My Web Training

📖 JavaScript Named Functions

Named functions are one of the primary ways to define functions in JavaScript. They have a specific name, which makes them easy to reference and reuse throughout your code. Understanding how to create and use named functions is essential for writing clear and maintainable code.

Definition and Syntax

A named function is a function that has a name. It is defined using the function keyword, followed by a name, a list of parameters enclosed in parentheses, and a block of code enclosed in curly braces.


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

Examples of Named Functions

Named functions are versatile and can be used in various contexts. Here are some examples:


// Example 1: Simple function
function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet('Alice')); // Output: Hello, Alice!

// Example 2: Function with multiple parameters
function add(a, b) {
    return a + b;
}

console.log(add(2, 3)); // Output: 5

// Example 3: Function with no parameters
function sayHello() {
    return 'Hello, world!';
}

console.log(sayHello()); // Output: Hello, world!

Use Cases for Named Functions

Named functions are particularly useful in the following scenarios:

Reusability: Named functions can be reused throughout your code, making it easier to maintain and update.
Recursion: Named functions can call themselves, which is useful for tasks that require repeated execution.
Debugging: Named functions provide clear and descriptive names in error messages and stack traces, making it easier to identify and fix issues.
Modularity: Named functions can be used to encapsulate specific tasks, making your code more modular and organized.

Putting It Into Action

To see this code in action, create an HTML file and include the following script. This script will define several named functions and call them with different arguments, logging the results to the console.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Named Functions Example</title>
</head>
<body>
    <script>
        function greet(name) {
            return `Hello, ${name}!`;
        }

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

        function sayHello() {
            return 'Hello, world!';
        }

        console.log(greet('Alice')); // Output: Hello, Alice!
        console.log(add(2, 3)); // Output: 5
        console.log(sayHello()); // Output: Hello, world!
    </script>
</body>
</html>

Challenge

Modify the example to create a new function called subtract that takes two numbers as parameters and returns their difference. Call this function with different arguments and log the results to the console.

Solution


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Named Functions Example</title>
</head>
<body>
    <script>
        function greet(name) {
            return `Hello, ${name}!`;
        }

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

        function sayHello() {
            return 'Hello, world!';
        }

        function subtract(a, b) {
            return a - b;
        }

        console.log(greet('Alice')); // Output: Hello, Alice!
        console.log(add(2, 3)); // Output: 5
        console.log(sayHello()); // Output: Hello, world!
        console.log(subtract(5, 2)); // Output: 3
        console.log(subtract(10, 4)); // Output: 6
    </script>
</body>
</html>