函式陳述式與函式表達式差異

1. 函式陳述式 :

function num(x) {
    return x * x;
}

圖一.

圖二.

2. 函式表達式 :

const num2 = function(y) {
    return y * y;
}

圖三.

圖四.

由上面四張圖可看出差異:

1. 函式'表達式'必須做出"宣告變數"才可以執行 console.log( )。
2. 函式'陳述式'在執行 function 時會自動提取到上方，因此 console.log( ) 先後順序不影響。

箭頭函式

1. 觀念同函式表達式，都需要作出宣告變數。
2. 基本語法 :
   宣告變數 + 變數名稱 = ( 參數 ) =>{ return }

//
const num3 = (z) =>{
    return z+3;
}

3. 函式表達式與箭頭函示比較 :

//函式表達式
const num4 = function(y) {
    return y * y;
}

//箭頭函式
const num5 = (z) =>{
    return z * z;
}

箭頭函式縮寫

1. 如果只有搭配 return 時才可以使用。
2. 如果只有一個參數，可以省略括號(）。
3. 如果沒有參數，則不可省略括號（）。

//原始寫法
const num6 = (z) =>{
    return z * z;
}    
//因為只有搭配 return 可縮寫
const num6 = (z) => z * z;
//再加上只有一個參數可以在縮寫
const num6 = z => z * z;

//如果沒有參數寫法
const num7 = () => ${a};   //${a}為變數

4. 可以搭配 map 、 filter 使用。

const data = [1,5,9,12];
//原始 function 寫法
const newData = data.map(function(item){
    return item+7;
})
//使用箭頭函式加縮寫
const newData = data.map(item => item+7)

今天就到此結束了。