JavaScript Functions

In JavaScript, a Function is a block of code that can be reused as many times as required.

In this tutorial, we will learn how to define a function, and different concepts related to functions, with well detailed examples.

Define a Function

The syntax to define a function is

</>

Copy

function functionName (parameters) {
  //body
  return returnValue;
}

where

function is keyword
functionName is the name by which we call this function. User can choose a name for the function. Typically, a name that describes the behaviour/functionality that it implements is used for the function name.
parameters is optional. A function can receive none, one, or more arguments for parameters. If there are more than one parameter, separate the parameters using comma separator.
return statement is optional. return is the keyword and returnValue is the value returned by the function.

Example

The following is a simple example for a function. We define a function add that receives two values for parameters a and b, and returns the result of the addition result.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<body>
    <pre id="output"></pre>
    <script>
        function add(a, b) {
          var result = a + b;
          return result;
        }
        
        var n1 = 4, n2 = 3;
        var sum = add(n1, n2);
        document.getElementById('output').innerHTML = n1 + ' + ' + n2 + ' = ' + sum;
    </script>
</body>
</html>

Function with No Parameters

We can define a function with no parameters. Parameters in the function definition would be empty.

In the following example, we created a function named pi, that receives no parameters, but returns a value.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<body>
    <pre id="output"></pre>
    <script>
        function pi() {
          return 3.14;
        }
        
        var piValue = pi();
        document.getElementById('output').innerHTML = piValue;
    </script>
</body>
</html>

Function with No Return Value

As already mentioned, returning a value from a function is optional.

In the following example, we define a function add that receives two values for parameters a and b, and logs the result to console.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<body>
    <pre id="output"></pre>
    <script>
        function add(a, b) {
          var result = a + b;
          console.log(a + ' + ' + b + ' = ' + result);
        }
        
        var n1 = 4, n2 = 3;
        add(n1, n2);
    </script>
</body>
</html>

Function Expression

We can assign a function to a variable. After that, we can use this variable as a function.

In the following example, we define a function add(). We assign this function to a variable x. Now, we shall use the variable x to call the function add().

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<body>
    <pre id="output"></pre>
    <script>
        var x = function add(a, b) {
          var result = a + b;
          return result;
        }
        
        var n1 = 4, n2 = 3;
        var sum = x(n1, n2);
        document.getElementById('output').innerHTML = n1 + ' + ' + n2 + ' = ' + sum;
    </script>
</body>
</html>

Anonymous Function

In a Function Expression (discussed above), if we do not specify function name in the function definition, then that function is called anonymous function. Because, the function is not known by a function name of itself, but via another variable name, keeping the original function anonymous from the rest of the script.

In the following example, we define an anonymous function and assign it to a variable x.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<body>
    <pre id="output"></pre>
    <script>
        var x = function (a, b) {
          var result = a + b;
          return result;
        }
        
        var n1 = 4, n2 = 3;
        var sum = x(n1, n2);
        document.getElementById('output').innerHTML = n1 + ' + ' + n2 + ' = ' + sum;
    </script>
</body>
</html>

Conclusion

In this JavaScript Tutorial, we have learnt the syntax to define a function, different aspects of a function, how to define a function with no parameters or return value, how to assign a function to a variable, and what an anonymous function is, with examples.

TutorialKart

JavaScript Functions