[JavaScript] 콜백함수(Call-back function)

---

콜백함수. 말 그대로 부르면 오는 함수다.

콜백함수를 학습하기 전에, 동기와 비동기에 대해 알아보고 가자.

---

1. 동기 vs 비동기

동기적 처리

: 코드의 실행은 위에서 아래로 순차적으로 실행되는 것이 원칙이다.

동기적 처리는 코드의 요청과 함께 실행된 결과가 나타나야 한다. 때문에, 실행이 오래걸리는 로직의 순서가 오면 해당 로직의 결과가 나타날 때 까지 다음 로직들은 아무것도 못한 채 대기해야 한다.

 

쉬운 예를 들자면, 테이블링이나 번호를 적으면 순서에 문자를 보내주는 방식등이 없는 맛집에서 식사를 하기 위해 오로지 자신의 순서가 올 때 까지 주구장창 줄을 서 기다리는 상황이 될 수 있겠다.

 

비동기적 처리

: 코드가 순차적으로 실행되다가, 어떤 무거운 로직이 걸려도, 해당 로직이 로딩되는 동안 다음 순서의 로직이 실행되는 것 이다. 결과는 굳이 요청과 함께 나타나지 않아도 되는 것이다. 매우 효율적임.

 

쉬운 예를 들자면, 테이블링이나 번호를 적으면 순서에 문자를 보내주는 제도가 있어 번호표를 받고 대기 시간에 어딘가 놀러갔다가 호출되면 식사하는 것 이다.

 

이 비동기적 처리를 위해 이용하는 함수가 콜백함수다. 함수의 동작 시점을 컨트롤 할 수 있는 것이다.

---

2. 콜백함수

우선 동기적인 처리의 예시를 보자.

console.log("a");
console.log("b");
console.log("c");
// a, b, c 차례로 출력

예상대로 a, b, c가 차례로 출력된다.

 

그렇다면 비동기는?

console.log("a");
setTimeout(function b(){
	console.log("b");
}, 1000);	//1초 뒤에 b를 출력
console.log("c");

위의 코드는 원하는 시간에 해당 함수를 출력하는 것이다.

때문에 결과는 a, c, b가 됨.

 

여기서 중요한건, a가 출력되고

setTimeout을 만나는 순간 부터 1초를 세기 시작하고 초를 세는 동안 c가 출력된 후 b가 출력되는 것이다.

---

3. 조금 극단적인 콜백함수(콜백지옥)

콜백을 남용하면 읽기도 어렵고 유지보수도 힘든 형태가 만들어진다.

function forLogin('page', function (response) {
    checkId(response, function (id) {
        checkPw(id, function (PW) {
            result(PW, function (result) {
                console.log(result);
            });
        });
    });
});

 로그인을 위한 함수다. 이 과정이 끝나면 다음과정을, 다음과정이 끝나면 또 다음과정을 수행하는 함수를 호출하기 위함이다. 

짧아서 망정이지 실제로 엄청나게 길어진다면 내가 쓴 코드지만 이해를 못 할 수도 있다.

이를 해결하기 위해 여러가지 방법이 있는데

그 중 하나가 promise를 이용하는 것. 

또, async & await 를 필요한 부분에 붙이면 조건에 따라 함수를 호출하기에 효율적인 코딩이 가능하다.

 

프로미스는 이해가 쉽지 않기 때문에 정리가 되면 게시할예정....흑흑

 

---

참고:

private.tistory.com/24#:~:text=%EB%8F%99%EA%B8%B0(synchronous%20%3A%20%EB%8F%99%EC%8B%9C%EC%97%90%20%EC%9D%BC%EC%96%B4%EB%82%98%EB%8A%94),%EC%97%90%EC%84%9C%20%EA%B2%B0%EA%B3%BC%EA%B0%80%20%EC%A3%BC%EC%96%B4%EC%A0%B8%EC%95%BC%20%ED%95%A9%EB%8B%88%EB%8B%A4.

backback.tistory.com/319