[자바스크립트 함수] 콜백함수를 알아보자

콜백함수

콜백함수는 잘 쓰면 정말 좋은 함수죠. 콜백함수를 잘 사용한다면 함수의 실행순서를 내 멋대로 조절할 수 가 있게 됩니다. 대신 가독성저하는 사용횟수에 비례할듯;;

---

■ 넌 뭐니?

이름 그대로 나중에 호출되는 함수를 말합니다. 호출방식에 의한 구분입니다.
이 친구는 자체로 특별한 선언이나 문법적 특징을 가지진 않습니다. 다른 함수의 인자로써 넘겨진 후 특정 이벤트에 의해 호출되는 함수입니다.

■ 반복문 형식

첫번째 함수가 실행되고나서 다음 함수를 실행합니다. 함수에 순서를 부여(?), 반복문 사용해서 할 수 있습니다.

// 콜백함수 반복문
function func(index){
    document.write("함수가 실행되었습니다." + index);
}

function callback(num){
    for(let i = 1; i<=10; i++){
        num(i);
    }
}

callback(func);

결과보기

함수가 실행되었습니다.1함수가 실행되었습니다.2함수가 실행되었습니다.3함수가 실행되었습니다.4함수가 실행되었습니다.5함수가 실행되었습니다.6함수가 실행되었습니다.7함수가 실행되었습니다.8함수가 실행되었습니다.9함수가 실행되었습니다.10

■ 동기 / 비동기

동기는 "동시"라는 뜻으로 해석함이 적절합니다. 앞서 말씀드린것처럼 함수의 순서를 정할 수 도 있습니다.

// 동기
function funcA(){
    document.write("funcA가 실행되었습니다.");
}
function funcB(){
    document.write("funcB가 실행되었습니다.");
}
funcA();
funcB();
//a > b


function funcA(){
    setTimeout(()=>{
        console.log("funcA가 실행되었습니다.");
    }, 1000);
}
function funcB(){
    console.log("funcB가 실행되었습니다.");
}
funcA();
funcB();

// b > a

//비동기 a가실행된 뒤 b가 실행됨. 순서확인하려면 b에도 셋타임넣어보기
function funcA(callback){
    setTimeout(()=>{
        console.log("funcA가 실행되었습니다.")
        callback();
    },1000);
}
function funcB(){
    console.log("funcB가 실행되었습니다.")
}
funcA(function(){
    funcB();
})
// a > b

function funcA(callback){
    setTimeout(()=>{
        console.log("funcA가 실행되었습니다.")
        callback();
    },1000);
}
function funcB(callback){
    setTimeout(() => {
        console.log("funcB가 실행되었습니다.")
        callback();
    }, 1000);
}
function funcC(callback){
    setTimeout(() => {
        console.log("funcC가 실행되었습니다.")
        callback();
    }, 1000);
}
function funcD(callback){
    setTimeout(() => {
        console.log("funcD가 실행되었습니다.")
    }, 1000);
}
funcA(function(){
    funcB(function(){
        funcC(function(){
            funcD();
        })
    });
})

결과보기

// 맨마지막 비동기만 작성함 (직접 clg로 봐야 이해감)
funcA가 실행되었습니다.
funcB가 실행되었습니다.
funcC가 실행되었습니다.
funcD가 실행되었습니다.