# Javascript 函式與迴圈

## 函式 (Function)
函式，在 JS 當中也是屬於物件的一種（記住：除了基本型別以外，其他都是物件），而函式也是構成 JS 的基本要素之一。

函式其實是一個讓程式可以隨時調用的參數，將一堆程式碼包起來，通常使用在需要經常被重複執行的工作上，以避免在程式碼中重複的撰寫相同語句。

### 函式基本宣告

函式宣告方式 :

function 函式名稱 (參數){
   // 函式要執行的工作放在這裡;
}
函式名稱() //呼叫函式

// 宣告一個函式可以顯示出 Hello, world!
function sayHello(){
   console.log ("Hello, world!")
}
sayHello()  //呼叫函式

`function函式名稱（參數）{}` ，在`()`內傳入參數，參數與參數之間用`,`隔開，可以寫成 `(a,b)`。在`{}`內撰寫程式邏輯，是函式的主要區塊。可以回想一下前面有提到的作用域。不管是 `var`,`const`,`let` 他們都會在函式中形成作用域。

### 函式陳述式 Function Declaration
函式陳述式又稱為具名函式，像是簡單的陳述一段程式碼，最大的特色是不會回傳值。
函式陳述式會產生 hoisting。

function declarationF (){
    // 函式執行程式
}

### 函式表達式 Function Expressions
函式表達式會先宣告一個變數，並且將回傳結果存於變數當中，不會產生 hoisting。

const expressionF = function(){
    // 函式執行程式
}

### 函式實作
利用函式來做計算機，在函式中賦予參數 :

// 宣告一個函式，並傳入a.b兩個數值參數
function addition(a , b){
   let result = a + b ;
   console.log (result); //這裡會顯示出 15
}
addition(10 , 5)

函式在 JS 中是一個非常重要的功能，不管在判斷式、迴圈、運算，都會在程式碼中不斷的出現！

## 判斷式 (Conditionals)

生活中總是有許多事情是會用到條件判斷的，像小時候媽媽常常說：「如果你考一百分，我就買糖果給你吃 ; 如果你不及格，就打三下。」，電商網頁中也常常看到：如果你買超過一千，就折一百元，這種判斷式。
而電腦的運作也是一樣的，需要給電腦明確的指令，他才有辦法遵循正確的指令去做到正確的判斷。

而判斷式會使用到的就是 `if` `else if` `else`，如果...就...不然就...。
判斷式的宣告方式 :

if (判斷條件){
   執行動作
}else{
   執行動作
}

只有一個條件做判斷 :

//如果今天買超過 1000 元，就折 100 元，不然就折 20 元。
 let total = 3000; //宣告一個總價的變數
 if (total >= 3000){
    return total - 100;
 }else {
    return total - 20 ;
 }

console.log (total) //這裡會顯示 2900

如果有兩個條件做判斷 :

//如果今天溫度高於 30 度，就穿背心 ; 如果今天溫度低於 10 度，就穿羽絨外套 ; 不然就穿短袖。
let degree = 20;
if(degree >= 30){
   console.log("背心")
}else if (degree <= 10){
   console.log("羽絨外套")
}else{
   console.log("短袖")
}

### 迴圈 (Loops)

迴圈可以說是目前看到最讓人害怕的程式碼了，迴圈優可以分為 `for` 迴圈、 `while` 迴圈、 `do while` 迴圈

`for` 迴圈的宣告方式 :

for (初始化參數 ; 條件判斷 ; 參數更新){
   如果判斷為 true 的執行動作 ;
}

for(let i = 0 ; i < 10 ; i ++){
   console.log(i);
}

`while` 迴圈的宣告方式 :

let i = 0; //設定初始化參數為 0
while（條件判斷）{
   如果判斷為 true 的執行動作 ;
   參數更新;
}

let i = 0;
while( i < 10){
   console.log(i);
   i ++ ;
}

`do while` 迴圈的宣告方式 :

let i = 1;
do{
   要執行的動作
   參數更新
} while (條件判斷)

let i = 1;
do{
   console.log(i)
   i++;
} while (i >2);

- 這裡要注意的是 `while` `do while` 的差異
`while` 會先判斷條件是否成立，才執行內部的程式碼，而 `do while` 會先執行一次內部的程式碼，再做條件判斷，所以 `do while` 第一次不管 true 或是 false 都會執行一次程式碼。

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