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 運算子優先順序。

數值的加減乘除 :

// 算出正方形的面積
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