# JavaScript 宣告變數與運算子

JavaScript 到底是什麼？
JS 是一種可以在瀏覽器上執行的程式語言。它通過動態更新內容、驗證表單數據、控制多媒體、等等的網頁資源，將靜態 HTML 網頁變成互動式網頁。

身為前端三劍客之一的 JavaScript，其實就是擔任了魔法師的角色，施展魔法，讓不會動的東西動起來！
這聽起來真的很酷吧？但是，這也是前端的魔王關卡，在這個關卡，有許多人因為看見條件判斷、迴圈，就在這裡放棄了。
所以我也在此告訴自己，寫程式是一件很好玩的事情，別因為這樣就感到害怕了。
Let's go!

### 兩大核心要點
1. Lexical environment - 詞彙環境
JS 是屬於詞彙環境，意指你的 code 寫在哪裡，是很重要的，要注意程式碼的位置，因為會影響到 JS 的很多作用
2. execution context - 執行環境
JS 永遠都會在執行環境中執行，當讀取到 JS 檔案時，就會自動幫你創建一個全域的執行環境，而執行環境其實就是管理正在執行程式碼的環境

以上兩個在初學 JS 時，可能還是會似懂非懂，但是在 JS 當中，有許多的觀念都會跟這兩個核心要點有所關聯，所以在一開始學習時，可以先好好記得。

### 宣告變數

通常在學習程式語言時，我們還是會先從宣告變數開始！
首先，變數是什麼？
變數其實就像是儲存資料的一個小盒子，將程式運行時需要的資料儲存於其中。而變數又可以利用三種變數宣告關鍵字來宣告變數 (declare)，分別是 `var` `let` `const`。

使用宣告關鍵字來宣告變數，`let color = "red"`，color 是變數名稱，"=" 是將右邊的數值指定 (assign) 給這個變數。

**先來認識一下 `var`**

`var` 是在早期的 JS 當中用來宣告變數的方法，但是在 ES6 釋出後，也漸漸的被 `let` 還有 `const` 取代。
`var` 最主要的特性有以下三個：
1. 他是一個函數作用域
2. 具有 hoisting 的特性，預設為 undefined
關於 **hoisting** 會再有一篇文章詳細說明。
3. 他可以重複宣告變數，不會報錯

console.log(apple) // undefined，這是 var 的 hoisting 特性
var apple = "apple";
var apple = "APPLE";
console.log(apple) // "APPLE" 允許重複宣告變數，會覆蓋原有的變數，但不會報錯
function getBanana(){
var banana = "BANANA";
console.log(banana) // "BANANA"
}
getBanana() // 呼叫函數
console.log(banana) 
// 無法讀取在函數中宣告的變數 Uncaught ReferenceError: banana is not defined 

**`let`與`const`**
1. let 以及 const 都是 ES6 新增的語法
2. 屬於 塊級作用域 block scope
3. 不可以重複宣告變數
4. 具有 hoisting 的特性，但是預設值與 var 不同，會產生 "TDD"(Temporal Dead Zone) 暫時死區。

**`cosnt`**
1. const 在宣告時，必須給定一個值
2. 它是屬於"常量"，不可以再作修改
3. 用 cosnt 宣告的物件，一樣是傳參考

**`let`**
1. 在宣告時可以不用給值
2. let 可以再作修改

console.log(bag)  // 不可以在宣告前提早呼叫(let, const 都一樣)
// Uncaught ReferenceError: Cannot access 'bag' before initialization 
const bag = "big"


const color; // const 必須給定一個值
//Uncaught SyntaxError: Missing initializer in const declaration

color = "red" // Uncaught TypeError: Assignment to constant variable. 


let myBag = "small";
myBag = "medium" // let 可以改變變數宣告的值

從上方的程式中可以看見，變數名稱通常是使用 camelCase 的規則來命名的（長得就像是駱駝的駝峰一樣），而在 JS 中，命名的大小寫是不一樣的，比如 apple 跟 APPLE 是不一樣的。不過在命名時也不要以這種大小寫的方式來區分不同變量，以免造成閱讀上的困難。

### JS 中的基本資料型態

JS 中的基本資料型態(純值)，主要可以分為6種，基本型別都是 **"傳值"** 的方式，
"傳值"以及"傳址"，後續會再做一篇整理。

1. 數字 (Number)
2. 字串 (String)
3. 布林值 (Boolean)
4. 未知/空值 (Null) - 簡單型別
5. 未定義 (Undefined) - 簡單型別
6. 符號 (Symbol)

let isNumber = 5;
let isString = "這是字串"; //字串要記得加上 " " 或是 ' '
let isBoolean = true / false; // 布林值不需要加上" "，加上就會變成一般的字串
let isNull = null; // 當你希望設定為空值時，可以使用 null
let isUndefined; //只有宣告變數名稱，未賦予變數一個值，就會變成未定義。

#### null 與 undefined 的差異

1. null 跟 undefined 在 if 判斷時值都會轉換為 false。
2. undefined 意思是變數沒有被宣告，或者是已經宣告了，但是沒有賦值。
3. null表示空值，即該處的值現在為空。
4. JS 將未賦值的變數的預設值設為 undefined。
5. undefined 不是一個有效的 JSON，而 null 是有效的。
6. null == undefined 為 true
7. null === undefined 為 false

### JS 中的運算子

現實生活中，我們常常在算數學時使用加減乘除，在 JS 中也是可以的！
其實運算符他也是一個函式，會有回傳值，並且具有 **優先性與相依性**。
關於運算符的優先性與方向性可以參考 [MDN 運算子優先順序](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Operator_precedence)。

數值的加減乘除 :

// 算出正方形的面積
let squareWidth = 5;
let squareLength = 10;
let squareArea = SquareWidth * squareLength;

console.log(squareArea) //將資訊 log 到 console 上，會出現數值是 50。

字串的加減乘除 :

// 將 Hello 與 World 兩個字串相加
let firstWord = "Hello";
let secondWord = " World";
let fullWord = firstWord + secondWord ; // Hello World

//如果要將多個字串相加（方法一）
let fullWord = firstWord + " Nice " + secondWord + "!" ; // Hello Nice World!

//方法二
let fullWorld = `${firstWord} Nice ${secondWord} !`; // 使用站位符 ${}，輸出 Hello Nice World!

### 比較運算與邏輯運算表示

比較運算表示
`==` : 等於（不嚴謹判斷），"3" == 3 ; 字串 3 與數字 3 比較，會回傳 true
`===` : 等於（嚴謹判斷），"3" === 3 ; 字串 3 與數字 3 比較，會回傳 false
`>=` : 大於等於
`<=` : 小於等於
`!=` : 不等於 (不嚴謹判斷)
`!==` : 不等於 (嚴謹判斷)

邏輯運算表示
`&&` : and 邏輯運算，表示左右兩邊都要是 true，結果才會是 true，只要有一邊是 false，結果就是 false
`||` : or 邏輯運算，表示左右兩邊有一邊是 true，就果就是 true
`!` : not 邏輯運算，如果是 false，就會變成 true，如果是 true 就會變 false

### JS 的強制轉型
在 JS 當中具有 Type coercion (強制轉型)的機制，當使用運算子或是比較運算時，可能會產生強制轉型。

console.log("1"+2) // 產生 "12" 字串
// JS 強制將數字 2 轉為字串，再做相加。

console.log(null == undefined) // true
// 當使用不嚴謹判斷時，JS 強制將 null 轉換為 0, 將 undefined 轉換為 0 ，所以判斷為 true

#### 運算子與強制轉型

// 記住！運算子他是有方向性的
console.log(1<2<3) // true
console.log(3>2>1) // false

1. `<` 運算子，他會由左至右比較，1 < 2 返回 true，再比較 true < 3，而根據 JS 的強制轉型， true 會轉為 1 ， 1 < 3 返回 true
2. `>` 運算子，他會由左至右比較，3 > 2 返回 true，在比較 true > 1，而根據 JS 的強制轉型， true 會轉為 1 ， 1 > 1 返回 false

### 字串的跳脫字元（Escape Character）

當一段字串中想要加入 "" 或是 \ 亦或是換行，可以加入跳脫字元來使其顯示出來。

- `\t` : tab 鍵
- `\'` : 單引號
- `\"` : 雙引號
- `\\` : 反斜線
- `\n` : 換行

let thisString = "\t我想在這裡加入一個\"重要的\"文字符號，還有反斜線\\，最後要換行\n，來到第二行。";
console.log (thisString)
//會打印出：
   我想在這裡加入一個"重要的"文字符號，還有反斜線\，最後要換行，
來到第二行。

###### tags: `frontend learning`