Free Web Development Online Tutorials, Learn to Code
JavaScript Function Tutorial for Beginners, javascript function arguments, parameters examples

JavaScript Function Examples

Functions are very useful in any programming language, so it's very important to understand how to write javascript function an call them.

A javascript function is a reusable code block which will be executed only if it is called, Function will always be executed by some event.

How to write Function in JavaScript

Use the keyword function followed by function name.
write open and close parentheses function name()
After parenthesis there are curly braces open and close {}, inside curly braces you write your codes

Javascript function declaration

function functionName()
{
    // here you write code
}

Three points you need to understand

  • How to write function
  • How to pass arguments
  • How to return value

Example 1 : Alert, We often see alert message in many web sites when we fill up some form, we get alert for many reason, if any field is not filled up or with wrong data etc. So this is how we can show alert message using javascript.

<script>
function showAlert() {
alert('This is an Alert');
}
</script>
<input type="button" value="Show Alert Message" onclick="showAlert();" />

Example 2: Confirm, Confirm alert is used when you ask user to confirm or not .

<script>
function showConfirm() {
    var result = confirm("Are you learning javascript");
    if (result)
        alert('Yes, Learning');
        else
            
        alert('Not Learning');
    }
</script>            
            
<input type="button" value="Please Confirm" onclick="showConfirm();" />

Javascript Function Arguments Example

Example 3: Pass Parameters, Now we learn how to pass parameter in Javascript function

Type you firstname

<script>
function welcomeMessage(firstname) {            
    alert('Welcome ' + firstname + '!');
}
            
function callWelcomeMessage() {
    var fname = document.getElementById('txtfirstName').value;
    welcomeMessage(fname);
}
</script>

In above example you also can see how to call a javascript function from another function


Javascript function return value example

Let's see how to return value from Javascript function.

Here we have written two functions, the first function Calculate do some calculation based on input parameters and return some value. The second function we have written just to call the function and display the result .

<script> 
function Calculate(arg1, arg2) {
    var _diff = eval(arg1) - eval(arg2);
    return eval(_diff * 10);
}
function DisplayMessage() {
    window.alert(Calculate(10, 5));
}
</script>

Javascript Local variables
A variable declared inside a function is only accessible inside that function, is known as local variables.

If you declare a variable outside function that can be accessible in some other function also.

<script> 
    var bgcolor = "white";
    function functionName() {
        var fcolor = "red"; // this is local variable
    }
</script>

Javascript function overloading example

Like any other programming language JavaScript Does NOT Support Method or Function Overloading

Here is an example Function Overloading in JavaScript

function HelloWorld()
    {
        alert("Hello, Welcome to my site");
    }

function HelloWorld(name) {
        alert("Hello " + name + ", Welcome to my site");
    }

Now if I make call to above two functions, only the second one will be executed always

<input type="button" onclick="HelloWorld()" value="Welcome">
<input type="button" onclick="HelloWorld('Bill')" value="Welcome">

Anonymous function in JavaScript

Anonymous function is like an expression, starts with function keyword, can be easily declared and captured value like a variable.

<script>
    var helloWorld = function () {
        alert("Anonymous function invoked");
    }
    helloWorld();
</script> 

Comment
Name
Email
Website
Subscribe