[javascript] 콜백에 대한 질문

Question

[javascript] 콜백에 대한 질문

조회수 580회

javascript

callback

1

싫어요

안녕하세요. 아래 코드는 callback 에 대한 예시로 작성된 코드 입니다.

var cbExample = function(number, cb) {
  setTimeout(function() {
    var sum = 0;
    for (var i = number; i > 0; i--) {
      sum += i;
    }
    cb(sum);
  }, 0);
};
cbExample(10, function(result) {
  console.log(result);
}); // 55
console.log('first');

cbExample 함수의 매개변수 cb가 콜백함수를 받는 부분으로, cbExample이 실행되는 부분에 두번째 인자로 들어간 function(result) { console.log(result); }가 콜백함수로 등록되어 계산이 끝난후 실행이 되는 것인데요.

아래와 같이 함수를 인자로 넣는게 아니라, printer함수를 생성하고 실행하면 되지 않나요? 정상적으로 first 가 먼저 실행된 후에 계산결과를 알려주는데요..

var cbExample = function (number) {
    setTimeout(function () {
        var sum = 0;
        for (var i = number; i > 0; i--) {
            sum += i;
        }
        printer(sum);

    }, 0)

}

var printer = function (result) {
    console.log(result)
}

cbExample(10);
console.log('first')

질문1) 굳이 인자로 콜백함수를 받을 필요가 있는지.. 여쭤보고싶습니다.

질문2 ) 콜백함수는 , A라는 함수가 있는데 인자로 B라는 함수를 받아서 A에서 원래 하고자 하는 기능이 실행된 다음 B라는 역할을 한다. 라고 이해하면 될까요?

질문3) 자바스크립트는 기본적으로 비동기적으로 실행되는것인가요? 아니면 동기적으로 실행되나, 비동기적으로 실행되야 할때 콜백을 사용하는것인가요?

질문4 ) 질문2의 제 생각이 맞다면, 콜백이 왜 비동기 처리를 위해 사용되는것인가요? 그저 순서대로 A함수의 기능이 실행된후, B함수가 실행되는것이지 않나요...?

질문 읽어주셔서 감사합니다! :)

(•́ ✖ •̀)
알 수 없는 사용자

댓글 입력

score 2 · Accepted Answer

1) 위 경우에는 이미 printer라는 콜백 함수를 cbExample이라는 함수내에서 직접 접근이 가능하기 때문에 파라메터로 받을 필요는 없습니다. 하지만 실제 콜백이 사용되는 경우를 보면 파라메터로 넘기는 함수를 cbExample 함수가 알기 힘든 경우이거나, 콜백으로 넘어가는 함수가 다양한 형태일 경우가 많습니다. 이런 경우 콜백을 받아 사용하면 밖에서도 cbExample 함수 이 후의(혹은 실행 과정에서의) 코드 제어권을 외부에서 가질 수 있기 때문에 유용합니다.

2) 그건 다른 함수(callback)를 넘겨받는 함수의 구현에 따라 다릅니다. A함수에서 비동기 호출이 있다고 하면 B에서는 그 결과를 받아서 처리하는 형태로 콜백을 사용하므로 A함수의 endpoint에 B를 호출하게 됩니다. 하지만 어떤 경우에는 자바스크립트로 다형성을 구현해 내기 위해서 사용하기도 합니다. 고차함수의 특징이기도 하죠. 이 경우는 반드시 A함수의 끝에 호출하지 않고 중간 로직에서 호출하여 다양한 mutation을 만들어내는 역할을 합니다. 이건 뭐 그런게 있다 알고 넘어가시면 되고...

3) 자바스크립트는 기본적으로 동기코드입니다. 비동기로 진입하는 특수한 케이스들이 몇 개(setTimeout, Ajax, doc/img loading 등) 있을 뿐이에요. 하지만 비동기로 진입한다면 코드의 플로우를 이어가기 위해서는 콜백이 필요합니다.

4) '왜?'를 질문하신 이상 깊게 들어가지 않으면 이해가 가지 않으실 거에요. 자바스크립트의 이벤트 동작 방식에 대해서 더 아실 필요가 있습니다.

우선 비동기가 무엇이고 어떻게 동작하는지 대략적으로 이해 하셔야 합니다. 이미지를 다운로드하는 작업은 비동기로 이루어지는데 이는 메인 코드를 실행하는 작업영역과는 다른 영역에서 이루어집니다. 메인 코드 영역은 다운로드를 하는 쪽에게 ‘완료되면 알려줘’ 를 시전하고 메인 코드를 줄기차게 실행합니다. 만약 메인코드가 한창 실행중일 때 다운로드가 완료되었으면 이벤트 큐에서 대기합니다. 메인코드는 스택에 쌓였다가 실행되면 사라지고 를 반복합니다. 무한루프가 아니라면 결국 스택에 메인 코드의 어떤 것도 남지 않는 순간이 올거에요. 그때 큐의 작업을 실행합니다. 여기서 큐의 작업이라는게 다운로드를 시작하라고 호출한 함수에 넘겨준 콜백함수 입니다.

위의 일련의 과정이 비동기에서 콜백이 필요한 이유입니다. 앞서 3번에서 말했듯 기본적으로 동기적으로 동작하는 싱글쓰레드 상황에서 언제 응답받을지 모르는 작업을 메인 코드를 블락시켜놓고 무한정 기다리면 성능이 좋지 않겠죠. 자바스크립트에서는 콜백 시스템을 통해서 다른 루틴의 동작을 매끄럽게 소화할 수 있습니다.

자바스크립트가 왜 이벤트를 사용하는지 왜 non-blocking 방식을 택했는지 어째서 작성한 코드 순서대로 동작하지 않는지 콜백은 왜 필요한지는 언어의 특징과 동작 방식을 추가로 이해해야 합니다.

도움이 되길 바라면서 제가 전에 달았던 답글을 링크해 드립니다.

비록 노드에 대한 글이기는 하나 자바스크립트 엔진 기본 동작에 대한 내용은 크게 다르지 않으니 용어만 잘 치환해서 읽으시면 될 것 같고요. https://hashcode.co.kr/questions/6621/indexjs-%EC%95%88%EC%97%90-%EC%A0%81%EC%9D%80-%EC%BD%94%EB%93%9C%EB%93%A4%EC%9D%80-event-loop%EA%B0%80-%EB%8F%8C%EA%B8%B0-%EC%A0%84%EC%97%90-%EC%8B%A4%ED%96%89%EB%90%A9%EB%8B%88%EA%B9%8C

https://hashcode.co.kr/questions/6658/nodejs-%EC%BD%9C%EB%B0%B1%ED%95%A8%EC%88%98-%EC%A7%88%EB%AC%B8%EC%9E%85%EB%8B%88%EB%8B%A4

인터넷에 좋은 글이 많습니다. 찾아보세요.