Tech Savvy Institute

JavaScript Functions

A function (also known as a method) is a self-contained piece of code that performs a particular "function". You can recognize a function by its format - it's a piece of descriptive text, followed by open and close brackets.

A function is a reusable code block that will be executed by an event or when the function is called.

To prevent the browser from executing a script when the page loads, you can place your script inside a function. A function contains code that will be executed by an event or by calling that function.

Functions can be called from anywhere within the page (or even from external pages if the function is embedded in an external .js file).

Functions can be defined both in the <head> and <body> sections of a document. However, to ensure that the function is read/loaded by the browser before it is called, it is advisable to place it inside the <head> section.

Example

<html>
<head>
<script type="text/javascript">
function displayMessage() {
    alert("Hello World!");
}
</script>
</head>
<body>
<form>
    <input type="button" value="Click me!" onclick="displayMessage()">
</form>
</body>
</html>

If the line:

alert("Hello World!");

was not placed inside a function, it would have been executed as soon as the page loaded. Now, the script will only execute when the user clicks the button.

The onClick event is added to the button to execute the displayMessage() function when clicked.
How to Define a Function

The syntax for creating a function is:

function functionName(var1, var2, ..., varX) {
    // some code
}

    var1, var2, etc. are variables or values passed into the function.
    {} defines the start and end of the function.

Note:

A function with no parameters must include empty parentheses () after the function name:

function functionName() {
    // some code
}

    JavaScript is case-sensitive, so function must always be written in lowercase.
    When calling a function, use the exact same case as the function name.

The return Statement

The return statement is used to specify the value that is returned from the function.
Example

The function below returns the product of two numbers (a and b):

function prod(a, b) {
    let x = a * b;
    return x;
}

When calling the function, pass two parameters:

let product = prod(2, 3);

The returned value from prod(2, 3) is 6, which will be stored in the variable product.
The Lifetime of JavaScript Variables

When a variable is declared inside a function, it can only be accessed within that function. Once the function exits, the variable is destroyed. These are called local variables.

Multiple functions can have local variables with the same name because each is recognized only within its respective function.

If a variable is declared outside a function, all functions in the page can access it. The lifetime of these global variables starts when they are declared and ends when the page is closed.

js functions

JavaScript Functions

Example

Quiz