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 >GeeksForGeeks</ h2 >
< p id = "geeks" ></ p >
< script >
let var1 = GFG(40, 3);
document.getElementById(
"geeks"
).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 >GeeksForGeeks</ h2 >
< p id = "geeks" ></ p >
< script >
let var1 = function (num1, num2) {
return num1 * num2;
};
document.getElementById(
"geeks"
).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 >GeeksForGeeks</ h2 >
< p id = "geeks" ></ p >
< script >
let GFG = new Function(
"num1",
"num2",
"return num1 * num2"
);
document.getElementById(
"geeks"
).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 GeeksForGeeks.
html
<!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
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 >GeeksForGeeks</ h1 >
< p id = "geeks" ></ p >
< script >
(function () {
document.getElementById(
"geeks"
).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: 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 >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 >
|
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 >GeeksForGeeks</ h1 >
< p id = "geeks" ></ p >
< script >
const var1 = (num1, num2) =>
num1 * num2;
document.getElementById(
"geeks"
).innerHTML = var1(5, 5);
</ script >
</ body >
</ html >
|
Output:
Last Updated :
11 Mar, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...