2. 變數作用域的範圍

var、let、const 三者宣告出來的變數作用域差別為何？

💡先講結論：
var 的作用域範圍在函式內 ( 函式作用域 )，let、const 則屬於區塊作用域，且目前主流的宣告方式皆採用 let、const。

等等，什麼是函式作用域？什麼是區塊作用域？

函式作用域

函式作用域的意思就是，變數的生命週期在一個函式內，然後樣子看來起來像這樣

function fn(){
    var myName = '小白';
    // myName 變數的作用域僅存在此函式中
    console.log(myName);
}

fn();//印出小白
console.log(myName);// Uncaught ReferenceError: myName is not defined

區塊作用域

區塊作用域則有下列幾種類型

• 函式：function fn() { …… } 區塊作用域是函式作用域的一種
• for 迴圈：for( xxx）{ …… }
• 判斷式：if( expression ){ …… }
• 純粹的區塊：｛｝
  基本上看到｛｝都可以認定為一個區塊

好像還看不太出來差別？我們來用以下例子區分

1. for 迴圈

    for( var i=0 ; i<10; i++ ){}
    console.log(i);// 印出 10，抓得到 i 這個值！！
   
    for( let j=0 ; j<10; j++ ){}
    console.log(j);// 印出 Uncaught ReferenceError: j is not defined
   

2. if 判斷式

    if( ..... ){
        var myName = '小白';
    }
    console.log(myName);// 印出小白
   
    if( ..... ){
        let yourName = '小葵';
    }
    console.log(yourName);// 印出 Uncaught ReferenceError: yourName is not defined
   

3. 純粹的區塊

    {
        var myName = '小白';
    }
    console.log(myName);// 印出小白
   
    {
        let yourName = '小葵';
    }
    console.log(yourName);// 印出 Uncaught ReferenceError: yourName is not defined
   

從上述三個例子中可以發現，區塊作用域的優點會比函式作用域的優點要來得多，因為 var 所宣告的變數，除了在函式中宣告的不會變成全域變數外，其餘都會變成全域變數，這在幾百行幾千行中是非常難以除錯的，因此 let、const 宣告詞才會成為主流。