JavaScript Functions

A function is a block of code designed to perform a particular task. It contains organized and reusable code that will be executed by an event or a call to that function. By the using of functions we do not need to write the same code multiple times in order to achieve our goals.

Like any modern programming language, JavaScript allows for the creation of reusable abstract functions. The most common way to define a function in JavaScript is by using the keyword function, followed by a unique function name, a list of parameters or arguments (that might be empty if there not any parameter), and a statement block surrounded by curly braces. The Syntax is :
 function function_name(parameter1, parameter2, parameter3) {
   code to be executed
 }
And the function without any parameter
 function function_name() {
   code to be executed
 }
The function name can contains letters, digits, underscores, and dollar signs, but remember that the name of function would always start with letters or underscore and nothing else. Function parameters are listed inside the parentheses () in the function definition. The parameters are the values received by the function when it is called or invoked and inside the function, parameters behave as local variables. The basic example of function is as follows :
<script>
  function message() {
    document.write("Hello world");
  }
</script>
The above code define a function called message, which simply prints "Hello world" on the page. And also note that it takes no parameters.

Invoking or calling a Function :

A function is not executed before it is invoked or called. To invoke a function we simply need to write the name of that function with parameters inside the brackets, and if it does not have parameters then simply with empty brackets. The basic syntax for calling a function with parameters :
  myfunction(parameter1, parameter2, ....pamareter_n);
Calling a function without arguments
  myfunction();
Now to call the message() function, the code will be :
<script>
  function message() {
    document.write("Hello world");
  }
  message();
</script>
Output :


We can also call the function with html button control. For example :
<!DOCTYPE html>
<html>
<head>
  <title>Function Call</title>
</head>
<body>
  <script>
    function message() {
      document.getElementById("demo1").innerText = "Hello world.";
    }
  </script>
  <input type="button" onclick="message()" value="Click Here" />
  <p id="demo1"></p>
</body>
</html>
Output :



Calling function with parameters :
<!DOCTYPE html>
<html>
<head>
  <title>Function Call with Parameters</title>
</head>
<body>
  <script>
    function message(param) {
      document.write(param);
    }
    var mytext = "Hello world.";
    message(mytext);
  </script>
</body>
</html>
Output :



Function Return Statement :

The JavaScript function can have an optional return statement. The return statement specifies the value which will be returned to where the function was called from. For example the below function return the sum of two number.
<script>
  function addition(a, b) {
    var sum = a + b;
    return sum;
  }
</script>
Now when we call the above function with two parameter, then it will return the sum of two numbers.
  addition(5, 7);
Example :
<!DOCTYPE html>
<html>
<head>
  <title>The return Statement</title>
</head>
<body>
  <script>
    function addition(a, b) {
      var sum = a + b;
      return sum;
    }

    var result = addition(5, 7);
    document.write(result);
  </script>
</body>
</html>
Output :


The returned value from the function addition() will be stored in the variable called result.


Next Topic :