[Javascript] 비동기(Asynchronous) 사용해보기

Javascript 프로그래밍에서 이제는 빼놓을 수 없는 프로그래밍 방법이 바로 비동기 (Asynchronous) 프로그래밍입니다.

이번 포스팅에서는 비동기가 무엇인지 알아보고 대표적인 비동기 함수인 setTimeout()에 대해서 알아보겠습니다.

---

비동기(Asynchronous)란 무엇인가

비동기 프로그램 이전에 동기 프로그래밍이 있었습니다. 대부분의 C언어는 동기 프로그래밍입니다. 동기와 비동기의 차이점은 하나입니다. 결과를 받을 때까지 기다리는가, 아니면 기다리지 않는가. 이게 무슨 의미인지 아래를 보도록 하겠습니다.

 

우선 동기(Synchronous)라고 생각해 보겠습니다.

statement1();
statement2();
statement3();

statement1() 함수를 실행했을 때 st1의 결과를 받을 때까지 다음 구문을 실행하지 않습니다. 만약 서버로 통신을 하는 구간이었다면 서버에서 결과가 내려오지 않는 이상 statement1() 함수 이후로 진행할 수 없습니다.

 

만약 비동기(Asynchronous)라고 생각하면 일단 statement1(), statement2(), statement3() 함수 모두를 실행합니다. 그리고 서버에서 결과가 반환되면 다음 로직이 실행됩니다. 즉, 기다리지 않고 클라이언트는 본인의 할 일을 다 하고 난 이후에 결과를 받아서 실행합니다.

 

따라서 자원을 효율적으로 사용할 수 있다는 장점이 있습니다. 다만 프로그래밍을 할 때 복잡함이 있을 수 있습니다. 그럼 비동기의 대표적인 함수인 setTimeout() 함수를 사용해서 알아보도록 하겠습니다.

---

비동기 setTimeout() 함수

비동기 함수중 대표적인 함수로 setTimeout() 함수가 있습니다. 이 함수는 아래와 같이 사용합니다.

setTimeout(function, milliseconds);

setTimeout() 함수의 첫 번째 parameter는 함수입니다. 이를 콜백(callback) 함수라 합니다. 이는 두 번째 parameter로 입력한 초가 지나고 난 뒤에 실행하는 함수입니다.

두 번째 parameter는 millisecond 단위의 초를 입력합니다. 1초면 1000이라 입력해야 합니다. (1 sec = 1000 millisecond)

 

그럼 실제로 사용해 보도록 하겠습니다.

---

setTimeout() 함수 한 번 사용

첫 번째는 setTimeout() 함수를 한번 사용하는 예제입니다.

function hello1() {
  console.log('1. welcome to koonsland.');
}

setTimeout(hello1, 3000); // 3초 후 hello1 실행

첫 번째 예제를 실행하면 2초 후에 welcome to koonsland라는 메시지가 출력됩니다. setTimeout() 함수를 실행한 시간부터 2초 후에 실행되기 때문입니다.

---

setTimeout() 함수 여러 번 사용

두 번째 예제는 setTimeout() 함수를 여러 개 사용해 보겠습니다.

function hello1() {
  console.log('1. welcome to koonsland.');
}

function hello2() {
  console.log('2. welcome to koonsland.');
}

setTimeout(hello1, 4000); // 4초 후 hello1 실행
setTimeout(hello2, 1000); // 1초 후 hello2 실행

첫 번째는 4초 후 hello1() 함수를 실행하도록 하고, 두 번째는 1초 후 hello2() 함수를 실행하도록 하였습니다. 결과는 2번 먼저 1초 뒤 실행되고 이후 4초가 되면 1번이 실행됩니다. 즉, 실행 순서와 콜백 순서는 상관이 없습니다. 실행은 순차적으로 던지고, 콜백 함수는 조건에 맞으면 결과가 실행됩니다.

---

setTimeout() 함수를 이용해 시간 출력하기

세 번째 예제는 setTimeout()을 이용해서 1초마다 화면에 시간을 출력해 보도록 하겠습니다.

function printTime() {
  let datetime = new Date().toTimeString();
  console.log(datetime);
  
  setTimeout(printTime, 1000);
}

printTime();

// 14:03:05 GMT+0900 (대한민국 표준시)
// 14:03:06 GMT+0900 (대한민국 표준시)
// 14:03:07 GMT+0900 (대한민국 표준시)

현재 날짜와 시간을 받아오는 Date()를 이용해서 현재 시간을 datetime에 저장했습니다. 그리고 이 시간은 화면에 출력합니다. 다만 여기서 setTimeout() 함수를 이용해서 첫 번째 parameter는 자신의 함수 이름을, 시간은 1초를 넣어주도록 합니다. 그럼 1초마다 자신을 계속 실행하게 되며 1초마다 화면에 시간이 출력되게 됩니다.

---

setTimeout() 콜백 함수에 parameter 전달하기

정해진 시간 뒤에 콜백 함수를 실행할 때 parameter를 전달할 수 있습니다.

function hello1(number, name) {
  console.log('welcome to koonsland.');
  console.log(`${number} : ${name}`);
}

setTimeout(hello1, 3000, 1, 'Ironman'); // 3초 후 hello1 실행

setTimeout()의 두 개의 parameter 이후에 콜백 함수에서 받을 parameter를 넣어주시면 됩니다.

---

이번 포스팅에서는 비동기 프로그래밍에 대해서 간단히 알아보고 대표적인 setTimeout() 함수에 대해서 알아보았습니다. 콜백에 대해서는 아직 자세하게 다루진 않았지만 setTimeout()를 사용하는 방법과 비동기 함수들이 사용되는 방법을 알아보는 시간이었습니다. 도움이 되셨으면 합니다. 이상입니다.