Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

JavaScript | Function Parameters

  • Difficulty Level : Basic
  • Last Updated : 07 Mar, 2019

Function Parameters are the names that are define in the function definition and real values passed to the function in function definition are known as arguments.

Syntax:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

function Name(paramet1, paramet2, paramet3,paramet4) {
    // Statements
}

Parameter Rules:

  • There is no need to specify the data type for parameters in JavaScript function definitions.
  • It does not perform type checking based on passed in JavaScript function.
  • It does not check the number of received arguments.

Parameters:



  • Name: It is used to specify the name of the function.
  • Arguments: It is provided in the argument field of the function.

Example: This example use JavaScript function parameters and find the largest number.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Function Parameters and Arguments
    </title>
</head>
  
<body style="text-align:center;">
  
    <h2>GeeksForGeeks</h2>
  
    <p>Finding the largest number : (4, 50, 6)</p>
  
    <p id="geeks"></p>
  
    <script>
        function GFG( var1, var2, var3 ) {
            if( var1 > var2 ) {
                if( var1 > var3 ) {
                    return var1;
                }
                else {
                    return var3;
                }
            }
            else {
                if( var2 > var3 ) {
                    return var2;
                }
                else {
                    return var3;
                }
            }
        
        document.getElementById("geeks").innerHTML
                = GFG(4, 50, 6);
    </script>
</body>
  
</html>                    

Output:

Defaults Parameter: The default parameters is used to initialized the named parameters with default values in case of when no value or undefined is passed.

Syntax:

function Name(paramet1 = value1, paramet2 = value2 .. .) {
    // statements
}

Example: This example use default parameters and perform multiplication of numbers.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Function Parameters and Arguments
    </title>
</head>
  
<body style="text-align:center;">
  
    <h2>GeeksForGeeks</h2>
      
    <p>GFG Function multiply : </p>
      
    <p id="geeks"></p>
      
    <script>
        function GFG(num1, num2 = 2) {
            return num1 * num2;
        }
          
        document.getElementById("geeks").innerHTML
                = GFG(4);
    </script>
</body>
  
</html>                    

Output:

Arguments Object: The arguments object are inbuilt object in JavaScript functions. In all non-arrow functions the arguments object is a local variable. Analyse the arguments inside the function by using its arguments object.

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Function Parameters and Arguments
    </title>
</head>
  
<body style="text-align:center;">
  
    <h2>GeeksForGeeks</h2>
      
    <p>
        Finding the largest number in :
        (10, 12, 500, 5, 440, 45) 
    </p>
      
    <p id="geeks"></p>
      
    <script>
        function GFG() {
            var i;
            var maxnum = -Infinity;
            for(i = 0; i < arguments.length; i++) {
                if (arguments[i] > maxnum) {
                    maxnum = arguments[i];
                }
            }
            return maxnum;
        
        document.getElementById("geeks").innerHTML
                = GFG(10, 12, 500, 5, 440, 45);
    </script>
</body>
  
</html>                    

Output:

Arguments Pass by Value: In a function call the parameters are called as arguments. The pass by value sends the value of variable to the function. It does not sends the address of variable. If the function changes the value of arguments then it does not affect the original value.
Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Arguments are Passed by Value
    </title>
</head>
  
<body style="text-align:center;">
  
    <h1>GeeksForGeeks</h1>
      
    <p id="geeks"></p>
      
    <!-- Script to illustrate the use of arguments
        passed by value -->
    <script>
      
        /* Function definition */
        function GeeksForGeeks(var1, var2) { 
            document.write("Inside the GeeksForGeeks function"); 
            document.write('<br/>');
              
            var1 = 100; 
            var2 = 200; 
              
            /* Display the value of variable inside function */
            document.write("var1 =" + var1 +" var2 =" +var2); 
            document.write('<br/>');
        
          
        var1 = 10; 
        var2 = 20;
          
        /* The value of variable before Function call */
        document.write("Before function calling"); 
        document.write('<br/>');
          
        document.write("var1 =" + var1 +" var2 =" +var2); 
        document.write('<br/>');
          
        /* Function call */
        GeeksForGeeks(var1,var2);
          
        /* The value of variable after Function call */
        document.write("After function calling"); 
        document.write('<br/>');
          
        document.write("var1 =" + var1 +" var2 =" +var2);
        document.write('<br/>');
    </script>
</body>
  
</html>                    

Output:

Objects passed by Reference: In Objects Pass by Reference, passing the address of variable instead of the value as the argument to call the Function. If we change the value of variable inside function then it will affect outside function variables.

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Arguments are Passed by Value
    </title>
</head>
  
<body style="text-align:center;">
  
    <h1>GeeksForGeeks</h1>
      
    <p id="geeks"></p>
  
    <script>
        function GeeksForGeeks(varObj) { 
            document.write("Inside GeeksForGeeks function"); 
            document.write('<br/>');
            varObj.a = 100; 
            document.write(varObj.a); 
            document.write('<br/>');
        
          
        // Create object
        varObj = {a:1};
          
        /* Display value of object before function call */
        document.write("Before function calling"); 
        document.write('<br/>');
        document.write(varObj.a);
        document.write('<br/>');
          
        /* Function calling */
        GeeksForGeeks(varObj) 
          
        /* Display value of object after function call */
        document.write("After function calling");
        document.write('<br/>'); 
        document.write(varObj.a);
    </script>
</body>
  
</html>                    

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!