JavaScript Function Definitions
Last Updated :
11 Mar, 2024
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...