JavaScript 核心觀念(2)-執行環境與作用域-執行的錯誤情境 LHS, RHS

前言

JavaScript 世界中出現 LHS, RHS 是一件很常見的事情，而這兩個名詞主要與取值及賦值有關。

LHS

LHS 全名是 Left-Hand Side

而 Left-Hand side 這個訊息的意思是賦予值到左側的變數上，最簡單的範例就是這樣 var a = 1; 將數字一賦予到 a 這個變數上。

那麼什麼時候會發生 LHS 錯誤呢？

舉例來講，當你賦予的值是 JavaScript 不正確時就會發生，例如字串賦予值。

'小明' = 1;

你只需要在瀏覽器的 devTools 輸入上方語法就會出現 SyntaxError: invalid assignment left-hand side debugger eval code:1

這邊透過前一篇使用的解析器可以看到相同的提示訊息。

可是這邊額外做一件很特別的事情，如果是透過變數宣告的方式賦值呢？例如下方的程式碼

var '小明' = 1;

在這邊有一個很特別的狀況，你可能不會看到 Left-Hand side 的錯誤訊息，以我目前測試的瀏覽器 Chrome 80.0.3987.149 是會出現這樣的錯誤訊息 Uncaught SyntaxError: Unexpected string

而在 Firefox 74.0（64 位元） 上則是 SyntaxError: missing variable name，這個提示問題的差異原因在於瀏覽器提供的執行環境提示訊息的不同，由此我們可以知道執行環境是很重要的觀念。

RHS

前面我們很難驗證 LHS 的錯誤訊息，那 RHS 呢？RHS 完整名稱為 Right-Hand Side。

RHS 的意思是指取值是來自右側的變數上，那這個是什麼意思呢？讓我們透過一段程式碼了解。

var a = '小明';
console.log(a);

在這邊我們可以看到 console.log() 去取得右側的變數 a，然後顯示在 devTools 上。

當然 RHS 觀念可換另一種說法，RHS 會去引用、查詢的概念，而以下範例其實就是一個 RHS 查詢、引用概念，在一開始會先 LHS 賦予值，接下來到 var b 時，會去查詢、引用 a 的值來源並賦予到 b

var a = '小明';
var b = a;

但是 RHS 的錯誤訊息會稍微與 LHS 不同，因為 RHS 並不會直接顯示出 RHS 的錯誤，他只會出現類似「ReferenceError: a is not defined」這種的錯誤訊息。

當然在瀏覽器上的錯誤訊息也會有一點點小小差異

Chrome：VM226:1 Uncaught ReferenceError: a is not defined at <anonymous>:1:13
Firefox：ReferenceError: a is not defined

但是基本上若出現 XXX is not defined 就代表你這個變數還沒有被定義，所以不存在。

基本上如果有遇到上面的任何錯誤，都會建議一定要修正，否則程式碼是無法正常運作的，因為 JavaScript 一旦遇到錯誤就無法往後執行囉。

最後這邊補上課程章節講義。

參考文獻

• 六角學院 - JavaScript 核心篇