동기/비동기 ,callback 함수

 콜백(callback)함수는 간단히 말하자면 다른 함수가 실행을 끝낸 뒤 실행하는 함수를 의미합니다.  조금더 자세히 말하자면 함수가 다른 함수의 인자가 되어 타 함수 내에서 수행되어지는 것을 말합니다. 함수를 인자로 던진다는 것은 한 함수 내에서 다른 함수를 사용한다를 의미하는데, 그렇다면 외부함수를 정의하고 호출해 쓰는 것과 어떤 차이가 있지? 라는 의문이 들 수 있습니다. 이런 의문을 해소하기 위해선 먼저 동기 / 비동기 방식에 대한 이해가 있어야 합니다.

동기식

 동기식은 우리가 기본적으로 익숙한 방식입니다. 동기식은 프로그래밍을 했을 떄 위에서 아래로 절차적으로 수행합니다 함수를 호출한다면 호출한 함수 블럭을 모두 수행한뒤 그 다음 해야할 일을 진행하는 방식이죠, 

let a = 3;
let b = 4;

function add(a,b) {
    return a+b;
}

console.log(add(a,b));

해당 예제에서 보면 우리가 생각하는 대로 결과 7이 출력됩니다  console.log() 에서 add라는 함수를 호출 하면 해당 블럭을 수행하고 결과를 출력하게 됩니다.

비동기식

 비동기식의 가장 흔하게 볼 수 있는 사례는 ajax입니다. 먼저 간단한 ajax 코드를 보면서 비동기식에 대해 알아보겠습니다.

function getData(){
    var tableData ;
    $.get('https://domain.com/products/1', function(response) {
		tableData = response;
	});
    return tableData;
};

console.log(getData());

출처 : joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

 해당코드를 보면 특정 url에서 받아온 정보를 console창에 출력하는 예제로 보입니다. 일반적인 동기식이라고 생각한다면 결과는 해당 url에서 받아온 정보를 출력한다고 생각할 수 있지만, 결과론적으로 해당 코드는 undefined 를 출력하게 됩니다.  

 이유를 살펴보면 ajax 방식은 비동기로 동작하기 때문입니다.  비동기식은 이전에 설명했던 동기식과는 반대로 해당 요청이 끝나면 다음 코드를 수행하는 방식이 아니라 어떤 요청수행 중 다른 요청이 온다면 응답이 이루어 지기 전에 새로 들어온 요청을 받습니다. 

 따라서 위에 식에서  비동기 방식인 ajax를 통해 데이터를 가져오게 되면 return을 하기전 console.log(getData()); 라는 문장을 받아들여 먼저 처리를 하게 됩니다. 아직 데이터가 오지않은 상태에서 출력 함수를 실행했기 떄문에 당연히 undefiend를 출력할 수 밖에 없습니다.

 어떤 블로그에서 봤던 내용인데 동기/비동기를 각각 은행과 카페로 비유하는 글이 있었습니다. 은행은 어떤 업무를 진행하기 위해선 번호표를 받고 앞서 온 사람의 업무가 끝나야만 다음 사람이 업무를 진행할 수 있는 관점에서 동기식과 유사한 상황이라는 예시가 있었고, 카페는 주문을 순서대로 받지만 제조되는 커피의 종류에 따라 빨리 나올 수도 있고 다른 게 나오고 나서 나올 수 있다는 비유가 있었습니다. 쉽게 이해하기 위한  이런 실생활 속의 예를 찾아 보는것도 좋은 방법인거 같습니다.

callback 함수

그럼 아까 위에 예제였던 

function getData(){
    var tableData ;
    $.get('https://domain.com/products/1', function(response) {
		tableData = response;
	});
    return tableData;
};

console.log(getData());

이 식을 ajax에서 데이터를 받아 그 데이터를 출력하려면 어떻게 해야할까요? 이런 상황을 해결하기 위해 언급했던 callback 이라는 개념을 적용하면, 이 상황을 해결 할 수 있습니다.

function getData2(callbackFunc){
    $.get('https://domain.com/products/1', function(response) {
		callbackFunc(response);
	});
}

getData2(function(tableData){
    console.log(tableData);
});

  위 코드는 아까 ajax  비동기 코드 방식을 callback 함수로 변환한 코드 입니다 이런식으로 비동기 로직이 발생했을 경우 이후 처리하고 싶은 내용을 인자로 하는 callback 함수 방식으로 코드를 작성한다면 해당 문제를 해결 할 수 있을겁니다.