FE가 되고싶니? 나도✨

1. 비동기 함수는 이후에 있는 코드를 모두 실행하고 콜백을 실행

예를 들어 setTimeout() 함수의 두번째 파라미터로 0을 넘겨준다면? 3000을 적어줬을 때 뜻이 3000밀리초, 즉 3초였기 때문에 0은 바로 실행하라는 뜻이다. 하지만 아래 코드를 실행해보면 결과는 예상한 것과 다르게 나온다.

console.log('1');

setTimeout(() => console.log('2'), 0);

console.log('3');
console.log('4');
console.log('5');
console.log('6');
console.log('7');
console.log('8');
console.log('9');
console.log('10');

1
3
4
5
6
7
8
9
10
2

setTimeout(() => console.log('2'), 0) 아래에 있는 코드들이 먼저 실행되고 콜백이 실행됐다. 비동기 함수의 콜백은 아무리 빨리 실행돼도 비동기 함수 이후에 있는 코드가 모두 실행된 후에 실행된다. 반대로 생각해보면 비동기 함수 이후에 있는 코드가 굉장히 오래 걸려도 그걸 모두 실행하고 콜백을 실행한다는 의미이다.

예시를 바꿔서 실행해도 console.log('2')는 가장 마지막에 실행된다.

console.log('1');

setTimeout(() => console.log('2'), 1000);

// 1초 이상 걸리는 작업들

하지만 대부분의 경우에는 비동기 함수 이후에 코드가 아무리 많다고 해도 비동기 작업이 훨씬 오래걸린다. 콜백의 실행 타이밍이 몇 밀리초 단위까지 중요한 경우는 별로 없기 때문에 문제가 되는 경우는 드물다.

2. 실행할 콜백이 여러 개일 경우, 동기적으로 실행

console.log('1');

setTimeout(() => console.log('2'), 1001);

setTimeout(() => console.log('3'), 1000);

console.log('4');

위 코드의 실행 순서를 잠깐 생각해보자.

우선 1, 4가 출력되는건 예상할 수 있다. 그 이후 콜백이 어떻게 되는지가 관건인데 시간을 잘보면 두번째 setTimeout() 의 콜백이 실행되는 동안 첫번째 setTimeout() 의 타이머가 끝난다. 이런 경우엔 콜백은 동기적(순차적)으로 실행된다.

중요한 점은 비동기 작업이 비교적 오래 걸리는 작업들이라는 것인데, 예를 들면 특정 시간을 기다리거나 사용자의 상호작용을 기다리는 작업, 웹 리퀘스트의 결과를 기다리는 작업들처럼. 이런 비동기 작업들은 병렬적으로 처리되기 때문에 충분히 효율적인 코드를 작성할 수 있다.

자바스크립트에 setTimeout() 함수는 특정 시간이 지난 후에 콜백을 실행하는 함수이다. 기다리는 동안에는 함수 아래에 있는 코드를 실행하고, 첫번째 아규먼트로는 어떤 콜백이든 전달 할 수 있다. 

// ...

setTimeout(callback, delay);

// ...


//함수의 동작은 아래와 같다.
//1. setTimeout() 이전에 있는 코드 실행
//2. setTimeout() 함수 실행: delay 만큼 기다리는 타이머를 시작
//3. setTimeout() 이후에 있는 코드 실행
//4. delay가 지나면 callback 실행

console.log('1');

setTimeout(() => console.log('2'), 3000);
//첫번째 아규먼트로 콜백() => console.log('2')을 받고, 3000밀리초 = 3초가 지나면 이 콜백을 실행해준다.

console.log('3');

1
3
2

위 코드가 비동기 프로그램의 예시이다. 코드가 쓰여져 있는 순서대로 실행되지 않기 때문에.

비동기 실행 순서 설명

1. 일단 console.log('1')이 실행된다.
2. 이후에는 setTimeout 함수가 실행된다. (중요! 이 시점에는 3초 세는 타이머를 시작하기만 하고 바로 다음줄로 넘어간다. 콜백까지 실행 한 다음에 다음줄로 넘어가는 것X)
3. 그래서 일단 console.log('3')이 실행되고
4. 3초가 다되면 setTimeout에 전달된 콜백(console.log('2'))이 실행된다.

코드를 순서대로 실행하는 동기함수 였다고 가정하고 설명

1. console.log('1')이 가장 먼저 실행
2. 이후에는 setTimeout 함수가 실행
3. 타이머를 시작한 후, 3초를 기다린 다음 콜백(console.log('2')) 까지 실행한다.
4. 그러고 난 다음 console.log('3')이 실행된다.

두 프로그램을 비교해보면 비동기 프로그램이 동기 프로그램보다 조금 더 빨리 끝나는것을 확인 할 수 있다. 예시는 차이가 미세해도 setTimeout 이후의 작업이 더 오래걸리는 작업이었거나 더 많은 작업이 있었다면 비동기 프로그램이 훨씬 더 효율적이었을거다.

비동기 프로그램은 오래걸리는 작업이 있을 때 기다리는 동안 다른 작업을 먼저 처리함으로써 시간을 절약해준다.

setTimeout 함수를 비동기 함수(Asynchronous Function)하고 부르는데, 비동기 함수란 함수의 내용을 끝까지 쭉 실행하지 않고 중간에 다른 작업을 처리하다가 다시 돌아와서 마무리 하는 함수를 말한다. 콜백을 이용하면 나중에 해야하는 작업을 함수 형태(위 코드를 예로 들면 () =>  console.log('2') 같은)로 전달해 줄 수 있기 때문에 비동기 함수를 구현하는데 특히 유용하게 쓰인다.

콜백이라는 이름에 대해 생각해보면 call back : '나중에 다시 부르다' 라는 뜻이다. 바깥 함수 안에서 콜백이 언젠가 실행되기 때문에 이런 이름을 가지고 있는 것이다.

• 자바스크립트나 자바스크립트 라이브러리는 다양한 비동기 함수를 제공해준다.
• 제공되는 비동기 함수에 콜백을 넘겨주기만 하면 비동기 프로그램을 구현할 수 있다.

function 키워드로 선언한 함수를 콜백으로 사용(콜백 파라미터 없음)

function sayHello() {
  console.log('Hello World!');
};

function printMessage(func) {
  console.log('Printing message...');
  func();
};

printMessage(sayHello);

여기서 [ printMessage(sayHello); ]  sayHello 뒤에 괄호를 쓰지 않는 것이 중요하다. sayHello를 호출하는게 아니라 그냥 아규먼트로 전달하는 것이기 때문이다. sayHello 처럼 다른 함수의 아규먼트로 전달되는 함수를 콜백이라고 부른다.

Printing message...
Hello World!

Arrow Function을 콜백으로 사용(콜백 파라미터 없음)

//function sayHello() {
//  console.log('Hello World!');
//};

function printMessage(func) {
  console.log('Printing message...');
  func();
};

printMessage(() => console.log('Hello World!'));

위 코드 처럼 간단한 함수는 화살표 함수로 변환할수도 있다. sayHello 함수를 화살표 함수로 바꿔보면, printMessage(() => console.log('Hello World!')); 이렇게 작성할 수 있다.

Printing message...
Hello World!

function 키워드로 선언한 함수를 콜백으로 사용(콜백 파라미터 있음)

function sayHello(name) {
  console.log(`Hello ${name}!`);
};

function printMessage(func, name) {
  console.log('Printing message...');
  func(name);
};

printMessage(sayHello, 'Bob');

sayHello 함수는 name 파라미터를 받아서 name에게 인사를 하도록 코드를 변경했다. 그리고 printMessage 함수도 name 파라미터를 받는데 안에서 func 콜백을 호출할 때 name을 넘겨준다. 그렇게 되면 func 파라미터는 printMessage 에 첫 아규먼트로 적은 sayHello, name 파라미터는 'Bob'을 받아 실행을 한다. 이렇게 콜백은 파라미터를 받을 수도 있다.

파라미터를 받는 경우 바깥 함수 안에서 파라미터를 채워서 콜백을 실행해 준다.

Printing message...
Hello Bob!

Arrow Function을 콜백으로 사용(콜백 파라미터 있음)

function printMessageWithParams(func, name) {
  console.log('Printing message...');
  func(name);
}

printMessageWithParams((name) => console.log(`Hello ${name}!`), 'Bob');

바로 직전에 사용 했던 코드를 화살표 함수로 바꿔서 사용하면 이렇게 된다.

간단한 콜백에는 화살표 함수를 많이 사용한다.

Printing message...
Hello Bob!

코드 중에는 실행하는데 비교적 오래 걸리는 것들이 있다.

예를 들면 코드로 웹 리퀘스트(web request)를 보낼 수 있는데, 이 작업이 완료 되려면 인터넷을 통해 리퀘스트(Requset)가 서버까지 전달되어야 하고, 서버가 리퀘스트를 처리하고, 리스폰스가 다시 컴퓨터까지 전달되어야 한다.

response = sendRequest('https://www.worldwideweb.com')

요즘엔 물론 컴퓨터 성능도 좋아지고, 인터넷 속도도 점점 빨라지고 있지만 단순한 연산을 하는것에 비교하면 몇천 배 또는 그 이상의 시간이 걸린다.

그런데 코드로 리퀘스트를 보내고, 리스폰스를 기다리는 동안에는 컴퓨터가 따로 하는일이 없다. 리스폰스를 기다리기만 한다.

기다리는동안 수천개의 연산을 할 수 있을텐데 그냥 기다리고만 있는것은 별로 효율적이지 못하다. 효율적인 프로그램은 오랜 시간동안 기다려야 할 때 다른 일을 먼저 하고 있다가 기다리던 작업이 완료 되면 다시 그 일로 돌아갈것이다.

이게 바로 비동기 프로그래밍의 핵심 아이디어이다.

비동기 프로그래밍은 주어진 코드를 꼭 순서대로 실행하는 것이 아니라 오래 기다려야 하는 작업이 있으면 다음 작업을 먼저 처리하고, 나중에 처리하던 작업으로 다시 돌아와서 마무리하는 방식이다.

이걸 잘 활용하면 여러 작업을 동시에 효율적으로 처리할 수 있다.

언뜻 생각했을 때는 비동기 프로그램을 구현한다는게 막연하게 어려울것 같은데 자바스크립트는 비동기 프로그램을 짜기 위한 다양한 문법과 툴을 제공하기 때문에 이것을 어떻게 사용하는지 알면 비동기 프로그램을 쉽게 짤 수있다.