이번 글에서는 Javascript의 비동기 처리에 대해 배운점을 정리하려합니다.
자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다.
2가지 예제를 통해 비동기 처리를 알아보자.
- ajax통신할 때
function getData() {
const tableData;
$.get('https://abcd.com/profile/1', function(response) {
tableData = response;
});
return tableData
}
console.log(getData()); // undefined위 코드는 http://abcd.com 에 HTTP GET요청으로 profile 정보를 요청하는 예제 코드이다.
서버에서 받아온 데이터를 response 인자에 담겨 선언한 tableData변수에 저장한다.
받아온 값을 확인하고자 getData()를 실행했는데 undefined 값이 나온다.
데이터 요청 후에 받아올때까지 기다리지않고 다음 코드인 return tableData가 실행되었기 때문이다.
데이터 요청 전 tableData의 값은 초기 값을 설정하지않은 undefined이기 때문이다.
- setTimeout() 사용할 때
// #1
console.log('Hello');
// #2
setTimeout(function() {
console.log('Bye');
}, 3000);
// #3
console.log('Hello Again');단순히 코드가 위에서 부터 순차적으로 실행된다고 생각한다면 결과 값은 다음과 같다고 생각할 수 있다.
"Hello" 출력
3초 뒤 "Bye" 출력
"Hello Again" 출력
하지만 자바스크립트는 비동기적으로 동작하기때문에 실제 결과값은 다음과 같다.
"Hello" 출력
"Hello Again" 출력
3초 뒤 "Bye" 출력
위와 같이 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리이다.
자바스크립트에는 아래와 같이 3가지 비동기 처리방식이 존재한다.
콜백 함수 사용
Promise
Async / Await
