동기 / 비동기 처리

콜백함수(call back)

아래 내용에서 사용될 개념이다. 콜백함수란 간단히 설명하면, 파라미터로 전달된 함수이다.
javascript에서는 다른 변수와 같이 함수도 선언 가능하기에, 파라미터에 함수를 넘겨줄 수 있는 것은 당연한다.

비동기처리란?

일반적으로 코드는 위에서 아래로 순차적으로 실행된다. 위 코드가 끝나고 아래 코드가 실행되는 것이다. 즉, 순차적 처리이다. 이를 동기 처리라고 칭한다.

<그렇다면 비동기처리란 뭘까?>
단순히 동기처리와 반대라고 보면 된다. 비순차적인 처리이다. 어떠한 실행에 대한 리턴이 오지 않아도 다음 실행을 진행하도록 한다.
(대표적인 예로 javascript 내부 함수인 setTimeout()이 있다.)

콜백함수와 관련하여 비동기처리에대한 좋은 예제가 있다. setTimeout()은 비동기함수이다.

<예제1> - 콜백함수 x

function findUser(id) {//1
  let user;
  setTimeout(function () {//2
    console.log("waited 0.1 sec.");
    user = {
      id: id,
      name: "User" + id,
      email: id + "@test.com",
    };
  }, 1000);
  return user; //3
}

const user = findUser(1); //4
console.log("user:", user);//5

위의 실행순서를 보면 3 > 1 > 2 > 5 > 4이다. 2번 setTimeout()은 비동기 함수이기 때문에 기다리게되는 1초간 5번이 먼저 실행되고, 이 때 3번은 1초 뒤 return 되기 때문에 5번에 user은 undifined인 상대이다.
따라서 출력은 아래와 같다.

user: undefined
waited 0.1 sec.

<예제2> - 콜백함수 o

function findUserAndCallBack(id, cb) {//1
  setTimeout(function () {//2
    console.log("waited 0.1 sec.");
    const user = {
      id: id,
      name: "User" + id,
      email: id + "@test.com",
    };
    cb(user);//3
  }, 1000);
}

findUserAndCallBack(1, function (user) {//4
  console.log("user:", user);
});

예제1과 다르게 함수 외부에서 선언 후 호출하지 않았고, 콜백함수를 사용하여 함수 자체를 바로 호출했다.
실행순서는 4 > 1 > 2 > 3이다.
2번에서 cb(user)에 전달되는 user이 setTimeoput() 내부에 있기 때문에, 문제 없이 순차적으로 user도 받고 출력이 된다.

waited 0.1 sec.
user: {id: 1, name: "User1", email: "1@test.com"}

비동기 처리를 위한 효과적인 방법중 하나는 async await을 사용하는 것이다.
async await 에 정리 해두었다.