【JavaScript 筆記】那些我沒搞清楚的基礎觀念 — var, let, const 的差別

變數與常數、全域與區域變數、命名規則

Chengcheng Hsu
6 min readFeb 28, 2022

來到了第二周的學習筆記,慶幸自己沒有忘記這件事情,但在第二周開始之前想先寫一些關於學習的心得,從去年加入程式導師計畫之前並不曉得學習任何東西之前你需要做很多心理建設,也可以說是心態的建立,這點是之前沒有特別注意的,因為在學習的過程會需要保持好心態,否則心情是浮躁的話,你會很難進入心流狀態,學習品質自然不會好,但怎麼樣準備好心態是另一個領域了,OK 正題開始!

索引:
🚩 變數與常數(Variable and Constants)
🚩 全域與區域變數(Global Variable and Local Variable)
🚩 var, let, const 的差異
🚩 變數的命名規則(Naming)

🗻變數與常數(Variable and Constants)

變數與常數是為了用來儲存資料進行運算的基本單位

也可以很簡單的說就是用來存資料的容器,更白話一點的解釋就像是你跟 Siri 說「幫我打給 "周杰倫"」,這時候 Siri 就會去找叫做周杰倫的這個人,然後對應他的電話並撥打,不過前提是你要先知道周杰倫的電話號碼,並且把它存在你的手機,這個「存」的動作就像是程式裡的「宣告」變數一樣,那為什麼要做宣告,因電話號碼它並不好記,所以我們如果有個名稱來代表的話那會很方便,這個名稱在程式裡面就是「變數 or 常數」,你就不用每次都說「嘿 Siri 幫我撥打 09XX-XXX-XXX」,所以在程式的世界也是相同的概念,當宣告一個變數後我可以方便存取此資料,並進行後續的處理,不過這只是個比喻,像是你可以自由的修改電話號碼,但在程式裡你並不一定可以隨便修改,因此就會有變數和常數的區別

🗻全域與區域變數 (Global Variable and Local Variable)

變數存在的範圍可分為全域變數區域變數,其最大的區別在於當你宣告一個變數後其變數能夠被存取或是修改的範圍在哪裡,也就是作用域(scope)

- 全域變數:能在任何一個地方被存取/修改
- 區域變數:只能在其區域內被被存取/修改

以下以「用 var 宣告方式」來解釋全域變數和區域變數

🗻var, let, const 的差異

在 ECMAScript 2015(ES6)之前我們只能用「 var 宣告變數」,但這會出現區域變數去汙染到全域變數的情況(下面有例子),但在 ES6 let 和 const 出現後已被改善,並且多了一概念是區塊描述 (block statement),也就是你用 {} 等區塊語句(if、else、 for、 while等)來宣告時,那個變數就是區域變數

我們可以將上面的例子改成用 if 陳述句來看看什麼是汙染到全域變數,我們可以發現就算是用 {} 包起來還是會改到全域變數,因為在 ES6 之前並沒有 block statement 的概念,所以 var 所謂的區域變數只存在於函式裡的宣告,不管你是不是用 {}區塊語句

如果改成用 let 來宣告,就不會改到全域變數了!他們各自擁有作用域

以下為定義,各有微妙的差別:

var :變數能夠被重新宣告和重新指定值 (not re-assigned),其作用域不是在全域變數就是函式內區域變數===== ES6 之後 =====let :變數不能被重新宣告,但是可以被重新指定值,其作用域就是以區塊描述為概念的區域變數const :變數不能被重新宣告,也不能被重新指定值,就等於是一常數,是以區塊描述為概念的區域變數

附註:

  1. 在程式碼撰寫中,使用 const 的情況遠比 let 頻率高很多。除非你很確定這個變數等會在程式碼中其他部份會需要被改變,或是它是一個在類別定義裡的變數,不然就用 const 就對了 — 參考資料:變數、常數與命名
  2. const 需要在宣告的時候就指定值,否則會報錯

🗻變數的命名規則(Naming)

  1. 小駝峰式(lower camel case):以小寫開頭,並用大寫作為分隔,為一般常見的命名型態
  2. 大駝峰式(upper camel case):以大寫開頭,並用大寫作為分隔,為宣告類別(class)常見的命名型態

舊式的風格樣式指引,會建議使用全大寫英文命名,字詞間使用底線 _

let myFirstText
const myFirstName
function setTextColor()
class Animal{}
const LAST_NAME

附註:

  1. 命名是否語意不明或對象不明,如: q / 好的命名: question
  2. 資料為陣列之類的集合結構,命名應為複數,或表明此變數代表陣列,如:students、studentArray
  3. 避免用 JS 的保留字,如 break、if 等等,可參考 JavaScript Reserved Words,但如果使用 VScode 來做編輯,通常會變色來提醒你這是一個保留字
  4. 少用簡寫, 如:studentAd/ 好的命名: studentAddress
  5. 使用長一點的命名能夠提供更好的閱讀性,且與效能一點關係都沒有
  6. 宣告的風格因不同的公司會有所不同,像是 google ,就有其宣告的規範,可參考 Google JavaScript Style Guide
6.1 Rules common to all identifiers

🗻結語

寫這篇的時候發現自己在開發上真的可以多注意一些事情,例如 Naming ,我自己一開始對於命名也是很頭痛,不知道什麼是叫做好的命名,不過現在可以在命名前可以多做一些判斷了,因此要慢慢培養好習慣。

另外,寫一篇文章有時候會考慮滿多事情,像是什麼東西都要了解嗎,我要怎麼用自己的話來寫,要先求廣還是求深,這都是滿值得思考的問題,但我想我有個初步的答案是,一篇盡量不要超過三個要講的事情,這些事情在工作上是否重要,並且確保這些內容都是正確的就好,至於下周想多了解 call by value/ reference,OK 下周再繼續。

參考資料:

語法與型別

JavaScript: var, let, const 差異

--

--

Chengcheng Hsu
Chengcheng Hsu

Written by Chengcheng Hsu

Movie, Travel and Story | Software developer | contact me: ychsu.wk@gmail.com

No responses yet