비동기 처리

자바스크립트는 코드를 실행하면 코드가 완료되는 것을 기다리지 않고 바로 다음 코드가 실행되는 비동기 프로그래밍 언어이다. 하지만 경우에 따라 동기적으로 처리해야하는 코드가 있을 수도 있다.

function getUser() {
  const user = {};

  setTimeout(() => {
    user.name = 'foo';
    user.age = 10;
  }, 1000);

  return user;
}

console.log(getUser()); // {}

위의 코드는 서버에서 사용자 정보를 가져오는 상황을 가정한 코드다. 함수는 setTimeout를 기다리지 않기 때문에 return된 이후 user 객체를 업데이트 하게된다.

이럴 경우 비동기 처리를 하는 가장 간단한 방법은 callback 함수를 이용하는 것이다. callback을 이해하려면 먼저 고차원함수에 대해 알아야한다.

고차원함수 HOF(Higher Other Funtion)

고차원 함수는 함수를 인자로 받거나 함수를 리턴 할 수 있는 함수를 말한다. 자바스크립트의 함수는 모두 고차원 함수다.

1등급 객체 (first-class object)

1급객체의 조건은 다음과 같다.

• 자료구조에 함수를 요소로 넣을 수 있다.
• 어떤 프로그램의 실행도중에 새로운 함수를 만들 수 있다.
• 함수를 다른 함수의 인자로 넣을 수 있다.
• 함수를 리턴 할 수 있다.

자바스크립트는 이러한 특징이 모두 해당되기 때문에 자바스크립트의 객체와 함수는 1등급 객체이고 그렇기 때문에 함수는 고차원 함수이다. 다른언어에서는 함수가 고차원 함수가 아닐 수도 있기 때문에 이는 자바스크립트의 특징중 하나고 callback함수는 이 특징을 이용한다.

Callback 함수

콜백함수는 다른 함수의 인자로 넘기는 함수를 말하고 함수의 리턴 값으로 결과를 받지않고 결과를 콜백함수의 인자로 넘겨받는 방법이다. 이것은 자바스크립트의 함수가 고차원함수이기 때문에 가능하다. 그래서 처음 예를 들었던 코드를 콜백을 이용해 고쳐보면 이렇게 된다.

function getUser(callback) {
  const user = {};

  setTimeout(() => {
    user.name = 'foo';
    user.age = 10;
    callback(user);
  }, 1000);
}

getUser(function(result) {
  console.log(result); // {name: "foo", age: 10} 
});

Callback Hell

콜백함수를 이용한 비동기 처리는 좋은 해결책 같지만 비동기 함수 안에서 여러번 다른 비동기 함수를 처리해야하는 경우 코드가 계속 들여쓰기가 되면서 유지보수가 어렵고 굉장히 읽기 어려운 코드가 된다.

이러한 단점을 해결하기 위해 es2015에서는 promise, es2017에서는 async/await 문법이 추가 되었다.