JavaScript 前導觀念與名詞介紹

前導觀念(Conceptual Aside)

要了解 JavaScript 的運作原理，就要先了解幾個基礎觀念、詞彙，分別是:

• 語法解析(Syntax Parsers)
• 作用域環境(Lexical Envirenments)
• Name/Value pair and Object

語法解析(Syntax Parsers)

A program that reads your code and determines what it does and if its grammar is valid.

JavaScript 是一種程式語言(Highlevel-language)而不是電腦語言(Machine-code)。用白話來講，程式語言是人類撰寫程式所使用的語言，電腦無法直接解讀，中間需要另一個程式來進行轉換，將我們寫的原始碼(source code)翻譯成電腦硬體看得懂的指令(computer instructions)。這個翻譯程式會逐字的解析我們寫的程式碼，並確認語法是否正確及程式碼的用途，最後把他們轉換成電腦看得懂的語言來讓硬體執行。

通常這個翻譯器有分兩種:編譯器(Compiler)和直譯器(Interpreter)，JavaScript 屬於直譯語言，由直譯器進行轉換。直譯器會逐行轉換原始碼，並在每行轉換完後馬上執行。

作用域環境(Lexical Envirenments)

Where something sits physically in the code you write.

作用域環境(Lexical Envirenments)白話來說，就是我們把一段程式碼寫在整個程式中的哪個位置。對於部分程式語言來說，作用域環境重要的地方在於，同樣一段程式碼寫在不同位置，會在執行時影響到這段程式碼對應的記憶體位置，也能影響它和其他變數、函式或元素間的互動。

在下面的範例中，同樣是在 app.js 檔案裡做變數 a 的宣告，但一個寫在 function 外面，一個寫在 function 裡面。這兩種位置的不同就會對變數 a 產生不同的作用和影響。對 JavaScript 來說，作用域環境的影響是重要的。

// app.js
// 狀況一
var a = 'Hello world.'

// 狀況二
function hello() {
  var a = 'Hello world.'
}

Name/Value pair and Object

Name/Value pair

A name which maps to a unique value.

一個 name/value pair 像這樣: address = '100 Main St.'。其中， address 就是 name；'100 Main St.' 就是 value。一個 name 可以被宣告很多次，但是在同一個執行環境(Execution Contexts)裡，一個 name 只會有一個值(value)。

物件(Object)

A collection of name/value pairs.

前面有說到，一個 name 會配對一個 value，而這個 value 其實也可以是另外一個 name/value pair 。在這種情況下，name/value pair 會變成一個巢狀結構(如下範例)。而 JavaScript 中的物件(Object)其實就是一個 name/value pair 的集合而已。

// A collection of name/value pairs.
address: {
  street: 'Main',
  number: 100,
  apartment: {
    floor: 3,
    number: 301
  }
}

參考資料

• Udemy - JavaScript: Understanding the Weird Parts
• 維基百科 - 編譯語言 v.s 直譯語言
• Compiler VS Interpreter

文章內容如有錯誤，歡迎留言討論！