JavaScript Function Definitions
JavaScript functions are declared using the function keyword, either as a declaration or expression. Declarations define named functions, while expressions assign functions to variables. Both enable code reuse and modularity.
Syntax:
- Function Declarations:
function functionName( parameters ) { // Statements };
- Function Expressions:
let variableName = function( parameter ) { // Statements };
- Function Constructor:
let FunctionName = new Function("parameter", "return parameter"); let variableName = FunctionName(values);
Parameter: It contains single parameter functionName which is mandatory and used to specify the name of function.
Examples of JavaScript Function Definitions
Example: This example we demonstrates a function declaration named GFG, which multiplies two numbers. The result is displayed in the paragraph element.
html
<!DOCTYPE html> < html > < head > < title >Function Declarations</ title > </ head > < body style = "text-align: center" > < h2 >w3wiki</ h2 > < p id = "Beginner" ></ p > < script > let var1 = GFG(40, 3); document.getElementById( "Beginner" ).innerHTML = var1; function GFG(num1, num2) { return num1 * num2; } </ script > </ body > </ html > |
Output:
Example 2: This example describes a function expression assigned to var1, multiplying two numbers. The result is displayed using innerHTML.
html
<!DOCTYPE html> < html > < head > < title >Function Expressions</ title > </ head > < body > < h2 >w3wiki</ h2 > < p id = "Beginner" ></ p > < script > let var1 = function (num1, num2) { return num1 * num2; }; document.getElementById( "Beginner" ).innerHTML = var1(20, 30); </ script > </ body > </ html > |
Output:
Example 3: This example describes a function expression created with the Function constructor, multiplying two numbers and displaying the result in a paragraph element.
html
<!DOCTYPE html> < html > < head > < title >Function Expressions</ title > </ head > < body > < h2 >w3wiki</ h2 > < p id = "Beginner" ></ p > < script > let GFG = new Function( "num1", "num2", "return num1 * num2" ); document.getElementById( "Beginner" ).innerHTML = GFG(25, 4); </ script > </ body > </ html > |
Output:
Function Hoisting
Function hoisting moves function declarations to the top of their scope, allowing them to be used before declaration. Function expressions are not hoisted.
Example: In this example we define function hoisting by invoking a function before its declaration, displaying a welcome message from w3wiki.
html
<!DOCTYPE html> < html > < head > < title >Function Hoisting</ title > </ head > < body style = "text-align: center" > < h1 >w3wiki</ h1 > < script > w3wiki(); function w3wiki() { document.write( "Welcome to w3wiki" ); } </ script > </ body > </ html > |
Output:
Self-Invoking Functions
Self-invoking functions execute automatically upon creation, without a name. Function expressions followed by () execute immediately, while function declarations cannot be invoked directly.
Example: In this example we define a self-invoking function that sets content in a paragraph element, showcasing its execution upon creation.
html
<!DOCTYPE html> < html > < head > < title >Function Hoisting</ title > </ head > < body style = "text-align: center" > < h1 >w3wiki</ h1 > < p id = "Beginner" ></ p > < script > (function () { document.getElementById( "Beginner" ).innerHTML = "w3wiki 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: In this example we demonstrates the use of the arguments object to count the number of arguments passed to a function.
html
<!DOCTYPE html> < html > < head > < title >Function Hoisting</ title > </ head > < body style = "text-align: center" > < h1 >w3wiki</ h1 > < p >Number of arguments :</ p > < p id = "Beginner" ></ p > < script > function w3wiki(num1, num2) { return arguments.length; } document.getElementById( "Beginner" ).innerHTML = w3wiki(4, 3); </ script > </ body > </ html > |
Output:
Arrow Functions
Arrow functions simplify writing function expressions by providing a concise syntax without the need for the function keyword, return keyword, or curly brackets.
Example: In This example we defines an arrow function to multiply two numbers and displays the result using JavaScript.
html
<!DOCTYPE html> < html > < head > < title >Function Hoisting</ title > </ head > < body style = "text-align: center" > < h1 >w3wiki</ h1 > < p id = "Beginner" ></ p > < script > const var1 = (num1, num2) => num1 * num2; document.getElementById( "Beginner" ).innerHTML = var1(5, 5); </ script > </ body > </ html > |
Output: