도라지보다더덕
240
2020-10-29 02:40:27
3
341

콜백함수 이해


안녕하세요. 콜백함수의 구체적인 동작이 잘 이해가 안가서 질문드립니다.


예를 들어 아래 1번과 같이 있고 readfile이 비동기 함수라고 했을 때 c가 할당이 안되었음에도 undefined라고 찍히지만


콜백으로 넘긴 함수에 대해서는 동작을 멈추고 c가 할당이 될 경우 나머지 동작하는 것이 내부적으로 어떻게 동작하는 지 잘 이해가 안갑니다.


javascript context에서 VO, scope chain, this 등 흐름에 대해서도 찾아봤지만 머리속에 그려지기에는 

console.log(c)에서 c는 VO의 변수에서 c를 찾고 undefined로 되어있어도 그냥 넣고 실행하는 것과

내가 인자로 넣은 함수는 왜 실행 컨텍스트에서 c를 찾아서 넣지않고 기다리는지,


함수를 변수로 취급, 즉 인자로 넣은 부분과 그냥 실행시키는 것에 대해 본질적으로 어느 부분이 차이가 있는건지 설명해주실 수 있을까요? 아니면 키워드라도 알려주시면 감사하겠습니다 ㅠㅠ



function a() {
  const c = readfile();
  console.log(c)
}             //1번

function a(function b) {
  const c = readfile();
  
  b(c);
}           //2번


0
  • 답변 3

  • John Suhr
    3k
    2020-10-29 08:53:04 작성 2020-10-29 08:57:28 수정됨

    설명보다 예제를 보시는 게 빠르겠죠

    (function() {
        "use strict";
        // 비동기 함수
        function asyncTask(callback) {
            setTimeout(function() {
                if (callback) {
                    callback("비동기 함수의 데이터");
                }
            }, 1000);
        }
    
        // 동기 함수
        function syncTask() {
            return "동기 함수의 데이터";
        }
    
        // 일반적인 동기 함수
        var result = syncTask();
        console.log(result) // 동기 함수의 데이터
    
        // 비동기 함수는 결과를 바로 주지 않습니다
        var result = asyncTask();
        console.log(result); //undefined
    
        // 비동기 함수가 끝나면 콜백을 실행 해 줘
        asyncTask(function(res) {
            console.log(res); // 비동기 함수의 데이터
        });
    })();

    비동기 함수는 함수 종료시점에 결과를 주지 않습니다. 따라서 "네 작업이 끝나면 이 함수를 실행해 줘"라는 약속으로 함수를 줘야 하는데 이를 콜백(대상 함수에서 반대로 내가 준 함수를 실행)이라고 합니다.

    es6에서는 Promise와 async ~ await 구문을 도입하여 비동기 함수를 동기 함수처럼 사용할 수 있도록 지원합니다.

    (async function() {
        var result = await asyncTask(); // 비동기 함수에 async ~ await구문으로 결과종료까지 기다림
        console.log(result); // 비동기 함수의 데이터
    })();


  • 도라지보다더덕
    240
    2020-10-29 14:55:31

    우선 답변 감사드립니다!

    그런데 아직 조금 풀리지않는 부분이 있습니다.


    1. const result = 비동기함수()
    2. console.log(result)
    3. callback(result)


    만약 위와같이 함수가 존재한다면

    1에서 비동기함수가 동작하는 동안 result는 AO에 undefined로 정의되어있습니다.

    비동기 작업동안 노드는 다음 실행흐름으로 이동합니다. 즉, 2번으로 이동합니다.

    console.log함수를 실행할 때 AO의 result가 undefined로 정의되어있는 것을 보고 바로 undefined를 출력합니다. (즉 노드가 바로 실행할 수 있다고 판단하고 수행합니다)

    3. callback함수의 result를 값이 undefined지만 곧 할당될것임을 알고 수행을 보류합니다


    우선 이 위 과정으로 생각했습니다

    그런데 2번과 3번 부분이 조금 역설적이라고 생각해서 질문드립니다.(곧 할당될것임을 알 수 있으면서 왜 console.log를 수행하는 지 어차피 둘다 인수로 들어가는건 동일한데)

    이 값들을 참고하는 곳이 다른건가요? 정확한 동작방식이 궁금합니다.


    나름대로 정리해서 질문드리려고 노력했는데 지식이 짧아서인지 정리가 잘안되네요ㅠㅠ 죄송합니다.

  • 도라지보다더덕
    240
    2020-10-29 15:20:43

    앗 아닙니다 아예 착각을 하고 있어서 이해가 안갔던거네요!

    감사합니다!

  • 로그인을 하시면 답변을 등록할 수 있습니다.