동기와 비동기 그리고 promise

🤓오늘의 공부 주제: 동기/비동기, promise🤓

Q. 동기/비동기란 무엇인가?

A. 동기(Synchronous)와 비동기(Asynchronous)는 프로그램이 작업을 수행하는 방식에 관한 용어입니다. 프로미스(Promise)는 비동기 코드를 더 효과적으로 다루기 위한 자바스크립트의 패턴 중 하나입니다.

1. 동기(Synchronous):

동기적인 코드는 한 번에 하나의 작업만 수행하며, 다음 작업은 이전 작업이 완료될 때까지 기다립니다.
코드는 위에서 아래로 순차적으로 실행되며, 각 작업이 끝나기 전까지 다음 작업으로 진행하지 않습니다.

console.log("Start");

function synchronousTask() {
  console.log("Task 1");
  console.log("Task 2");
}

synchronousTask();

console.log("End");

//출력
Start
Task 1
Task 2
End

2. 비동기(Asynchronous):

비동기적인 코드는 작업을 기다리지 않고 다음 코드를 실행합니다. 이때, 비동기 작업은 별도의 실행 컨텍스트에서 백그라운드에서 수행됩니다.
주로 콜백 함수, 이벤트 핸들러, 프로미스 등을 사용하여 비동기 작업을 다룹니다.

console.log("Start");

function asynchronousTask() {
  setTimeout(function () {
    console.log("Async Task");
  }, 2000);
}

asynchronousTask();

console.log("End");

//출력
Start
End
Async Task  // 2초 후에 출력

3. 프로미스(Promise):

프로미스는 비동기 작업을 더 편리하게 다루기 위한 객체입니다.
성공 또는 실패와 같은 비동기 작업의 최종 완료 또는 실패를 나타내는 객체로, 비동기 작업이 완료되면 resolve 또는 reject 콜백 중 하나가 호출됩니다.

console.log("Start");

function promiseTask() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve("Promise Task");
    }, 2000);
  });
}

promiseTask().then(function (result) {
  console.log(result);
});

console.log("End");

//출력
Start
End
Promise Task  // 2초 후에 출력