동기식(synchronous)은 순서대로 진행되는 방식을 말하며, 이전 작업이 완료되지 않으면 다음 작업이 시작되지 않습니다.

function a() {
  // do something 1s
  return "a done";
}


function b() {
  // do something 2s
  return "b done";
}


function c() {
  // do something 3s
  return "c done";
}


console.log(a()); 
console.log(b()); //a()가 완료된후 실행
console.log(c()); //b()가 완료된후 실행


//보통 위에서 아래로 우리가 보는 글처럼 위와 아래가 고정되어서 순서대로 동작합니다.
console.log(c()); //c()실행
console.log(a()); //c() 완료후 a()실행
console.log(b()); //a()가 완료된후 b() 실행

반면에, 비동기식(asynchronous)은 작업이 순서에 구애받지 않고 동시에(한꺼번에) 실행되는 방식입니다. 이전 작업이 완료되지 않더라도 다음 작업이 실행될 수 있습니다.

function a() {
  // do something
  setTimeout(() => {
    console.log("a done");
  }, 1000);
}


function b() {
  // do something
  setTimeout(() => {
    console.log("b done");
  }, 2000);
}


function c() {
  // do something
  setTimeout(() => {
    console.log("c done");
  }, 3000);
}


console.log(a()); // a()작업 실행
console.log(b()); // a()와 관계없이 b() 실행
console.log(c()); // a(), b()와 관계없이 c() 실행

비동기식에서 기억해야 할 것은 함수의 결과가 나오지 않아도 다음 작업은 실행을 시작한다는 것입니다.

한꺼번에 다 실행하니 빠르고 좋을것 같지만,

부분 부분은 순서대로 진행되어야 되는 작업들이 존재합니다.

콜백 함수는 비동기식 처리에서 가장 기본적으로 사용되는 기술입니다. 콜백 함수는 비동기식 작업이 끝나면 호출되는 함수로, 콜백 함수를 등록하여 비동기식 작업이 끝나면 자동으로 호출되도록 할 수 있습니다.

예를 들어, 서버에서 블로그 글을 가져온 후( load() ) 도착한 블로그 글 내용을 div에 넣는다( setDiv( blogtext) ) 라는 함수들이 있을 경우

const blogtext = load(); //서버에서 데이터를 가져오는 함수(load) 시간이 걸림

setDiv( blogtext ); // blogtext를 div에 넣는 함수

이 두 함수가 비동기적으로 동시에 실행되면 load()이후 결과가 도착하기전 setDiv를 실행하기 때문에 setDiv에서는 blogtext의 값이 없어서 기대했던 결과가 나오지 않게 됩니다.

이런 경우 load()->load(fn) 함수를 수정해서 완료되면 함수를 실행하도록 변경합니다.

그리고 load가 데이터를 받으면 처리해달라고 setDiv 함수를 load에게 전달합니다. 이때 setDiv처럼 load에 의해서 불려지는 함수를 콜백함수라고 합니다.

const blogtext = load();

setDiv( blogtext );

여기서 

load( setDiv ) ; //이런 형태로 함수를 전달하고 이렇게 load에 의해 불려지는 함수를 콜백함수라고 말합니다.

콜백 함수는 비동기식 작업이 끝나면 호출되는 함수로, 콜백 함수를 등록하여 비동기식 작업이 끝나면 자동으로 호출되도록 할 수 있습니다.

비동기적으로 함수를 실행하고 동기적 작업(순서대로 해야하는작업)이 있는 경우 콜백함수를 사용하는 방식으로 처리를 진행하게 됩니다.

콜백함수 예시

function a(callback) {
  // do something
  setTimeout(() => {
    callback("a done");
  }, 1000);
}


function b(callback) {
  // do something
  setTimeout(() => {
    callback("b done");
  }, 2000);
}

function c(callback) {
  // do something
  setTimeout(() => {
    callback("c done");
  }, 3000);
}

a((result) => {
  console.log(result);
  b((result) => {
    console.log(result);
    c((result) => {
      console.log(result);
    });
  });
});

이렇게 콜백을 사용하던중 위에 보는 예시와 같이 콜백함수가 중첩되는 콜백지옥이라 불리는 문제가 발생하고 이를 해결하기 위해 프라미스라는 기술이 도입됩니다.

프라미스는 비동기식 작업의 결과를 담는 객체로, 비동기식 작업이 완료되면 프라미스 객체가 이행(resolve)되어 결과를 반환합니다.

async/await은 프라미스의 사용을 더욱 간단하게 만든 기술입니다. async 함수는 내부에서 비동기식 작업을 수행하면서 await 키워드를 사용하여 작업의 완료를 기다리고, 작업이 완료되면 결과를 반환합니다. 이를 이용하여 콜백 함수나 프라미스를 사용할 때보다 코드를 더욱 간단하고 직관적으로 작성할 수 있습니다.

Using promises - JavaScript | MDN (mozilla.org)

Promise의 간략 설명

Promise 객체는 기본적으로 세 가지 상태를 가집니다. 

pending,fulfilled(이행),rejected(거부)

처음에는 pending 상태이며, 이 상태에서는 비동기 작업이 진행 중입니다. 

- 서버로 자원 전송 요청을 보내는 함수 실행한 후 입니다.

작업이 완료되면 fulfilled(이행) 상태가 됩니다.

- 서버로 부터 문제 없이 데이터를 수신한 경우입니다.

만약 작업이 실패하면 rejected(거부) 상태가 됩니다.

- 서버에서 데이터를 수신하던중 에러가 발생한 경우입니다.

- 성공 후 then() 메소드를 이용해서, 실패 시 catch() 메소드를 이용해서 결과를 처리합니다.

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) { //500,404등
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log('Data received:', data);
  })
  .catch(error => {// Promise가 거부될 때, 네트워크 에러등
    console.error('Error occurred:', error);
  });

new Promise 예시

function myFetch(url, options) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(options.method || "GET", url);
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = () => {
      reject(xhr.statusText);
    };
    xhr.send(options.body);
  });
}

윗쪽 callback방식을 변경한 경우

function a() {
  return new Promise((resolve) => {
    // do something
    setTimeout(() => {
      resolve("a done");
    }, 1000);
  });
}

function b() {
  return new Promise((resolve) => {
    // do something
    setTimeout(() => {
      resolve("b done");
    }, 2000);
  });
}

function c() {
  return new Promise((resolve) => {
    // do something
    setTimeout(() => {
      resolve("c done");
    }, 3000);
  });
}

a()
  .then((result) => {
    console.log(result);
    return b();
  })
  .then((result) => {
    console.log(result);
    return c();
  })
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });

Promise.resolve(value): value를 포함한 새로운 fulfilled Promise 객체를 반환합니다.

Promise.reject(reason): reason을 포함한 새로운 rejected Promise 객체를 반환합니다.

Promise.all(iterable): iterable의 모든 Promise 객체가 fulfilled되면 이를 배열로 반환합니다. 하나라도 rejected되면 가장 먼저 rejected된 Promise 객체의 이유를 포함한 rejected Promise 객체를 반환합니다.

Promise.race(iterable): iterable 중 가장 먼저 fulfilled 또는 rejected된 Promise 객체를 반환합니다.

Promise.prototype.then(onFulfilled, onRejected): fulfilled 또는 rejected된 Promise 객체의 결과를 처리하기 위한 메소드입니다. 반환된 Promise 객체가 fulfilled되면 onFulfilled 콜백 함수를 실행하고, rejected되면 onRejected 콜백 함수를 실행합니다.

Promise.prototype.catch(onRejected): rejected된 Promise 객체를 처리하기 위한 메소드입니다. 반환된 Promise 객체가 rejected되면 onRejected 콜백 함수를 실행합니다.

async function - JavaScript | MDN (mozilla.org)

await - JavaScript | MDN (mozilla.org)

async와 await는 ES2017(ES8)에서 추가된 기능으로, 비동기적인 작업을 더 쉽게 처리할 수 있게 해줍니다.

순서가 필요한 작업을 async 함수로 묶고 함수를 실행합니다. 

async 는 비동기함수를 선언하기 위한 키워드이고 async가 붙은 함수는 함수 내부에서 await 키워드를 통해 promise 가 fulfilled상태가 될때까지 대기합니다.

await 연산자는 Promise를 기다리기 위해 사용됩니다. 연산자는 async function 내부에서만 사용할 수 있습니다.

function load1() { //서버에서 자료를 가져옴

function draw(todos){ // load1이 완료된후 그 데이터로 작업하는 함수

//이렇게 실행시키게 되면 load1실행후 바로 draw가 실행되어 data는 promise 상태이거나 값이 없을수 있습니다.

const data = load1();

draw(data); 

load1();이후 draw(data)가 실행되도록 aysnc 함수를 하나 만듦니다.

async function syncJob() {

 const result = await load1(); //load1이 완료될때까지 대기

 draw(result);

}

//이후 사용은

syncJob();//새로 만든 함수를 실행합니다.

function load1() { //서버에서 자료를 가져옴
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('todos');
    }, 2000);
  });
}
function draw(todos){
  console.log(`todos가 있어야함:${todos}`);
}
//원하는작업 순서 load1이 완료된후 draw수행
const todo = load1();
draw(todo);  //비동기 실행으로 todo 값은 Promise객체임

async function syncJob() {
  console.log('calling');
  const result = await load1();
  draw(result);
}
//순서대로 실행하기 위해 syncJob() 함수를 만들고 함수를 실행해줌

syncJob(); //async 방식으로 순서대로 실행
load1().then( res => draw(res)); //primise로 순서대로 실행

syncJob();과 load1().then 은 특별한 순서가 없기에 동시에 시작됩니다.

//어디선가 만들어진것
function modulefn(){
 init();
}
//내가 만든것
function load() {
  return new Promise((resolve) => {
    // do something
    setTimeout(() => {
      resolve("do c!");
    }, 3000);
  });
}
//내가 만든것 
function make(todos){
 console.log(todos);
}

//load() 후 make가 되야함
function init(){//다른 모듈에서 호출됨
 const res = load();
 make(res);//promise pending 상태로 완료후 종료
}

modulefn();
console.log('무엇인가 계속 진행1');

function init(){
 load().then(res => make(res));  //load후 make진행
}
modulefn();
console.log('무엇인가 계속 진행2');

function init(){
 async function gatherJobs(){
  const res = await load();
  make(res);
 } 
 gatherJobs(); //<-- async로 묶은 함수를 실행해줌
}

modulefn();
console.log('무엇인가 계속 진행3');