[JavaScript] 비동기 실행 함수

[동기실행]

한번 시작한 작업을 완료하기 전까지 코드의 실행 흐름이 절대 그 다음코드로 넘어가지 않는 것으로, 시작한 작업을 완벽하게 처리하고나서 그 다음코드로 실행 흐름이 넘어감. 동기 실행의 경우 코드가 보이는 순서대로 실행됨. 

 

[비동기실행]

한번 작업을 시작해두고, 그 작업이 완료되기 전이더라도 콜백만 등록해두고 코드의 실행 흐름이 바로 그 다음코드로 넘어감. 추후에 특정 조건이 만족되면 콜백함수가 실행됨으로써 해당 작업을 완료. 비동기 실행에서는 코드가 등장하는 순서대로 실행되는 것이 아님.

 

비동기 실행이 동기 실행에 비해 동일한 작업을 더 빠른시간내에 처리할 수 있음

 

동기실행과 비동기실행 [코드잇]

---

[비동기 실행함수]

 

1. setTimeout 함수

setTimeout 함수는, 특정 함수의 실행을 원하는 시간만큼 뒤로 미루기 위해 사용하는 함수임.

 

console.log('a');
setTimeout(() => { console.log('b'); }, 2000);
console.log('c');

 

예를 들어 이런 코드가 있을 때, 지금 가운데에 있는 setTimeout 함수는 첫 번째 파라미터에 있는

() ⇒ { console.log('b'); },

이 콜백의 실행을, 두 번째 파라미터에 적힌 2000 밀리세컨즈(=2초) 뒤로 미룸. 그래서 이 코드를 실행하면

 

 

이렇게 a와 c가 먼저 출력되고, 약 2초가 지난 후에 b가 출력됨. 

fetch 함수에서는 콜백이 실행되는 조건이, '리스폰스가 도착했을 때'였다면, setTimeout에서 콜백이 실행되는 조건은, '설정한 밀리세컨즈만큼의 시간이 경과했을 때'입니다. 어쨌든 둘 다 콜백의 실행을 나중으로 미룬다는 점에서는 비슷함.

 

 

2. setInterval 함수

setInterval 함수는 특정 콜백을 일정한 시간 간격으로 실행하도록 등록하는 함수임. Interval는 '간격'이라는 뜻으로 바로 위에서 봤던 예시 코드에서 setTimeout 부분만 setInterval로 바꿔서 실행하면

 

console.log('a');
setInterval(() => { console.log('b'); }, 2000);
console.log('c');

b를 출력하는 콜백이 2초 간격으로 계속 실행됨. 실제로 확인해보면

 

 

a와 c가 출력되고, 약 2초 뒤에 b가 출력된 후 그 뒤로 계속 2초 간격으로 b가 반복 출력되는 것을 볼 수 있음. (현재 b 왼쪽에 쓰여 있는 5는 b가 다섯 번 출력되었음을 개발자 도구가 간단하게 나타낸 것)

 

 

3. addEventListener 메소드

addEventListener 메소드는 DOM 객체의 메소드로 만약 사용자가 웹 페이지에서 버튼을 클릭했을 때, 실행하고 싶은 함수가 있다면

(1) 해당 DOM 객체의 onclick 속성에 그 함수를 설정, 혹은

(2) 해당 DOM 객체의 addEventListener 메소드의 파라미터로 전달하면 됨.

 

(1) onclick 속성

 

...

btn.onclick = function (e) { // 해당 이벤트 객체가 파라미터 e로 넘어옵니다.
  console.log('Hello Codeit!');
};

// 또는 arrow function 형식으로 이렇게 나타낼 수도 있습니다. 
btn.onclick = (e) => {
  console.log('Hello Codeit!');
};

...

 

(2) addEventListener 메소드

 

...

btn.addEventListener('click', function (e) { // 해당 이벤트 객체가 파라미터 e로 넘어옵니다.
  console.log('Hello Codeit!');
});

// 또는 arrow function 형식으로 이렇게 나타낼 수도 있습니다.
btn.addEventListener('click', (e) => {
  console.log('Hello Codeit!');
});

... 

 

이렇게 클릭과 같은 특정 이벤트가 발생했을 때 실행할 콜백을 등록하는 addEventListener 메소드도 비동기 실행과 관련이 있음. 파라미터로 전달된 콜백이 당장 실행되는 것이 아니라, 나중에 특정 조건(클릭 이벤트 발생)이 만족될 때(마다) 실행되기 때문임.

 

fetch 함수와 위의 함수들을 보면 차이점이 있음. 위의 함수들을 보면

 

setTimeout(콜백, 시간) 
setInterval(콜백, 시간)
addEventListener(이벤트 이름, 콜백)

 

이런 식으로, 함수의 아규먼트로 바로 콜백을 넣음. 그러나 fetch 함수는 이 함수들과는 다르게 생겼는데,

 

fetch('https://www.google.com')
  .then((response) => response.text()) // fetch 함수가 리턴하는 객체의 then 메소드를 사용해서 콜백을 등록
  .then((result) => { console.log(result); });

 

fetch 함수는 콜백을 파라미터로 바로 전달받는 게 아니라, fetch 함수가 리턴하는 어떤 객체의 then 메소드를 사용해서 콜백을 등록.

 

fetch('https://www.google.com', (response) => response.text())

 

fetch 함수만 사용하는 형식이 다른 이유는 좀 더 새로운 방식으로 비동기 실행을 지원하는 자바스크립트 문법과 연관이 있기 때문임. 사실 fetch 함수는 Promise 객체라는 것을 리턴하고, 이 Promise 객체는 비동기 실행을 지원하는 또 다른 종류의 문법에 해당