동기 (synchronous)
- 직렬적으로 일을 처리한다.
- 요청한 작업에 대해 완료 여부를 따져 순차대로 처리한다.
- 요청을 보낸 후 응답을 받아야만 다음 동작이 이루어진다.
- 일을 처리하는 동안 다른 프로그램은 정지한다.
- 프로그램의 전체적인 효율을 저하시킬 수 있다.
비동기 (asynchronous)
- 병렬적으로 일을 처리한다.
- 요청한 작접에 완료 여부를 따지지 않는다.
- 요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어진다.
- 일을 처리하는 동안 다른 작업을 할 수 있으므로 효율적이다.
- 흐름을 예측할 수 없고, 무엇이 먼저 완료될 지 보장할 수 없다.
CallBack 함수
- 비동기 처리를 위한 패턴이다.
- 함수를 파라미터로 전달하고 감싼 함수의 내부에서 그 함수를 호출한다.
function print(callback) {
callback();
}
- 자바스크립트는 코드를 위에서 아래로 순차적으로 실행한다.
- 콜백은 태스크가 끝나기 전에 함수가 실행되지 않을 것을 보장한다.
- 콜백은 태스크가 끝난 직후에 실행된다.
- 자바스크립트에서 비동기 함수를 만드는데 사용된다.
const message = function() {
console.log("This message is shown after 3 seconds");
}
setTimeout(message, 3000);
- 콜백 지옥 (Callback Hell)
- 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상을 말한다.
step1(function (value1) {
step2(function (value2) {
step3(function (value3) {
step4(function (value4) {
step5(function (value5) {
step6(function (value6) {
});
});
});
});
});
});
Promise
new Promise에서 할당된 비동기 작업은 바로 시작된다.Promise가 끝난 다음의 동작은 then과 catch 메소드로 설정해줄 수 있다.
then : Promise가 성공했을 때의 동작을 지정한다.catch : Promise가 실패했을 때의 동작을 지정한다.
const promise1 = new Promise((resolve, reject) => {
resolve();
});
promise1
.then(() => {
console.log("then!");
})
.catch(() => {
console.log("catch!");
});
async
- 함수를 선언할 때 붙일 수 있다.
async 함수의 리턴 값은 무조건 Promise이다.await는 async 함수 내부에서만 사용할 수 있다.
async function f() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("완료!"), 1000)
});
let result = await promise;
alert(result);
}
f();
출처
