Web Development 網站開發 (8) - Javascript 非同步：Function and Callback

// 最基本的 function
function add(a, b) {
    return a + b;
}

add(1, 2)

// javascript 裡的 function 是 object 的一種，可以被 assign 給變數
// 因為這個 function 立刻就會被 assign 給 add1，那我們不用定義 function name。
// 當然因為他被 assign 給 add1，所以你終究還是會得到一個 add 的 function
const add1 = function(a, b) {
    return a + b;
}

add1(2, 3)

// 在 object 底下定義 object 有以下方法：
const obj = {
    add(a, b) {
        return a + b;
    }
}

obj.add(1, 2);

// assign 給 obj1 裡的 add 成員，跟上面一般的 assign 一樣也可以是匿名
const obj1 = {
    add: function(a, b) {
        return a + b;
    }
}

obj1.add(1, 2);

// 這個是另一種 function 的寫法，我們稱之為 arrow function，除了語法上的不同外大部分的地方都是一樣的，有一個差別是 `this` 在 arrow function 裡的意義跟一般的 functino 不太一樣，這邊先不提。 
const add2 = (a, b) => {
    return a + b;
}

add2(1, 2);

// arrow function 的 inline 格式，變得很簡潔
const add3 = (a, b) => a + b;

add3(2, 3);

// arrow function 也可以 assign 在 object 裡
const obj2 = {
	add: (a, b) => a + b
}

obj2.add(1, 2);

function a() {
    console.log('I am a');
}

function b(func) {
    func();
    console.log('I am b');
}

// a 這個 function 被當作參數傳給 b，也就是第五行的 `func`
// 第六行 call 了 func()，也就是 call 了 a，這時就會印出 I am a
// 接著執行第七行，印出 I am b
// 所以執行這個 functino 會先印出 I am a 然後 I am b
b(a); 

// setInterval 是瀏覽器內建給你的 function，使用方式是傳進一個 function 給他
// 並指定秒數(1000 = 1 sec)，他會每隔一段你指定的時間執行你定義的 function
// 這個 case 他會每格一秒把 counter 加一然後印出來
// 其實他在做的事情就是你先call它，然後他每一秒callback回來。你的程式不會被 setTimeout 卡住，它會繼續往下執行(非同步)。
let counter = 0;

setInterval(function () {
    console.log(++counter);
}, 1000);


// Callback 不是一定只能用在非同步的場景，很多內建的函式要求你傳callback進去來完成任務，更像是挖格子填內容的概念。

// Case1: forEach
// array 內建有 forEach，它會試著去 iterate 每一個 array 裡的元素，並且用當下的元素當作參數塞你定義的函數去執行。
const arr = [1, 2, 3];
arr.forEach(function(item) {
    console.log(item); // 會依序列印 1, 2, 3
});

// Case2: map
// array 內建 map，它會試著去 iterate 每一個 array 裡的元素，並且用當下的元素當作參數塞你定義的函數去執行，你的 function 必須要回傳一個結果，它會搜集你回傳的每個結果，再組出一個新的 array。
// 除了基本的 function 以外，這些內建函數都允許你塞 arrow function
// 我們在 map 把傳進來的數 +1 再回傳，也就是說以下做的事情是把當下 array 的元素全部加1組成新的 array。
const arr1 = [1, 2, 3];
const arr2 = arr1.map(item => item + 1); 

console.log(arr2); // arr2 現在是 [2, 3, 4]

// Bonus: 如何實現一個 forEach?
Array.prototype.myForEach = function(fn) {
    for (let i = 0; i < this.length; i++) {
        fn(this[i]);
    }
}


const arr = [1, 2, 3];
arr.myForEach(function(item) {
    console.log(item); // 會依序列印 1, 2, 3
});

// 解釋：
// 用 prototype 可以幫內建的 array 型態新增一個字定義的成員
// Array.prototype.myForEach 定義好以後，你就可以對一個 array 互叫 myForEach
// myForEach 的參數是 function 所以我們在 line2 定義了 `fn`
// 用 arr.myForEach 時，myForEach 裡的 this 就是指 arr
// line 3-5 就是 iterate 這個 this(array)，然後把 array 的每個元素依照順序當成參數傳到傳進來的 function fn裡執行。