Udemy課程：[The Web Developer Bootcamp 2021（Colt Steele）](https://www.udemy.com/course/the-web-developer-bootcamp/)
# 第 21 節： Leveling Up Our Functions
###### tags: `JavaScript` `Udemy` `The Web Developer Bootcamp 2021`
2021.02.17（Wed.）
## ● 上課筆記
> 參考網站：[JavaScript - Lexical Scope](https://ithelp.ithome.com.tw/articles/10194745)

這裡會介紹以下三類：

(1)Function Scope（函式範疇）
(2)Block Scope（區塊範疇）
(3)Lexical Scope（語彙範疇）

第3點拉出來說明，Scope主要分成兩種類型：

Lexical Scope (語彙範疇)
Dynamic Scope (動態範疇)

JavaScript 與大多數的語言相同是採用 Lexiacal Scope

## 1.Function Scope（函式範疇）
> Scope :（Variable "visibility"）
> The location where a variable is defined dictates where we have access to that variable.

先想想以下三個function執行得到的結果：
1. 第一個：

function collectEggs(){
    let totalEggs = 6
    console.log(totalEggs)
}

2. 第二個：

function collectEggs(){
    let totalEggs = 6
}

console.log(totalEggs)

3. 第三個：

function collectEggs(){
    let totalEggs = 6
}

collcetEggs()
console.log(totalEggs)

4. 第四個：

let totalEggs = 0
function collectEggs(){
    totalEggs = 6
}

console.log(totalEggs)
collcetEggs()
console.log(totalEggs)

5. 結果：

| 類別 | 結果 |
| ------ | -------------------------------- |
| 第一個 | 會得到"6" |
| 第二個 | 會得到"totalEggs is not defined" |
| 第三個 | 會得到"totalEggs is not defined" |
| 第四個 | 會先得到"0，在得到"6" |

***
來看看另外一組：

1. 第一個：
> 會印出Great Blue Heron（選擇近的去印出）

let bird = "Scarlet Macaw"
function birdWatch(){
    let bird = "Great Blue Heron"
    console.log(bird)
}
birdWatch()

2. 第二個：
> 會印出Scarlet Macaw

let bird = "Scarlet Macaw"
function birdWatch(){
    console.log(bird)
}
birdWatch()

3. 第三個：
> 會印出Scarlet Macaw（因為我們根本沒執行birdWatch()）

let bird = "Scarlet Macaw"
function birdWatch(){
    let bird = "Great Blue Heron"
}
console.log(bird)

4. 第四個：
> 會印出Scarlet Macaw（雖然執行了birdWatch()，但作用域不同）

let bird = "Scarlet Macaw"
function birdWatch(){
    let bird = "Great Blue Heron"
}
birdWatch()
console.log(bird)

## 2.Block Scope（區塊範疇）
> 參考網址：[JS 原力覺醒 Day04](https://ithelp.ithome.com.tw/articles/10217481)
> 在 ES6 之後，出現了 let 、 const 等兩種宣告變數的關鍵字，讓我們除了使用 funciton 來定義範疇，也能 「區塊 ( Block )」來定義。什麼是區塊呢？區塊就是兩個大括號裡面的範圍（{ 、 }）， if 判斷式 、while 或是 for 迴圈語法用到的大括號範圍就是 Block ，當然， function 的大括號也算。

先來看看這些例子：

1. 第一個：

let radius = 8
if(radius > 0){
    const PI = 3.1415926
    let msg = "HIIII!"
}

console.log(radius) //8
console.log(msg) //msg is not defined

2. 第二個：
（這裡分成兩組來說）
* let
> 用let的話，那個變數就只能在block區塊中使用

for(let i = 0; i < 5; i++){
    let msg = "ASDFGHJKL"
    console.log(msg) //ASDFGHJKL
}
console.log(msg) //msg is not defined

* var

for(let i = 0; i < 5; i++){
    var msg = "ASDFGHJKL"
    console.log(msg) //ASDFGHJKL
}
console.log(msg) //ASDFGHJKL

## 3.Lexical Scope（語彙範疇）
> 參考網站：[JavaScript - Lexical Scope](https://ithelp.ithome.com.tw/articles/10194745)

JavaScript 與大多數的語言相同是採用 Lexiacal Scope。

**Lexical Scope ( 語彙範疇 )：**
代表著區塊間的包裹關係，被包裹在內層的區塊可以保護自己的變數不被外層取用，相反的外層區塊的變數還是可以被內層區塊使用。

一句話說明：「外層 Scope 無法取用內層變數，但內層 Scope 可以取用外層變數」

## 4.Function Expression（函式陳述式）
> 參考網站：[function expression(函式陳述式) VS declaration (函式運算式)](https://blackie1019.github.io/2015/04/09/javascript-function-expression-vs-declaration/)
> 可從上述網站找到兩者之間的差異。

JavaScript的函數有兩種表示方式：
1. declaration (函式運算式)：

function callTest(){
	console.log(123);
}

callTest();

2. function expression(函式陳述式)：

var callTest=function(){
	console.log(123);
}

callTest();

## 5.method vs. function
> 參考網站：[如何分辨method 和 function 以及 argument 和 parameter 的差異](https://givemepass.blogspot.com/2020/01/method-function-argument-parameter.html)

A function is a piece of code that is called by name.

The method is a function associated with an instance of class (object).

> 參考網站：[方法（method）和函式（function）有什麼區別？](https://itw01.com/NB3EDK9.html)

函式是一段程式碼，通過名字來進行呼叫。它能將一些資料（引數）傳遞進去進行處理，然後返回一些資料（返回值），也可以沒有返回值。

方法也是一段程式碼，也通過名字來進行呼叫，但它跟一個物件相關聯。

* 方法和函式大致上是相同的，但有兩個主要的不同之處：
1. 方法中的資料是隱式傳遞的
2. 方法可以操作類內部的資料
（請記住，物件是類的例項化–類定義了一個數據型別，而物件是該資料型別的一個例項化）

* 舉例：
We can add function as properties on objectss.And we call them methods!

const math = {
    multiply: function(x,y){
        return x * y
    },
    divide: function(x,y){
        return x / y
    },
    square: function(x){
        return x * x
    }
}

## 6.try ... catch
> 參考網站：[認識 try…catch，處理錯誤](https://medium.com/unalai/%E8%AA%8D%E8%AD%98-try-catch-%E8%99%95%E7%90%86%E9%8C%AF%E8%AA%A4-f262d5690820)

* try…catch 分為 try 區塊與 catch 區塊：
若 try 區塊中的程式碼無任何錯誤，則忽略 catch 區塊中的程式碼；若 try 區塊中的程式碼發生錯誤，則中斷 try 區塊程式碼的執行，並將控制權轉給 catch 區塊的程式碼。

try{
 // 欲執行的程式碼
}catch(e){
 // 當錯誤發生時，欲執行的程式碼
}

* 用途：
這樣當遇到錯誤的時候，可以讓程式繼續執行下去，而不會停下。