[javascript] 콜백함수

콜백함수란?

콜백함수는 다른 함수에 매겨변수로 넘겨준 함수를 말한다.

함수를 파라미터로 받아서 함수안에서 또 다른 함수를 실행한다.

파라미터로 함수를 넘겨 받은 함수가 먼저 실행이 되고 나중에  파라미터로 넘어온 함수가 호출된다는 것에서 

콜백Callback)함수라고 한다.

콜백함수는 필요에 따라 즉시 실행할수도 나중에 실행할 수도 있다.

파라미터로 넘길 때 함수의 이름만 넘겨주면 된다.

 

 

예 )

function add(x, callback)

       {let sum = x + x;

        console.log(sum);

        callback(sum);

}

출처 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98

[JS] 📚 자바스크립트 콜백 함수 💯 총정리

 

콜백함수가 나오게 된 이유는 Javascript가 싱글 쓰레드이기 때문이다.

한번에 한가지 일만 처리한다는 뜻이다.

과거에는 동기식 프로그래밍을 사용하였는데, 동기식 프로그래밍을 사용하게되면 싱글 쓰레드의 경우에는 작업을 요청한 이후에 그 작업이 다끝나기 전까지는 다음 작업을 진행할 수가 없다.

이런 경우에는 로딩시간도 굉장히 길어질 수 있고 응답시간이 늦거나 답이 없을 경우 멈춰버리는 현상이 발생하게 되어 지금은 자바스크립트가 비동기식 프로그래밍을 사용하고 있다.

비동기식은 모든 이벤트를 전부 실행시키고 결과과 나오는 순서대로 처리를 진행한다.

실행한 순서와 결과가 나오는 순서가 차례대로 이루어지지 않을 수도 있기에 순서가 중요할 경우에 콜백함수를 사용해야한다.

https://imswengineer.tistory.com/118

[javascript] 비동기 처리

콜백함수는 비동기 이벤트가 실행되고 난 이후에 결과를 받아서 다음에 실행될 내용들을 프로그래밍하는 방식이기 때문이다.

 

콜백함수의 대표적인 예는 Ajax 와 setTimeout()함수이다.

 

콜백함수를 이용한 비동기 처리는 아래와 같이 콜백지옥을 만드게 될 수가 있다.

아래 예는 3번 콜백처리를 한것이다.

function fn() {
    setTimeout(() => {
        console.log('하나');
        setTimeout(() => {
            console.log('둘');
            setTimeout(() => {
                console.log('셋');
            }, 0);
        }, 0);
    }, 0);
}

fn(); // 결과 순서 => '하나', '둘', '셋'

출처 : https://hanamon.kr/javascript-%EC%BD%9C%EB%B0%B1-%EC%A7%80%EC%98%A5-%ED%83%88%EC%B6%9C%ED%95%98%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC-%EB%B0%A9%EB%B2%95/

[JavaScript] 콜백 지옥 탈출하기! 비동기 처리 방법 - 하나몬