How to Create and Call custom JavaScript Functions: 3 Demos

How to Create and Call custom JavaScript Functions: 3 Demos

The functions of JavaScript

The function is a way to create a block of code that can be reused in JavaScript programs again and again by simply calling the function. Function in JavaScript may take one or more parameters and may also return value.

  • A JS function code will execute only when it is called.
  • JavaScript functions are basically objects.

This tutorial explains, how to write functions with parameters. The examples will also show how to call functions. Let us first look at how to define a function.

Watch a Short video of this tutorial

Syntax to define a JavaScript function

This is how a function is defined in JavaScript:

function function_name() {

//Code of function

}

  • Where function keyword is followed by the name of the function.
  • The parenthesis contains parameters of the function.
  • The code of the function is written inside the curly braces.

See a basic example of writing a function.

A function example

Following is a simple JavaScript function example. We simply wrote a function that will display an alert as you click the button. Click the link or image below to see it online:

JavaScript functions

Experience this example online

Calling a function

After the function is defined, this must be called in order to invoke/execute its code. You can call a function in events, as shown in above example.

When you clicked on the button, the function was called at the “onclick” event of the button. Similarly, you can call a function at some other part (outside the function) of JavaScript code. The JavaScript function’s call can be done automatically (self-invoke).

A function with parameter

As described in function’s definition, a function may accept one or more parameters. The function’s parameters are given within parenthesis. See the following example of using parameters in the function.

An example with parameters in function

The example will take two parameters (a and b). We will calculate the sum of two and display in an alert. See example by clicking the link:

Experience this example online

As you can see, a function with two parameters is defined. As you click on the button, two values are sent at function call. The sum_func will calculate the sum and the result is shown in an alert.

Javascript return statement in function

As mentioned in the definition, the JavaScript function can also return values. The value is returned by using the return statement inside a function.

As return statement is met in the function, the execution of code inside the function stops. Generally, this should be the last statement in a function. See the following example of using the return statement.

Function with return example

Following is a function with return statement example. A function with name sum_func is created. As you click on the button “Execute JS function” the “showalert” function is called.

The “showalert” will call “sum_func” function with two parameters. Function arguments will be used to get the sum of two and “sum_func” function will return variables’ sum value back to the “showalert” function that will display the sum of two values.

See the example of return statement by clicking the link or image below:

JavaScript function return

Experience this example online

Read More: JS array | How to create JavaScript alerts