JS functions

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript Functions

A JavaScript function is defined as a block of code that is created to perform a particular task.

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

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Functions</h2>

<p>This example calls a function which performs a calculation, and returns the result:</p>

<p id=”demo”></p>

<script>

function myFunction(p1, p2) {

  return p1 * p2;

}

document.getElementById(“demo”).innerHTML = myFunction(4, 3);

</script>

</body>

</html>

Output

JavaScript Functions

This example calls a function which performs a calculation, and returns the result:

12

JavaScript Function Syntax

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

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

The parentheses may consists of parameter names separated by commas:

(parameter1, parameter2, …)

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

function name(parameter1, parameter2, parameter3) {

  // code to be executed

}

Function parameters are defined with inside the parentheses () in the function definition.

Function arguments are the values received by the function when it is invoked.

Within the function, the arguments (the parameters) represents as local variables.

A Function is much the same as a Procedure or a Subroutine, in other programming languages.

Function Invocation

The code within the function sexecute 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).

Function Return

When JavaScript moves towards these return statement, the function stop executing.

If the function was invoked from a statement, JavaScript “return” to execute the code after the invoking statement.

Functions computes a return value. The return value is “returned” back to the “caller”:

Example

Calculating the product of two numbers, and return the result:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Functions</h2>

<p>This example calls a function which performs a calculation and returns the result:</p>

<p id=”demo”></p>

<script>

var x = myFunction(4, 3);

document.getElementById(“demo”).innerHTML = x;

function myFunction(a, b) {

  return a * b;

}

</script>

</body>

</html>

Output

JavaScript Functions

This example calls a function which performs a calculation and returns the result:

12

Why Functions?

The code can be reused: Define the code once, and use it many times.

The same code can be used many times with different arguments, to generate different results.

Convert Fahrenheit to Celsius:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Functions</h2>

<p>This example calls a function to convert from Fahrenheit to Celsius:</p>

<p id=”demo”></p>

<script>

function toCelsius(f) {

  return (5/9) * (f-32);

}

document.getElementById(“demo”).innerHTML = toCelsius(77);

</script>

</body>

</html>     

Output

JavaScript Functions

This example calls a function to convert from Fahrenheit to Celsius:

25

The () Operator Invokes the Function

Using the example above, toCelsius denotes the function object, and Celsius() refers to the function result.

If a function is accessed without (), it return the function object instead of the function result.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Functions</h2>

<p>Accessing a function without () will return the function definition instead of the function result:</p>

<p id=”demo”></p>

<script>

function toCelsius(f) {

  return (5/9) * (f-32);

}

document.getElementById(“demo”).innerHTML = toCelsius;

</script>

</body>

</html>

Output

JavaScript Functions

Accessing a function without () will return the function definition instead of the function result:

function toCelsius(f) { return (5/9) * (f-32); }

Functions Used as Variable Values

Functions can be used in a similar like variables, in all types of formulas, assignments, and calculations.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Functions</h2>

<p id=”demo”></p>

<script>

document.getElementById(“demo”).innerHTML =

“The temperature is ” + toCelsius(77) + ” Celsius”;

function toCelsius(fahrenheit) {

  return (5/9) * (fahrenheit-32);

}

</script>

</body>

</html>

Output

JavaScript Functions

The tempreture is 25 Celsius

Local Variables

Variables that are defined inside a JavaScript function, become LOCAL to the function.

Local variables can only be accessed from inside the function.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Functions</h2>

<p>Outside myFunction() carName is undefined.</p>

<p id=”demo1″></p>

<p id=”demo2″></p>

<script>

myFunction();

function myFunction() {

  let carName = “Volvo”;

  document.getElementById(“demo1”).innerHTML =

  typeof carName + ” ” + carName;

}

document.getElementById(“demo2”).innerHTML =

typeof carName;

</script>

</body>

</html>

Output

JavaScript Functions

Outside myFunction() carName is undefined.

String Volvo

undefined