html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Scope Closures - The Story of a Functional Building</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class = "w3-container">
<h1>Scope Closures</h1>
<h2>The Story of a Functional Building</h2>
<img class="w3-image" src = "http://bricks.dk/src/images/google/nicolinehus/july/3.jpg" alt = "Terraced Building" loading="lazy">
<p>In this photo the ground represents the global scope and the terraced building represents a group of nested functions. To put it in code form we could represent it like this:</p>
<div class = "w3-panel w3-card w3-light-grey">
<h4>A Functional Building</h4>
<div class = "w3-code jsHigh notranslate">
var ground = "I am global";<br><br>
(function firstFloor (){<br><br>
  function secondFloor (){<br><br>
    function thirdFloor(){<br><br>
      function andSoOn (){<br><br>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
body {
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run