Nested & Callback Functions
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Nested & Callback Functions</title>
</head>
<body>
<!--
Nested Functions : Functions within another function.
- Nested (inner) function is private to its containing (outer) function.
- Nested function also forms a closure.
- Nested function is a closure, this means that a nested function can "inherit" the arguments and variables of its containing function.
Callback Function : a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
- callback functions are used in asynchronous functions, where one function has to wait for another function.
-->
<h1>Demo : Nested & Callback Functions</h1>
<div>
<h2>Nested Functions</h2>
<p id="para1"></p>
<p id="para2"></p>
<p id="para3"></p>
<p id="para4"></p>
</div>
<div>
<h2>Functions as Arguments (callback Functions) : Example (1)</h2>
<p id="para5"></p>
</div>
<div>
<h2>Functions as Arguments (callback Functions) : Example (2)</h2>
<p id="para6"></p>
</div>
<!-- JavaScript code Starts here -->
<script>
/************************************************/
// Nested Functions
// Example : Cricket Team India scored in WorldCup
//
function indiaWorldCup() {
const runScored = [317,350,322,301];
function announceScores() {
let matchNum = 1;
function scoreBoard() {
let paraNum = 1;
for (let run of runScored) {
document.getElementById(`para${paraNum}`).innerHTML =
`${matchNum} : Team India scored ${run} runs.`;
matchNum++;
paraNum++;
}
}
scoreBoard();
}
announceScores();
}
indiaWorldCup();
/************************************************/
// Functions as Arguments (callback Functions)
// Example : Print the statement thrice
//
function tryAgain (printFunc) {
printFunc('para5');
printFunc('para6');
printFunc('para7');
}
function message (para) {
document.getElementById(para).innerHTML =
`Hurray! we have won the match`;
}
tryAgain(message); // function passed as an argument
/************************************************/
// Functions as Arguments (callback Functions)
// Example : Is the number between 1 and 100
//
function isBetween(min, max) {
return function (val) {
return val >= min && val <= max;
}
}
const evalNum = isBetween(1,100);
document.getElementById('para7').innerHTML =
`Is the number between 1 and 100 ?: ${evalNum(-1)}`;
</script>
<!-- JavaScript code Ends here -->
</body>
</html>