iT邦幫忙

2023 iThome 鐵人賽

DAY 12
0
自我挑戰組

30天從零到有,帶你進入程式的世界系列 第 12

[Day 12] 變數提升(Variable Hoisting)

  • 分享至 

  • xImage
  •  

變數與常數

1.變數

關於Day2的時候有提到,聲明一個變數時我們可以使用let或者是var(不建議),為什麼不建議用var等等會題到

let a = 111;
console.log(a);
// 111
console.log(a - 11);
// 100

關於聲明變數,JavaScript會有以些限制來避免執行錯誤

  1. 中間不可以空格 (hello world)
  2. 中間不可以dash (hello-world),但可以有underline (hello_world)
  3. 不能以數字開頭
  4. 不可以用有功能的詞( if, while, function... )因為這些詞在JavaScript裡面有自己的功能。
  5. 不能夠重複宣告

另外關於命名規則,每個語言都有自己習慣的命名法,雖然用錯並不會造成執行錯誤,但看起來可能就會很突兀,其他人就會知道你可能之前是寫別的語言的。

  1. my_student_score (蛇式命名法)
    ⇒ Ruby
  2. myStudentScore 駝峰式命名法
    ⇒ JavaScript

2.常數

  1. 不能隨意重新指派
  2. 可以更改裡面的內容, 但不可以整個更改
1.
const a =1;
a=2
console.log(a); => error

2.
const b = ["a","b","c"];
b[0] = "x"; => 可以更改
console.log(b); => ["x","b","c"]

3.
const b = ["a","b","c"];
b = ["a","b","c"]; => 這樣是重新把b的值給了一個新的盒子["a","b","c"]

未定義(undefined) vs. 沒定義(not defined)

  • 未定義: 變數存在但沒有指定任人東西
var hi
console.log(hi);

=> undefined
  • 沒有定義: 連定義都沒有 ⇒ 程式會出錯
console.log(hi);

=> not defined 

https://ithelp.ithome.com.tw/upload/images/20230925/20162648TRw4It8gFW.png

變數提升(Variable Hoisting)

  • 使用var宣告變數時,JavaScript會先建立這個變數,等執行到宣告這行後再把值賦予給它

https://ithelp.ithome.com.tw/upload/images/20230925/20162648JDSq7Zk3r9.png

  • JavaScript的執行步驟
    1. 建立期 : 註冊變數( & 進行初始化)
    2. 執行期: 執行賦值 + 執行程式

一般我們可能以為是這樣

console.log(aa);
var aa = 18;
console.log(aa);

但事實上應該是先建立變數aa

var aa; // 建立變數

console.log(aa); // 變數還沒有給值 => undefined
var aa = 18;
console.log(aa); // 18

為了避免JavaScript這麼雞婆沒事找事作,讓程式發生沒辦法預期的錯誤,我們聲明變數的時候改成使用let聲明。就不會有剛剛的變數提升問題。

  • TDZ(Temporal Dead Zone,暫時性死區): 通常用來描述變數在其聲明之前不可用的狀態。
    TDZ的存在有助于避免意外的行為跟錯誤,因為這個會強制讓開發者在使用這邊變數之前就先聲明。
console.log(bb); // ReferenceError: bb is not defined
let bb = 18;
console.log(bb);

在第一個console.log(bb)時,因為這個時候還沒有bb這個變數,系統會直噴錯誤停下來告訴你ReferenceError: bb is not defined。這個有幫助我們提早發現問題。

https://ithelp.ithome.com.tw/upload/images/20230925/20162648mSwQIoKuVt.png

能用const宣告就使用const, 不然就是使用let

  • var/let/const ⇒ 宣告
  1. var = function scope (找不到變數的話會再往外面一層找)
  2. let = block scope (變數會僅限於一個block {} )
  3. 要關住var 變數, 需要用function 包起來,要關住let 變數, 用scope{ }包起來

NaN(not a number)

  • NaN是一個很奇妙的東西,它的型別是數字,用來代表他不是一個數字。第一次聽到的時候真的會覺得,這個是尛?
    後來才知道他的設計是如果有出現代表可能有轉換數字失敗, 需要檢查程式碼
1/"a" //NaN

typeof NaN //number
  • 沒有任何東西= NaN (設計就是這樣寫)
    • 真的要確認某個數是否為NaN的話 ⇒ isNaN(a)
NaN == NaN
// false

isNaN(1/"a");
// true
  • 尤其NaN === NaN 這個真的常常不小心就會覺得這個是對的,要再多看幾次才行

那今天的內容就到這邊告一段落,謝謝各位的觀看。


上一篇
[Day 11] JavaScript 資料結構: 佇列 (Quene)
下一篇
[Day 13] Git 1 : 基本介紹
系列文
30天從零到有,帶你進入程式的世界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言