Javascript Functions

Like every programming language, Javascript has creating and calling functions.

A JavaScript function is a block of code designed to perform a particular task.

A JavaScript function is executed when "something" invokes it (calls it).

Javascript has several ways to declare functions.

Here is a simple example.

<!DOCTYPE html>
<html>
  <body>
    <p id="element"></p>

    <script>
       function simpleFunction(a, b) {
          return a * b;
       }
       document.getElementById("element").innerHTML = simpleFunction(1.2, 15);
    </script>
  </body>
</html>

This is very simple javascript function, which gets 2 arguments and multiples and returns.

As you see javascript functions can return value and not return value.

Javascript Functions syntax

A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses () .

Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).

The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...)

The code to be executed, by the function, is placed inside curly brackets: {} .

functionName(parameter1, parameter2, parameter3) {

code to be executed

}

var myFunction = function(parameter1, parameter2, parameter3) {

code to be executed

}

Function Invocation

The code inside the function will execute when "something" invokes (calls) the function:

When an event occurs (when a user clicks a button)

When it is invoked (called) from JavaScript code

Automatically (self invoked)

You will learn a lot more about function invocation later in this tutorial.

Function return

As we can see, javascript function can return value. It's a block of codes, which we declare once and call whenever we want.

We can get the returned value of function and use it another place.

<!DOCTYPE html>
<html>
  <body>
    <p id="element"></p>

    <script>
       function myFunction(a, b) {
           return a * b;
       }
       document.getElementById("element").innerHTML = myFunction(12, 3.5);
    </script>
  </body>
</html>

We can keep the returned value in any variables or sometimes functions we can use functions as variables.

Javascript Function as Constructor

In javascript programming language there is no Classes, polymorphism etc.. but we can create an object and use for it a constructor.

Using as Constructor, javascript Functions let us create objects, initialize and use as object with member functions.

Here is an example how to use javascript Function as a constructor.

<!DOCTYPE html>
<html>
  <body>
    <p id="element"></p>

    <script>
       function constructorFn(name,birthDate) {
          this.name = name;
          this.birthDate = birthDate;
          this.getAge = function()
          {
             //...return age

          }
       }
       var obj = new constructorFn('David','12/10/1990')
       document.getElementById("element").innerHTML = obj.name;
    </script>
  </body>
</html>

Javascript Function has another interesting thing as well.

In javascript Function you can declare a new function , use it, call it and return it. You can declare Function inside and inside that function (recursive).

Here is an example:

<!DOCTYPE html>
<html>
  <body>
    <script>
       function fn1(a, b) {
          var fn2 = function(...){...}
          var fn3 = function(...){fn2(...)..}
          return function(...){...};
       }
    </script>
  </body>
</html>