JavaScript `Function`

A function is a reusable block of code that is executed when triggered by an event or called.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Example</title>
<script>
function myFunction()
{
    alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">Click Me</button>
</body>
</html>

JavaScript Function Syntax

A function is a block of code enclosed in curly braces, preceded by the keyword function:

The code inside the function will execute when the function is called.

A function can be called directly when an event occurs (such as when a user clicks a button) and can be called by JavaScript from anywhere.

| | JavaScript is case-sensitive. The keyword function must be in lowercase, and the function must be called with the same case as its name. | | --- | --- |

Calling Functions with Parameters

When calling a function, you can pass values to it, which are called parameters.

These parameters can be used within the function.

You can pass any number of parameters, separated by commas (,):

When you declare a function, declare the parameters as variables: var1, var2

Variables and parameters must appear in the same order. The first variable is the value given to the first parameter, and so on.

Example

<p>Click this button to call a function with parameters.</p>
<button onclick="myFunction('Harry Potter','Wizard')">Click Here</button>
<script>
function myFunction(name, job){
    alert("Welcome " + name + ", the " + job);
}
</script>

The function above will prompt "Welcome Harry Potter, the Wizard" when the button is clicked.

Functions are flexible; you can call the function with different parameters to get different messages:

Example

<button onclick="myFunction('Harry Potter','Wizard')">Click Here</button>
<button onclick="myFunction('Bob','Builder')">Click Here</button>

Depending on which button you click, the example above will prompt "Welcome Harry Potter, the Wizard" or "Welcome Bob, the Builder".

Functions with Return Values

Sometimes, we want the function to return a value to the place where it was called.

This can be achieved using the return statement.

When using the return statement, the function will stop executing and return the specified value.

Syntax

The function above will return the value 5.

Note: The entire JavaScript will not stop executing; only the function will. JavaScript will continue executing the code from where the function was called.

The function call will be replaced by the return value:

The value of the variable myVar is 5, which is the value returned by the function myFunction().

Even without saving it as a variable, you can use the return value:

The innerHTML of the "demo" element will become 5, which is the value returned by the function myFunction().

You can make the return value depend on the parameters passed to the function:

Example

Calculate the product of two numbers and return the result:

function myFunction(a, b)
{
    return a * b;
}

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

The innerHTML of the "demo" element will be:

You can also use the return statement to exit a function. The return value is optional:

function myFunction(a, b)
{
    if (a > b)
    {
        return;
    }
    x = a + b
}

If a is greater than b, the above code will exit the function without calculating the sum of a and b.

Local JavaScript Variables

Variables declared within a JavaScript function (using var) are local variables, so they can only be accessed within the function (the scope is local).

You can use the same name for local variables in different functions, as only the function that declared the variable can recognize it.

Local variables are deleted once the function has completed.

Global JavaScript Variables

Variables declared outside a function are global variables, and they can be accessed by any script and function on the web page.

JavaScript Variable Lifetime

The lifetime of JavaScript variables starts when they are declared.

Local variables are deleted after the function finishes.

Global variables are deleted when the page is closed.

Assigning Values to Undeclared JavaScript Variables

If you assign a value to a variable that has not been declared, the variable will automatically become a property of the window object.

This statement:

Will declare a property carname on the window object.

Global variables created by assigning values to undeclared variables in non-strict mode are configurable properties and can be deleted.

var var1 = 1; // Non-configurable global property
var2 = 2; // Undeclared variable, configurable global property

console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2

delete var1; // false, cannot delete
console.log(var1); // 1

delete var2; 
console.log(delete var2); // true
console.log(var2); // Undefined, error variable not defined

❮ Js Debugging Js This ❯