Callback Pattern

function writeCode(callback) {
    // ...
    callback()
    // ...
}

function introduceBugs() {
    // ...
}

writeCode(introduceBugs)

// 콜백 없이 사용
// array인 nodes를 인자로 받는 함수에서 nodes를 리턴하는 함수를 불러온다.
let findNodes = function() {
    const i = 100000,
            nodes = [],
            found
    while (i) {
        // 노드를 수정하는 로직 - 따로 둔다.
        nodes.push(found)
    }
    return nodes    // nodes 리턴
}

let hide = function(nodes) {    // nodes를 인자로 받음
    let i = 0,
    max = nodes.length
    for (i < max; i += 1) {
        nodes[i].style.display = 'none'
    }
}

// 함수 실행
hide(findNodes())

//  콜백으로 리팩토링
let findNodes = function (callback) {
    const i = 100000,
    nodes = [],
    found

    if (typeof callback !== "function") {
        callback = false
    }

    while (i) {
        i -= 1
        // 노드 수정 로직

        if (callback) {
            callback(found)
        }

        nodes.push(found)
    }
    return nodes
}

// 콜백 함수
let hide = function(node) {
    node.style.display = 'none'
}
findNodes(hide)

// hide()를 정의하지 않고 이렇게 익명함수로 표현할 수도 있다.
findNodes(function(node) {
    node.style.display = 'none'
})

let myapp = {}
myapp.color = 'green'
myapp.paint = function(node) {
    node.style.color = this.color
}

findNodes(myapp.paint)  // 객체의 메서드를 콜백함수로 가진다. myapp.paint 내 this는 findNodes에서 바라보는 객체를 가리킬 것이다.

findNodes(myapp.paint, myapp)

let findNodes = function(cbMethod, cbObject) {
    if (typeof cbMethod === "function") {
        cbMethod.call(cbObject, found)
    }
}

findNodes("paint", myapp)

let findNodes = function(cbMethod, cbObject) {
    if (typeof cbMethod === "string") {
        cbMethod = cbObject[cbMethod]
    }
    //
    if (typeof cbMethod === "function") {
        cbMethod.call(cbObject, found)
    }
 }

document.addEventListener("click", console.log, false)

let thePlotThickens = function() {
    console.log('500ms later...');
}
setTimeout(thePlotThickens, 500)