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