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.
<!DOCTYPE html> <html> <head> <title> Function Declarations </title> </head> <body style="text-align:center;"> <h2>GeeksForGeeks</h2> <p id="neveropen"></p> <script> var var1 = GFG(40, 3); document.getElementById("neveropen").innerHTML = var1; function GFG(num1, num2) { return num1 * num2; } </script> </body> </html> |
Output:
Example 2:This example describes the Function Expressions stored in variable.
<!DOCTYPE html> <html> <head> <title> Function Expressions </title> </head> <body> <h2>GeeksForGeeks</h2> <p id="neveropen"></p> <script> var var1 = function (num1, num2) { return num1 * num2 }; document.getElementById("neveropen").innerHTML = var1(20, 30); </script> </body> </html> |
Output:
Example 3: This example describes the use of Function Constructor.
<!DOCTYPE html> <html> <head> <title> Function Expressions </title> </head> <body> <h2>GeeksForGeeks</h2> <p id="neveropen"></p> <script> var GFG = new Function("num1", "num2", "return num1 * num2"); document.getElementById("neveropen").innerHTML = GFG(25, 4); </script> </body> </html> |
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:
<!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> |
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:
<!DOCTYPE html> <html> <head> <title> Function Hoisting </title> </head> <body style="text-align:center;"> <h1>GeeksForGeeks</h1> <p id="neveropen"></p> <script> (function () { document.getElementById("neveropen").innerHTML = "GeeksForGeeks is the best way to learn"; })(); </script> </body> </html> |
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:
<!DOCTYPE html> <html> <head> <title> Function Hoisting </title> </head> <body style="text-align:center;"> <h1>GeeksForGeeks</h1> <p>Number of arguments :</p> <p id="neveropen"></p> <script> function GeeksForGeeks(num1, num2) { return arguments.length; } document.getElementById("neveropen").innerHTML = GeeksForGeeks(4, 3); </script> </body> </html> |
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:
<!DOCTYPE html> <html> <head> <title> Function Hoisting </title> </head> <body style="text-align:center;"> <h1>GeeksForGeeks</h1> <p id="neveropen"></p> <script> const var1 = (num1, num2) => num1 * num2; document.getElementById("neveropen").innerHTML = var1(5, 5); </script> </body> </html> |
Output:
