Javascript를 공부해 봅시다! 12. CallBack 함수

- 콜백함수에 대해서 알아보겠습니다.

- 콜백 함수(callback function)는 프로그래밍에서 일반적으로 사용되는 개념입니다.

- 콜백 함수는 다른 함수에 전달되어 특정 이벤트가 발생하거나 조건이 충족될 때 호출되는 함수입니다.

- 콜백 함수의 동작 방식은 다음과 같습니다.

- 함수 인자로 전달: 콜백 함수는 다른 함수의 인자로 전달됩니다. 이를 통해 원래의 함수가 완료되었을 때 콜백 함수를 호출할 수 있습니다. - 이벤트 발생 시 호출: 원래의 함수에서 정의한 이벤트가 발생하면, 콜백 함수가 호출됩니다. 이벤트는 보통 비동기적인 작업의 완료, 버튼 클릭, 타이머 등과 같은 다양한 상황에서 발생할 수 있습니다.

- 콜백 함수는 비동기 프로그래밍에서 특히 유용합니다. 비동기 작업은 결과를 기다리지 않고 다른 작업을 수행하는 동안 백그라운드에서 동시에 실행됩니다. 이 때, 비동기 작업이 완료되면 콜백 함수를 호출하여 결과를 처리하거나 다음 동작을 수행할 수 있습니다.

- 콜백함수를 사용한 세가지의 예제를 함께 보시죠

// 01.다른 함수에 인자로 넘겨주는 함수
function func(){
    document.write("2.함수 실행");
}
function callback(str){
    document.write("1. 함수 실행");
    str();
}
callback(func);

- 매개변수 값으로 함수의 이름을 넘겨주어서 첫 함수가 실행된 뒤 매개변수의 값을 받아 다음함수가 실행되게 하는 함수입니다.

- 여기서 첫 번째로 실행되는 함수는 실행문이 있는 callbakc이라는 함수이고 그 함수의 매개변수 값으로 func라는 함수의 이름이 str를 통해 들어가서 두번째 함수 func가 실행되게 됩니다.

//02.반복문
function func (index) {
    console.log("함수가 실행되었습니다." + index);
}
function callback(num){
    for(let i=1; i<=10; i++){
        num(i);
    }
}
callback(func);

- 첫 함수안에 반복문을 넣어 두번째 함수가 여러번 실행되게 해주었습니다.

- 두번째 함수에 i값을 매개변수값으로 넣어서 실행될 때마다 뒤에 붙는 숫자도 1씩 커지게 해주었습니다.

//03. 동기/비동기
    //03-01
function funcA(){
    console.log("funcA가 실행되었습니다.");
}
function funcB(){
    console.log("funcB가 실행되었습니다.");
}
funcB();
funcA();
//03-02
function funcA(){
    setTimeout(()=>{
        console.log("funcA가 실행되었습니다.");
    })
}
function funcB(){
    console.log("funcB가 실행되었습니다.");
}
funcA()
funcB()
//03-03 
function funcA(callback){
    setTimeout(()=>{
        console.log("funcA가 실행되었습니다.");
        callback();

    },1000)
}
function funcB(){
        console.log("funcB가 실행되었습니다.");
}
funcA(function(){
    funcB();
})
//03-04
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가 실행되었습니다.");
        callback();
    }, 1000);
}
funcA(function () {
    funcB(function () {
        funcC(function () {
            funcD();
        })
    })
})

- 동기/ 비동기 부분입니다.

- 동기는 동시에 실행되는 것을, 비동기는 하나하나 순서대로 실행이 되는 것을 말합니다.

- 자바스크립트는 원래 동기로 실행이 됩니다.

- 여러개의 함수가 페이지 로딩과 동시에 실행이 된다는 것이죠

- 하지만 페이지의 로딩이 끝난 뒤 실행되어야 하는 함수들도 있습니다.

- 예를들어 로딩이 다 안되었는데 영상이 시작되어 버리면 로딩되는 동안의 부분들을 다 놓쳐버리게 되는 불상사가 일어날 수 도 있기 때문이죠

- 이러한 상황에서 함수가 하나씩 실행되게 해주는 방법중에 하나가 콜백함수 입니다.

- 끝