HTML
<!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>Function Block & Lexical scope</title>
</head>
<body>
<!--
Local Variables : Variables declared within a JavaScript function, become LOCAL to the function.
Local variables can only be accessed from within the function.
Block Level Scope : This scope restricts variable declared inside a specific block, from access by the outside of the block.
let & const keyword facilitates variables to be block scoped.
Lexical scope : means a variable defined outside a function can be accessible inside another function defined after the variable declaration.
But the opposite is not true; the variables defined inside a function will not be accessible outside that function.
-->
<h1>Demo: JavaScript Functions</h1>
<div>
<h2>Function Block variable Scope - Part(1)</h2>
<p id="para1"></p>
<p id="para2"></p>
<p id="para3"></p>
</div>
<div>
<h2>Function Block variable Scope - Part(2)</h2>
<p id="para4"></p>
<p id="para5"></p>
</div>
<div>
<h2>Function Lexical Scope</h2>
<p id="para6"></p>
<p id="para7"></p>
<p id="para8"></p>
<p id="para9"></p>
</div>
<!-- JavaScript code Starts here -->
<script>
/************************************************/
// Function variable Scope - Part(1)
// Score Goals Example
//
let totalGoals = 0; // Declaring the global variable
function scoreGoals() {
let totalGoals = 5; // Declaring the local variable
document.getElementById('para2').innerHTML =
"Local Variable value within the function declaration - totalGoals = " + totalGoals;
} // End of function declaration block
document.getElementById('para1').innerHTML =
"Variable value before involing the function - totalGoals = " + totalGoals;
scoreGoals(); // Function calling or invoking
document.getElementById('para3').innerHTML =
"Variable value after involing the function - totalGoals = " + totalGoals;
/************************************************/
// Function variable Scope - Part(2)
// Dog Names Example
//
let dog = 'Charlie'; // Declaring the global variable
function dogNames() {
dog = 'Sultan'; // Re-assigning global variable, locally in a function
document.getElementById('para4').innerHTML =
"Dog name within a function = " + dog;
}
dogNames(); // Function calling or invoking
document.getElementById('para5').innerHTML =
"Dog name after involing the function = " + dog;
/************************************************/
// Function Lexical Scope
// Example : Cricket Team India scored in WorldCup
//
function indiaWorldCup() {
const runScored = [317,350,322,301];
function announceScores() {
let matchNum = 1;
function scoreBoard() {
let paraNum = 6;
for (let run of runScored) {
document.getElementById(`para${paraNum}`).innerHTML =
`${matchNum} : Team India scored ${run} runs.`;
matchNum++;
paraNum++;
}
}
scoreBoard();
}
announceScores();
}
indiaWorldCup();
</script>
<!-- JavaScript code Ends here -->
</body>
</html>