function

function

2019/09/13

function

function的傳統定義方式

// function declaration
function times(a, b) {
 return a * b; 
}

var times = times(1,2);

因為在javascript中如果是var，可以重新定義。但如果用const，function的名稱就不能重複了。

// function declaration
function times(a, b) {
 return a * b; 
}

const t = times(1,2);

利用function expression的時候就沒這個問題了

// named function expressions
const times = function times(a,b) {
 return a * b;
}

可以省略function的名稱

// unnamed function expression
const times = function (a,b) {
 return a * b;
}
    • Function Hoisting

兩種方法的使用還是有差別的，function的定義是可以寫在後面，也可以被重複呼叫。

times(3,4);
function times(a,b) {
    return a * b;
}

用expression的話，就不能這樣呼叫了!!

times(3,4);//times not defined
const times = function (a,b) {
    return a * b;
}
    • Callback Pattern
    • Callbacks and Scope
    • Returning Functions
    • Lazy Function Definitions ( Self-Defining Functions )
    • Immediate Functions / Immediately-Invoked Functions (IIFEs)
    • Immediate Object Initialization
    • Function Properties — Memoization
    • Configuration Objects Pattern

arrow function

arrow function是個在ES6之後的新語法，是較精簡的寫法，對新手而言，是個不容易理解的語法。

ES5 (unnamed function expression)

const times = function (a,b) {
 return a * b;
}

ES6: Arrow function (省略 大括號時，也省略return，計算結果就是回傳值)

const times = (a,b) => a*b;

generator

  • Use JavaScript Generator Functions to Reduce Memory Utilization: A comparison of memory management for ordinary JavaScript functions and generator functions
    • What is a JS generator? It is a function that can return a value and then continue the execution of the function at a later time. Whereas an ordinary JS function uses a return operator, the generator function uses a yield operator.
function *numberToN(N) {
    for (let i = 0; i < N; i ++) {
        yield i;
    }
}

參考資料