JavaScript Function: Create and Call Functions in JS

In JavaScript, a function is a block of code that performs a specific task. By calling a function, you execute the function's code block.

How to Use JavaScript Functions

Defining Functions in JavaScript

To create a function in JavaScript, you need the function keyword, a name, and parentheses that may include parameters. Then, curly braces ({}) mark out the beginning and end of the function's body.

function functionName(parameter1, parameter2) {
	// Block of reusable code
	return returnValue; // Optional return statement
}

• function: The keyword to initiate the function statement.
• functionName: A unique identifier to name your function, following the JavaScript naming conventions.
• parameter(s): Any number of variables listed inside the parentheses help pass data into the function (optional).
• return: The keyword that exits the function and usually returns the result of the function to its caller (optional).
• returnValue: A value or variable to return from the function (optional).

Calling Functions in JavaScript

To execute a function's code block, you need to call it by using its name along with parentheses.

functionName(argument1, argument2);

• function: The keyword to start the function declaration.
• argument(s): Values or variables to pass data into the function (if possible or required).

When to Use Functions in JavaScript

Functions in JavaScript encapsulate code that performs a specific task, making your code more readable, maintainable, and reusable. Here are several use cases:

Handling Events

You can use functions to handle events like clicks or key presses in web applications.

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

Organizing Complex Code

Using a function, you can organize complex code into a single code block you can call at any time.

function calculateArea(radius) {
    return Math.PI * radius * radius;
}
console.log(calculateArea(5));  // Output: 78.53981633974483

Repeating Actions

Functions are particularly great for grouping code you need to execute multiple times throughout your web application.

function repeatLog(message, times) {
    for (let i = 0; i < times; i++) {
        console.log(message);
    }
}
repeatLog("Hello!", 3);

Examples of JavaScript Functions

Functions are everywhere in JavaScript. Below are examples showcasing their common applications:

Form Validation

Functions can validate user inputs in forms, providing feedback or processing the data.

function validateEmail(email) {
    const re = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
    return re.test(email);
}
console.log(validateEmail("user@example.com"));  // Output: true

Callbacks

You can pass functions as arguments to other functions, known as callbacks, allowing for asynchronous operations.

function processData(callback) {
    let data = fetchData();  // Assume fetchData gets data from an API
    callback(data);
}

processData(function(data) {
    console.log("Data received:", data);
});

Array Operations

Functions are essential when working with arrays, especially with methods like map, filter, and reduce.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(number) {
    return number * 2;
});
console.log(doubled);  // Output: [2, 4, 6, 8, 10]

Timeout and Interval

Functions manage timing through setTimeout and setInterval, allowing delayed and repeated actions.

setTimeout(function() {
    console.log("This message is shown after 3 seconds.");
}, 3000);

let count = 0;
const intervalId = setInterval(function() {
    count++;
    console.log("Interval tick", count);
    if (count >= 5) {
        clearInterval(intervalId);
    }
}, 1000);

Learn More About Functions in JavaScript

Async Function in JavaScript

Async functions can help you handle asynchronous operations. An async function enables pausing execution until a specific operation within its body is completed.

To create an async function, add the async keyword in front of the function's declaration.

async function fetchData() {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    return data;
}

Anonymous Function in JavaScript

Unlike regular functions, anonymous functions in JavaScript code have no name attached to them. Anonymous functions are useful for performing a quick operation where naming the function is unnecessary. A common use case for anonymous functions is in event listeners and timers.

setTimeout(function() {
    console.log("This runs after 1 second.");
}, 1000);

Arrow Function in JavaScript

JavaScript arrow functions are anonymous functions with a simpler syntax than traditional function expressions. An arrow function definition uses a pair of parentheses with the parameter list, an arrow (=>), and the function's body.

const sum = (a, b) => a + b;
console.log(sum(5, 3));  // Output: 8

If the function takes no parameters, you need to use an empty pair of parentheses before the arrow. Also, if the function body spans multiple lines, you need to use curly braces ({}) around it.

const sayHelloHowAreYou = () => {
    console.log("Hello!");
    console.log("How are you?");
};

Callback Function in JavaScript

A callback function is a function you pass into another function as an argument. The callback function is then called from inside the outer function to complete some kind of action. In JavaScript, callback functions are often anonymous functions or arrow functions.

function loadScript(src, callback) {
    let script = document.createElement('script');
    script.src = src;
    script.onload = () => callback(script);
    document.head.append(script);
}

loadScript('script.js', function() {
    console.log('Script loaded successfully.');
});

Parameter Handling

JavaScript functions are flexible in how they handle parameters. Using the arguments object or rest parameters, functions can accept any number of parameters without specifying them individually in the function definition. This feature makes functions versatile for handling varying amounts of data.

function sumAll(...args) {
    return args.reduce((acc, val) => acc + val, 0);
}
console.log(sumAll(1, 2, 3, 4));  // Output: 10