Function Arguments

An JavaScript function doesn't care the number arguments and their types. An arguments object contains the values of each argument passed in.

The arguments object acts like an array. We can access each argument using bracket notation with arguments object. The total number of parameter is stored in the length property of arguments object.

You can call a function without parameter declaration with parameter as follows:

 
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
        function sayHi() {
           document.writeln("arguments[0]:" + arguments[0] + ", arguments[1]:" + arguments[1]); 
        } 
        sayHi("A","B");
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

The arguments.length property stores the number of arguments passed into the function.

 
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
        function sayHi() { 
            document.writeln(arguments.length); 
        } 
        sayHi("asdf", 0); //2 
        sayHi(); //0 
        sayHi("asdf"); //1 
        sayHi(0); //1 
       
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

The following code illustrates the JavaScript's way of overloading

 
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
        function add() { 
            if(arguments.length == 0) { 
              document.writeln("No parameter"); 
            } else if(arguments.length == 1) { 
                document.writeln(arguments[0] + 10); 
            } else if (arguments.length == 2) { 
                document.writeln(arguments[0] + arguments[1]); 
            } 
        } 
        add(10); //20 
        add(30, 20); //50 
        add(); //No parameter
        
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

The arguments object can be used in conjunction with named arguments:

 
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
    
        function add(num1, num2) {
           if(arguments.length == 0) { 
              document.writeln("No parameter"); 
           } else if(arguments.length == 1) {
              document.writeln(num1 + 10);
           } else if (arguments.length == 2) {
              document.writeln(arguments[0] + num2);
           } 
        } 
        add(10); //20 
        add(30, 20); //50 
        add(); //No parameter

       
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

arguments stay in sync with the values of the corresponding named parameters:

 
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
        function add(num1, num2) {
           document.writeln("arguments[0]:" + arguments[0]); //30
           document.writeln("arguments[1]:" + arguments[1]); //20
           
           arguments[1] = 10;
           document.writeln("arguments[0]:" + arguments[0]); //30
           document.writeln("arguments[1]:" + arguments[1]); //10
        
           num2 = 123;
           document.writeln("arguments[0]:" + arguments[0]); //30
           document.writeln("arguments[1]:" + arguments[1]); //123
           
        } 
        add(30, 20);
       
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

Any value-missing named arguments have the value undefined.

 
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
        function add(num1, num2) {
           document.writeln("arguments[0]:" + arguments[0]); 
           document.writeln("arguments[1]:" + arguments[1]); 
        } 
        add(); 
       
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

No Overloading In JavaScript

If two functions have the same name in JavaScript, the last function wins.

 
<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
        function add(num){ 
            return num + 100; 
        } 
        function add(num) { 
            return num + 200; 
        } 
        var result = add(100); 
        document.writeln(result);//300 
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

Home
JavaScript Book
Language Basics

Function: