JavaScript程式碼是由敘述式(statement)所組成的，每行敘述式的結尾都要加上分號(；)表示結束這段指令。
隨著Web的功能愈複雜，程式碼也愈多，這時我們需要有效地管理程式碼與重複使用。
函式(Function)是由敘述式所組成的區塊，它是為特定目的而存在，當我們輸入值，經過內部運算，會回傳結果。

建立函式有3種比較常見的方式：

• 函式宣告(declaration)
• 函式表達式(expression)
• 箭頭函式(arrow)

函式宣告(declaration)

首先要有關鍵字function，後面接著函式名稱，和用小括號( )包圍參數名稱，參數的用途，是我們要輸入值讓函式執行運算，最後是大括號{ }，裡面是函式運算的邏輯，如果需要回傳運算結果，需使用return關鍵字。
以下是最簡單的函式，它的作用是要算出2數的平均，並回傳結果。

function avg(x, y) {
    return (x + y) / 2;
}
console.log(avg(2, 3)); //2.5

函式名稱為avg，參數為x、y，內部只有一行指令，算出平均值，再回傳其結果。
呼叫函式使用也是很簡單，只要輸入名稱和小括號，在小括號中輸入需要計算的值，就可以執行了。

函式表達式(expression)

跟函式宣告差不多，不同的地方在於，沒有函式名稱，並利用指定運算式把函式指定給變數，呼叫的方式跟函式宣告一樣。
因為沒有函式名稱，所以又稱匿名函式。

let avg = function (x, y) {
    return (x + y) / 2;
}
console.log(avg(2, 3)); //2.5

函式宣告(declaration)跟函式表達式(expression)差異：
這兩種表面看起來差不多，用起來也是一樣，最大的差異是建立的方式，一個是宣告的方式，一個是賦值(assignment)的方式，這會導致在hoisting呈現不同的結果，關於這點會在hoisting的章節解說。

箭頭函式(arrow)

以更簡單的方式定義函式，無需關鍵字function，在「=>」運算子的左邊，用小括號將參數包起來，右邊是函式本體，如果只有單行敘述，可省略大括號{ }。

let avg = (x, y) => (x + y) / 2;
console.log(avg(2, 3)); //2.5

可以省略return，此運算式會自動回傳結果。
如果只有一個參數，小括號可省略。

let area = r => Number(r * r * Math.PI).toFixed(2);
console.log(area(5));  //78.54

若沒有參數，需保留小括號。

let print = () => console.log('Hello World');
print();

當函式回傳結果之後，它的任務就算結束了，所以return之後的程式碼不會執行。

let avg = function (x, y) {
    return (x + y) / 2;
    console.log('不會執行');
}
console.log(avg(2, 3)); //2.5

參數預設值

假設我們定義一個函式，需要2個參數，萬一呼叫函式，只給定一個引數或是都沒給，為了不影響程式運作，且得到需要的值，就可以對參數設定值，算是防呆設計。

function getArea(w = 1, h = 1) {
    return w * h;
}
console.log(`面積為:${getArea()}`); //面積為:1
console.log(`面積為:${getArea(10)}`); //面積為:10
console.log(`面積為:${getArea(10,5)}`); //面積為:50

我們可以在定義函式的同時，給定參數預設值，如果都沒輸入，直接以預設值運算。
給定一個，會優先套用到第一個參數；全部給定，全部參數就以給定值運算。

「...」運算子

當我們的參數是陣列的時候，可以使用「...」運算子，把陣列給展開。

console.log(Math.max(1, 555, 66, 4, 99)); //555
let ary = [1, 555, 66, 4, 99];
console.log(Math.max(ary)); //NaN
console.log(Math.max(...ary)); //555

Math.max( )可以找出最大值，但無法接受傳入的參數型別為陣列，我們可以使用「...」運算子，將陣列展開，就可以順利執行了。

具名參數

let obj = {
    w: 10,
    h: 10
}
let obj2 = {};

function getArea({w = 1,h = 1}) {
    return w * h;
};
console.log(getArea(obj)); //100
console.log(getArea(obj2)); //1

我們可以設定物件的屬性預設值，當傳入物件有給定值的時候，使用給定值運算。
若為空物件，則使用預設值運算。

針對特定屬性作運算

let obj = {
    w: 10,
    h: 10,
    name: 'table'
}
function getArea({w = 1,h = 1}) {
    return w * h;
};

function getName({name}) {
    return name;
};
console.log(getArea(obj)); //100
console.log(getName(obj)); //table

我們可以針對該物件的w跟h的屬性作運算，或只取出name屬性。

回傳多個值指派給多個變數

如果需要函式回傳多個值，我們可以使用陣列或物件的方式回傳，並使用解構賦值(destructuring assignment)同時指派給多個變數，相當方便。

function getValue(nums) {
    return [Math.max(...nums), Math.min(...nums)];
}
let nums = [10, 99, 265, 5, 48, 100];
let [max, min] = getValue(nums);
console.log(`最大值:${max}`); //最大值:265
console.log(`最小值:${min}`); //最小值:5

遞迴

遞迴函式是指，函式在運算過程中會一直呼叫自己執行運算，直到符合終止條件，常用於階層運算。

function recursive(n) {
    if (n !== 0) {
        return n * recursive(n - 1)
    }
    return 1;
}
console.log(recursive(5)); //120

它的運算過程是這樣的：
第1次return：5 * recursive(4)
第2次return：4 * recursive(3)
第3次return：3 * recursive(2)
第4次return：2 * recursive(1)
第5次return：1 * recursive(0)
第6次return：1
直到不會再呼叫自己為止，開始倒推回去：
第6次return：1
第5次return：1 * recursive(0) => 1*1=1
第4次return：2 * recursive(1) => 2*1=2
第3次return：3 * recursive(2) => 3*2=6
第2次return：4 * recursive(3) => 4*6=24
第1次return：5 * recursive(4) => 5*24=120
使用遞迴切記要設終止條件，不然的話，它會一直呼叫自己，形成無限迴圈。

參考來源：
JavaScript大全
Speaking JavaScript｜簡明完整的 JS 精要指南
新一代 JavaScript 程式設計精解