MENU


Scope

A JavaScript program can be organized and split into multiple snippets, which can be a file, a function, or a block (within non-function {...}). These files, functions, and blocks may be nested within one another, thus forming a hierarchy. For example, you may find two functions declared within another function, which may in turn be declared within another block.

The scopescope scope of a variable defines where the variable is visible/usable within those code snippets. In general, a variable declared at an outer level is accessible within a contained inner level, but not necessarily vice-versa. Thus, variables declared at the outermost level may be accessed everywhere, and are sometimes called global variables, global variables, global variables, as far as client-side JavaScript is concerned.

I. 'let' (block/local scope) I. 'let' (block/local scope) I. 'let' (block/local scope)

'let' limits the scope of a variable to the block of code marked by the containing {...}, which either exists independently or attached to a statement of 'if', 'for', 'do', 'while', 'try' etc. In 8.3.2, you will see that 'let' can also be used in the initialization clause of the 'for'for 'for '' ' construct.

121
RESETRUNFULL
<!DOCTYPE html><html><body><script>

Here, HTML-wise, it is important to place that <script> section in the <body> section, instead of the <head> section, because the body of the HTML document needs to be loaded first before we can use ‘document.body.innerHTML’. An alternative is to use document.write().

</script></body><html>

<!DOCTYPE html><html><body><script>

<!DOCTYPE html><html><head></head><body><script>
   let a = 1;
   document.body.innerHTML += a;
   {let a = 2;
    document.body.innerHTML += a;
    let b = 3;
   }
   document.body.innerHTML += a;   // document.body.innerHTML += b; //error: b is not defined</script></body></html>

</script></body><html>

II. 'var' (function scope) II. 'var' (function scope) II. 'var' (function scope)

As we will see, in addition to the inner 'var' variables, function parameters have a function scope by default.

Notice how this differs from the previous example. Here all variables are acting as global variables as if they are declared in the outermost level.
RESETRUNFULL
<!DOCTYPE html><html><body><script>

<!DOCTYPE html><html><head></head><body><script>
   var a = 1;
   document.body.innerHTML += a;
   {var a = 2;
    document.body.innerHTML += a;
    var b = 3;
   }
   document.body.innerHTML += a;
   document.body.innerHTML += b;</script></body></html>

</script></body><html>

III. (default) (global/file scope) III. (default) (global/file scope) III. (default) (global/file scope)

There is no specific 'keyword' for the declaration of global variables. To create a global variable, just declare it directly.

To see the messages produced by console.log(), press F12 (in most browsers).
RESETRUNFULL
<!DOCTYPE html><html><body><script>

<!DOCTYPE html><html><body><script>
   a=1;  // a global variable
   var b=2;  // another global variable
   var c=3;
   function f(){
      d=4;   // a global variable
      var e=5;
      let f=6;
      console.log(a);  // 1
      console.log(b);  // 2
      console.log(c);  // 3
      console.log(d);  // 4
      console.log(e);  // 5
      console.log(f);  // 6
   }
   f();
   console.log(a);  // 1
   console.log(b);  // 2
   console.log(c);  // 3
   console.log(d);  // 4
   console.log(e);  // ReferenceError: e is not defined   //console.log(f);// ReferenceError: f is not defined</script></body></html>

</script></body><html>

If you wrote some cross-platform JS code that could run on Node, in the browser environment, and also inside web-workers, you'd have a hard time getting hold of the global object. This is because it is window for browsers, global for Node, and self for web workers. If there are more runtimes, the global object will be different for them as well. ES2020 brings us globalThis which always refers to the global object, no matter where you are executing your code.


RESETRUNFULL
<!DOCTYPE html><html><body><script>

console.log(globalThis.setTimeout===window.setTimeout);// true

</script></body><html>

IV. 'const' (block/local scope) IV. 'const' (block/local scope) IV. 'const' (block/local scope)

Declaring a variable as a constant makes it explicitly clear that the variable must not be made to reference something else. Although replacing 'const' with 'let' in a correct program won't result in any noticeable difference generally during runtime, using 'const' wherever possible makes the code more readable and is a good coding practice.


RESETRUNFULL
<!DOCTYPE html><html><body><script>

<!DOCTYPE html><html><body><script>{
   const a = 1;   //a = 2; // Error: Assignment to constant variable.}// document.body.innerHTML=a; // Error: a is not defined</script></body></html>

</script></body><html>

'const' does not make the value immutable (refer to Object.freeze() in 8.2.7). For example, an object referenced by a constant variable can still have its properties changed.


RESETRUNFULL
<!DOCTYPE html><html><body><script>

<!DOCTYPE html><html><body><script>
   const o = {a:10};
   o.a = 20;
   console.log(o.a);  // 20
   o = {b:20};  // TypeError</script></body></html>

</script></body><html>