JS學習紀錄-07 - 宣告變數 - let、const、var - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

JS學習紀錄-07 - 宣告變數 - let、const、var

javascript 學習筆記 js

joycechou_914 2024-05-25 15:26:15 ‧ 630 瀏覽

分享至

嗨嗨~我是914 今天也來學習宣告變數 - let、const、var囉GOGOGO

我的天~好吧我一直有點逃避這塊:)
來個崩潰15秒(一般的5倍)
今天來寫一下~一直說要發文的這個主題
QQ 如果真的有什麼錯誤~再麻煩各位大神指教了

前情提要&重要事項
1.變數提升
變量和函數的聲明會在編譯階段被移動到其所在作用域的頂部。也就是說可以在變量和函數被聲明之前使用它們。但不同的聲明方式 (var, let, const, 以及函數) 的提升行為是不同的
2.這個面試好像蠻常考到的，我也不曉得為甚麼一直死在這塊(?)
3.下面會有補充實例的部分

剛開始先來提一下用這三個做宣告的部分
宣告

let 宣告一個可以重新賦值得變數

let message = "Hello";
message = "World";
console.log(message); // World

const 宣告一個不可重新賦值的常數

const number = 10;
// number = 20; // TypeError: Assignment to constant variable.
const array = [1, 2, 3];
array.push(4);
console.log(array); // [1, 2, 3, 4]

var 宣告一個可隨意更改其內容的變數

var counter = 1;
counter = 2;
console.log(counter); // 2

var

作用域：var 是函數作用域（function-scoped）。用 var 聲明的變量在其定義的函數內部是可見的，如果是在全局範圍內聲明的，則在整個程序中都可見。
變量提升：var 變量會被提升（hoisted）到其作用域的頂部。這意味著變量可以在其聲明之前使用，不過值為 undefined。
重新賦值：可以多次重新賦值，也可以重新聲明。

console.log(x); // undefined
var x = 5;
console.log(x); // 5

function foo() {
  var y = 10;
  if (true) {
    var y = 20; // 同一個變量
    console.log(y); // 20
  }
  console.log(y); // 20
}
foo();

let

作用域：let 是塊作用域（block-scoped）。用 let 聲明的變量在其定義的塊內部是可見的（例如 {}）。
變量提升：let 變量會被提升到塊的頂部，但在聲明之前不能使用
重新賦值：可以重新賦值，但不能在相同的作用域內重新聲明。

console.log(a); // ReferenceError: a is not defined
let a = 10;
console.log(a); // 10

function bar() {
  let b = 1;
  if (true) {
    let b = 2; // 不同的變量
    console.log(b); // 2
  }
  console.log(b); // 1
}
bar();

const

作用域：const 也是屬於塊作用域（block-scoped）
變量提升：const 變量會被提升到塊的頂部，但在聲明之前不能使用
重新賦值：const 用於聲明常量，必須在聲明時初始化，且不能重新賦值。不過，對於對象和陣列，
const 允許改變內容(如同下面舉例:改變陣列跟對象屬性)

const c = 30;
console.log(c); // 30
c = 40; // TypeError: Assignment to constant variable(不能夠重新賦值)

const d = [1, 2, 3];
d.push(4); // 可以改變陣列內容
console.log(d); // [1, 2, 3, 4]

const e = { name: 'Alice' };
e.name = 'Bob'; // 可以改變對象屬性
console.log(e); // { name: 'Bob' }

補充舉例-作用域 (scope)的差異

這部分我參考這篇文章，算是對新手相當友善的文章~
點我開啟友善的文章

作用域不一樣，var 是 function scoped，而 let 和const 是 block scoped (block 意指 {} 這個符號)。
這三點有作用域的差異，

var

function testVar() {
    {
        var x = 10;
        // console.log(x); // 10  在{}內可見
    }
    console.log(x); // 10 - 在{}外也可見，因為 var 是函式作用域
}

testVar();

let

function testLet() {
    {
        let y = 20;
        // console.log(y); // 20 - 在塊內可見
    }
    console.log(y); // y is not defined  ReferenceError - 在塊外不可見，因為 let 是塊級作用域
}
testLet();

const

function testConst() {
    {
        const z = 30;
        console.log(z); // 30 - 在塊內可見
    }
    // console.log(z); // ReferenceError - 在塊外不可見，因為 const 是塊級作用域
}

testConst();

綜合的實體舉例

function testMixed() {
    {
        var a = 1;
        let b = 2;
        const c = 3;
        console.log(a); // 1 - 在塊內可見
        console.log(b); // 2 - 在塊內可見
        console.log(c); // 3 - 在塊內可見
    }
    console.log(a); // 1 - 在塊外可見，因為 var 是函式作用域
    // console.log(b); // ReferenceError - 在塊外不可見，因為 let 是塊級作用域
    // console.log(c); // ReferenceError - 在塊外不可見，因為 const 是塊級作用域
}

testMixed();

結論