javascript
  1. javascript-function
PreviousNext

JavaScript Functions

Functions are the building blocks of JavaScript. They are self-contained blocks of code that can be called and executed to perform a specific task. In this page, we will cover the syntax, example, output, explanation, use, important points, and summary of JavaScript functions.

Syntax

The syntax for creating a JavaScript function is:

function function_name(parameter1, parameter2, parameter3, ...) {
  // code to be executed
  return result;
}

Here:

  • function_name is the name of the function.
  • parameter1, parameter2, parameter3, ... are the optional parameters that the function can accept.
  • // code to be executed is the code that the function executes.
  • return result is the value that the function returns.

Example

Here is an example of a simple JavaScript function that takes two parameters and returns their sum:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Function Example</title>
</head>
<body>

<!-- Placeholder for displaying the output -->
<p id="output"></p>

<script>
    // Define a function to calculate the sum of two numbers
    function calculateSum(a, b) {
        return a + b;
    }

    // Example usage of the function
    var num1 = 10;
    var num2 = 20;
    var result = calculateSum(num1, num2);

    // Display the result in the HTML document
    document.getElementById("output").innerHTML = "The sum of " + num1 + " and " + num2 + " is: " + result;
</script>

</body>
</html>

Output

Once we define the function, we can call it to execute the code inside it. For example, we can call the sum function we defined above and pass two values:

The sum of 2 and 3 is: 5

The output of this function call will be 5, since the function returns the sum of 2 and 3.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Function Example</title>
</head>
<body>

<!-- Placeholder for displaying the output -->
<p id="output"></p>

<script>
    // Define a function to calculate the sum of two numbers
    function calculateSum(a, b) {
        return a + b;
    }

    // Example usage of the function
    var num1 = 2;
    var num2 = 3;
    var result = calculateSum(num1, num2);

    // Display the result in the HTML document
    document.getElementById("output").innerHTML = "The sum of " + num1 + " and " + num2 + " is: " + result;
</script>

</body>
</html>
Try Playground

Explanation

Functions allow us to encapsulate code into reusable packages. We can call the same function multiple times with different parameters, and it will execute the code block inside it every time.

The syntax for defining a function includes the function keyword, followed by the function name, optional parameters in parentheses, and the code block enclosed in curly brackets. Once defined, we can call the function using its name, passing in any parameters it requires.

Functions also have the optional ability to return a value. This value is necessary to pass the result of the function back to the calling code. The return keyword is used to return a value.

Use

Functions are used in JavaScript to accomplish various tasks, including but not limited to:

  • Data manipulation
  • Event handling
  • User input validation
  • Creating reusable libraries
  • Modifying the HTML of a web page on-the-fly
  • And many more

Important Points

  • Functions are the basic building blocks of JavaScript.
  • Functions allow us to encapsulate code into reusable packages.
  • Function names must be unique and meaningful.
  • Functions can return a value, and the return statement is used to return a value.
  • Functions can take optional parameters.

Summary

JavaScript functions are self-contained blocks of code that can be called and executed to perform a specific task. They are created using the function keyword, which is followed by the function name, optional parameters, and the code block. Functions can return a value, and they allow for code reuse and better organization of code.

LoopObject
Published on: