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.
jsx
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.
jsx
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.
jsx
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.
jsx
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.
jsx
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.
jsx
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.
jsx
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.
jsx
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.
jsx
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.
jsx
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.
jsx
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.
jsx
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.
jsx
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.
jsx
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.
jsx
function sumAll(...args) {
return args.reduce((acc, val) => acc + val, 0);
}
console.log(sumAll(1, 2, 3, 4)); // Output: 10