---
# System prepended metadata
title: '[JavaScript] function函式'
tags: [JavaScript]
---
# [JavaScript] function函式
###### tags: `JavaScript`
### 1. 函式寫法
函式宣告範例
```
function greet(){
alert('你好')
}
//執行函數
greet();
```
帶入參數範例
```
function cokeprice(num){
var coke = 30;
var total = coke* num;
console.log(total)
}
//執行函數
cokeprice(4);
120
```
### 2. 觀念：變數區別
* 全域變數
var total放外側，系統便會紀錄，在console.log(total)宣告中便會顯現出結果(左側顯示數字80)
* 區域變數
var total寫在function內，系統會不紀錄以釋放空間，則無法顯現出呼叫結果(左側顯示undefined)。這是因為，我們雖然有宣告變數 total ，但是是在 function 內，作用域也只在 fucntion 內，這就是所謂的區域變數
#### 結論
而之所以會有全域變數跟區域變數區別外，除了作用域的不同，跟記憶體也有關。
當我們變數宣告在 function 內為區域變數，我們呼叫 function 時，此時變數才會被建立佔用記憶體，而當 function 執行完畢時，就會被刪除，記憶體空間也會被釋放
反之，全域變數是只要宣告之後就會佔用記憶體空間，而佔用記憶體空間會影響到使用者的電腦效能問題，所以當我們在宣告變數時，要思考這個變數的作用，是可以放在全域，還是宣告在 function 內即可。
### 3. 宣告順序
* function在js列為優先執行的宣告，因此顯示的順序不會受影響，稱為Hoisting。而變數的宣告就不同，會依照呼叫的順序所影響，變數必須要先宣告才能顯示出結果，因此建議將呼叫顯示的項目放在最尾端就能避免此問題出現。
### 4. 點餐系統實作
web
html
```
```
js
```
document.getElementById('countId').onclick = function(){
var hamPrice = 50;
var cokePrice = 20;
var hamNum = parseInt(document.getElementById('hamNumId').value)*hamPrice;
var cokeNum = parseInt(document.getElementById('cokeNumId').value)*cokePrice;
document.getElementById('totalId').textContent = hamNum + cokeNum
}
```
- 第一行：onclick 點擊後代入函式function
- 第二三行：變數宣告xy的原價格
- 第四五行：1.帶入計算公式，2.使用parseInt()將字串轉換成數字，3.可以使用console.log(typeof(變數))測試是否是字串還是數值，4.為了取得id的值，在後方增加.value即可
- 第六行：輸出結果
- document.getElementById('html的id命名名稱')為前置的宣告語法，後方輸入onclick點擊後的行為，後方輸入value/text數值，後方輸入textContent帶出結果。
- console log()可在網頁上顯示結果，確認語法是否正確
### 執行步驟
#### 目的
要使用點餐系統計算
輸入項目：漢堡幾個，可樂幾個，確認按鈕
得出結果：總共多少錢
#### 綁定
漢堡掛一個id
可樂掛一個id
確認鈕掛一個id
總共多少錢掛一個id
#### 執行程序
函式掛在確認鈕上，點擊後便會進行運算，
漢堡及可樂的價錢放在函式內
運算值內的定義同樣放在函式內，並產出基本公式
運算結果也就是總共多少錢，也放在函式內得出結果
再使用顯示的語法 document.getElementById(‘按鈕id’)，並使用.onclick=function()
#### 總結
定義價格
計算公式：同樣是使用get公式，因為要取用欄位上的值，後方需增加.value
顯示價格：document.getElementById(‘總共多少錢’).textcontent =
### 5. return回傳用法
* 參考一
console.log(tom)是指定一個人名，而此人名是經由var所定義，在前面的函數運算的結果，就必須經由return來做回傳特定的數值
* 參考二
```
function getHamburger(Num){
var hamburgerPrice = 10;
var total = hamburgerPrice * Num;
return total;
}
var tom = getHamburger(35);
// 回傳 350
var jerry = getHamburger(40);
// 回傳 400
```
上述的程式碼，除了計算的方式都寫在 function 內，最後還有一行 return total; 是回傳函式內的變數 total 的值，而變數 total 是計算的總結果。所以當我們要計算總價格時，僅需要針對呼叫函式且帶進去參數即可。
結論：如果得出來的答案非直接的，而是有很多的命名如(人名)並需要Var代入另一個函式(含參數)的話，函式內就可以用return回傳數值，如 var [Ａ命名] = [函式]（變換數值）
使用return回傳特定的值如return total;代表之後套用此函數都會回傳total這個值，除了方便我們做一次性的運算，也能帶入不同的數值得出結果。