JavaScript | Function Definitions

The function keyword is used to define JavaScript Function Definitions.

Syntax:

  • Function Declarations:
    function functionName( parameters ) {
        // Statements
    }
  • Function Expressions:
    var variableName = functionName( parameter ) {
        // Statements
    }; 
  • Function Constructor:
    var FunctionName = new Function("parameter", "return parameter");
    var variableName = FunctionName(values); 

Parameter: It contains single parameter functionName which is mandatory and used to specify the name of function.

Example: This example describes the Function Declarations.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Function Declarations
    </title>
</head>
  
<body style="text-align:center;">
  
    <h2>GeeksForGeeks</h2>
          
    <p id="geeks"></p>
          
    <script>
        var var1 = GFG(40, 3);
              
        document.getElementById("geeks").innerHTML = var1;
              
        function GFG(num1, num2) {
            return num1 * num2;
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:

Example 2:This example describes the Function Expressions stored in variable.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Function Expressions
    </title>
</head>
  
<body>
      
    <h2>GeeksForGeeks</h2>
      
    <p id="geeks"></p>
      
    <script>
        var var1 = function (num1, num2) {
                return num1 * num2
            };
              
        document.getElementById("geeks").innerHTML
                = var1(20, 30);
    </script>
</body>
  
</html>                    

chevron_right


Output:

Example 3: This example describes the use of Function Constructor.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Function Expressions
    </title>
</head>
  
<body>
      
    <h2>GeeksForGeeks</h2>
      
    <p id="geeks"></p>
      
    <script>
        var GFG = new Function("num1", "num2", "return num1 * num2");
          
        document.getElementById("geeks").innerHTML = GFG(25, 4);
    </script>
</body>
  
</html>                    

chevron_right


Output:

Function Hoisting: It is the mechanism of moving declarations to the top of the current scope. Function declarations are hoisted to the top of the enclosing function and by Function Hoisting we can use the function before its declaration. Functions defined using an expression are not hoisted.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Function Hoisting
    </title>
</head>
  
<body style="text-align:center;">
    <h1>GeeksForGeeks</h1>
      
    <script>
        GeeksForGeeks(); 
        function GeeksForGeeks() {
            document.write("Welcome to GeeksForGeeks");
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:

Self-Invoking Functions: A self-invoking functions runs automatically when you create it and self-invoking functions has no name. If the expression is followed by () then Function expressions will execute automatically and you can’t invoke a function declaration.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Function Hoisting
    </title>
</head>
  
<body style="text-align:center;">
    <h1>GeeksForGeeks</h1>
      
    <p id="geeks"></p>
      
    <script>
        (function () {
            document.getElementById("geeks").innerHTML
                = "GeeksForGeeks is the best way to learn";
        })();
    </script>
</body>
  
</html>                    

chevron_right


Output:

Functions are Objects: It can describe functions as objects and have both properties and methods.

  • When define function as property of an object then it is known as method to the object.
  • When design a function to create new objects then it is known as object constructor.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Function Hoisting
    </title>
</head>
  
<body style="text-align:center;">
    <h1>GeeksForGeeks</h1>
      
    <p>Number of arguments :</p>
      
    <p id="geeks"></p>
      
    <script>
        function GeeksForGeeks(num1, num2) {
            return arguments.length;
        }
          
        document.getElementById("geeks").innerHTML 
                = GeeksForGeeks(4, 3);
    </script>
</body>
  
</html>                    

chevron_right


Output:

Arrow Functions: By implementing the Arrow functions it becomes easier to write function expressions and it also allows a short syntax for writing function expressions and there is no need of the function keyword, the return keyword and the curly brackets.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Function Hoisting
    </title>
</head>
  
<body style="text-align:center;">
    <h1>GeeksForGeeks</h1>
      
     <p id="geeks"></p>
      
    <script>
        const var1 = (num1, num2) => num1 * num2;
          
        document.getElementById("geeks").innerHTML
                = var1(5, 5);
    </script>
</body>
  
</html>                    

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.