동기와 비동기
자바스크립트는 싱글 스레드 언어이기 때문에, 한번에 한가지 작업만을 수행한다. 이때, 요청과, 응답 사이에 시간이 많이 소요되는 작업이 많아질 경우, 전체적인 성능과, 작업 속도에 영향을 크게 줄수 있기 때문에 비동기라는 개념을 도입하게 되었다.
자바스크립트의 비동기
CallBack 함수
흔히 비동기를 사용할 때 사용하는 함수인, CallBack 함수이다
function getDB(callback) {
// 데이터베이스로부터 3초 후에 데이터 값을 받아온 후, 콜백 함수 호출
setTimeout(() => {
const value = 100;
callback(value);
}, 3000);
}
function main() {
// 호출할 작업에 콜백 함수를 넘긴다
getDB(function(value) {
let data = value * 2;
console.log('data의 값 : ', data);
});
}
main();다음과 같은 코드가 실행될때 main 함수에서 getDB함수를 호출하여 사용하면, 3초뒤에 value값 100을 받아오고, 200의 값을 출력하게 된다.
다만, CallBack 함수의 경우, 많이 사용하게 되면 콜백 지옥에 빠져 코드 복잡도가 높아져 가독성이 떨어진다는 단점이 있다.
Promise 객체
JavaScript에서 CallBack함수는 비동기를 순차적으로 처리하기 위한 편법같은 존재이지 실제로 비동기를 위해 탄생한 객체로는 Promise 객체가 있다. Promise 객체는 비동기 작업의 성공, 실패와 그 결과값을 나타내어 비동기 작업을 비교적 깔끔하게 수행할 수 있다.
function getDB() {
return new Promise((resolve) => {
setTimeout(() => {
const value = 100;
resolve(value);
}, 3000);
});
}
function main() {
getDB()
.then((value) => {
let data = value * 2;
console.log('data의 값 : ', data);
})
.catch((error) => {
console.error(error);
});
}
main();
위 코드를 Promise 객체를 이용해 구현한 예시이다.
getDB 함수에서 Promise 객체를 통해 비동기 처리를 하고, main에서 getDB 함수를 불러내어 then과 catch를 통해 성공과, 실패값을 얻어낼 수 있다.
async/await
최근에는 Promise 객체보다는 async/await이라는 문법을 더 많이 사용한다. Promise를 기반으로 하지만, 동기 코드처럼 작성할 수 있다는 장점이 있다.
function getDB() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const value = 100;
resolve(value);
}, 3000);
});
}
async function main() {
let data = await getDB();
data *= 2;
console.log('data의 값 : ', data);
}
main();다음은 위 코드를 async/await 문법을 이용하여 구현한 예시이다.
출처
