JS Scope

1. Scope in JS

  1. Scope determines the accessibility (visibility) of these variables.

  2. In JavaScript, there are two types of scope: Function(Local) & Global.

  3. JavaScript 不會對每個 code block 都產生新的 scope (e.g. if-else. for-loop)

    • 很多其他語言會,但 JavaScript 不會

ES6 增加了 letconst,是 Block level scope

for (var i = 0; i < 10; i++) {
    // some code ...
console.log(i); //10

2. The Lifetime of JavaScript Variables

  • Start: when a variable is declared.
  • Deleted:
    • Local variables: when the function is completed.
    • Global variables: In a web browser, when you close the browser window (or tab), but remains available to new pages loaded into the same window.

3. Local Scope / Function Scope

  • 每個 function 會建立一個新的 local scope
  • local variables 只有 function 內的能用
  • function arguments (parameters) 是 local variables

4. Global Scope

  • Global Variables in HTML
    • With JavaScript, the global scope is the complete JavaScript environment.
    • In HTML, the global scope is the window object. All global variables belong to the window object.
  • Automatically Global
    • 如果賦值給未宣告的變數,會自動變成 global 變數 (it will automatically become a GLOBAL variable.)
    • 如果是 "Strict Mode" ,就不會自動產生 global 變數

Warning: Do NOT create global variables unless you intend to.

  • Your global variables (or functions) can overwrite window variables (or functions).
  • Any function, including the window object, can overwrite your global variables and functions.

5. Example for Variables Scope

console.log('======= Example 1: Function Level Scope ============');
console.log("Global: typeof n1=", typeof n1); //n1 is not defined
console.log("Global: typeof n2=", typeof n2, " value=", n2);

function myFunc1(){
    var n1 = "John";
    console.log("myFunc1(): typeof n1=", typeof n1);
    n2 = "Annie"; // Automatically Global

console.log('======= Example 2: Global Level Scope with `var` ============');
var n3 = "Rubio";

function myFunc2(){
    console.log("myFunc2(): typeof n3=", typeof n3, " value=", n3);
    console.log("myFunc2(): typeof this.n3=", typeof this.n3, " value=", this.n3);
    console.log("myFunc2(): typeof window.n3=", typeof window.n3, " value=", window.n3); //Global Variables in HTML

console.log('======= Example 3: Global Level Scope with `let` ============');
let n4 = "Soar";

function myFunc3(){
    console.log("myFunc3(): typeof n4=", typeof n4, " value=", n4);
    console.log("myFunc3(): typeof this.n4=", typeof this.n4, " value=", this.n4);
    console.log("myFunc3(): typeof window.n4=", typeof window.n4, " value=", window.n4);


======= Example 1: Function Level Scope ============
myFunc1(): typeof n1= string
Global: typeof n1= undefined
Global: typeof n2= string  value= Annie

======= Example 2: Global Level Scope with `var` ============
myFunc2(): typeof n3= string  value= Rubio
myFunc2(): typeof this.n3= string  value= Rubio
myFunc2(): typeof window.n3= string  value= Rubio

======= Example 3: Global Level Scope with `let` ============
myFunc3(): typeof n4= string  value= Soar
myFunc3(): typeof this.n4= undefined  value= undefined
myFunc3(): typeof window.n4= undefined  value= undefined

results matching ""

    No results matching ""