콜백 vs 약속 vs 비동기 대기

콜백:
JavaScript에서 함수는 객체입니다. 그래서 객체를 매개변수로 함수에 전달할 수 있습니다.

함수를 매개변수로 다른 함수에 전달하고 외부 함수 내에서 호출할 수도 있습니다. 따라서 콜백은 다른 함수에 전달되는 함수입니다. 첫 번째 기능이 완료되면 두 번째 기능이 실행됩니다.

콜백 함수의 예:

function callbackData(){
   console.log("Neeraj"); 
   setTimeout(function()  { console.log("Kumar"); }, 400); 
  console.log("Yadav")
}

callbackData();

이것이 동기화 코드라면 다음 출력이 발생했을 것입니다.

Neeraj
Kumar
Yadav

그러나 setTimeout은 비동기 함수이므로 위 코드의 출력은 다음과 같습니다.

Neeraj
Yadav
Kumar

JavaScript에는 setTimeout 라는 내장 메서드가 있는데, 이 메서드는 지정된 시간(밀리초) 후에 함수를 호출하거나 표현식을 평가합니다.

즉, 메시지 함수는 어떤 일이 발생한 후에 호출되지만(이 예에서는 4초가 지난 후) 이전에는 호출되지 않습니다. 따라서 콜백은 setTimeout에 인수로 전달되는 함수입니다.

화살표 함수로서의 콜백:
콜백 함수를 JavaScript의 최신 함수 유형인 ES6 화살표 함수로:

function callbackData(){
   console.log("Neeraj"); 
   setTimeout(()=>  { console.log("Kumar"); }, 400); 
  console.log("Yadav")
}

callbackData();

콜백의 문제는 Callback Hell.라는 것을 생성한다는 것입니다. 기본적으로 함수 내 함수 내에 함수를 중첩하기 시작하면 코드를 읽기가 정말 어려워지기 시작합니다. 따라서 이러한 상황에서 Promise는 중첩된 콜백을 더 나은 방식으로 처리하게 되었습니다.

약속:
자바스크립트에서의 Promise는 실생활에서의 Promise와 유사합니다. 우리가 실생활에서 약속할 때 그것은 우리가 미래에 무언가를 할 것이라는 보증입니다. 약속은 미래에 대해서만 할 수 있기 때문입니다.

약속에는 두 가지 가능한 결과가 있습니다. 때가 되면 지켜질 것이고, 아니면 지키지 않을 것입니다.

JavaScript의 Promise도 마찬가지입니다. JavaScript에서 약속을 정의하면 때가 되면 해결되거나 거부됩니다. IF 조건처럼 들립니다. 그러나 그들 사이에는 큰 차이점이 있습니다.

약속은 작업의 비동기 결과를 처리하는 데 사용됩니다. JavaScript는 코드의 다른 동기 부분이 실행될 수 있기 전에 비동기 코드 블록이 완전히 실행될 때까지 기다리지 않도록 설계되었습니다. 약속을 사용하면 비동기 요청이 완료될 때까지 코드 블록의 실행을 연기할 수 있습니다. 이렇게 하면 다른 작업이 중단 없이 계속 실행될 수 있습니다.
States of Promises:약속은 객체입니다. Promise 객체에는 3가지 상태가 있습니다.

보류 중: Promise가 성공하거나 실패하기 전의 초기 상태입니다.

해결됨: 완료된 약속

거부됨: 약속 실패, 오류 발생

Creating a Promise:

const myPromise = new Promise((resolve, reject) => {  
    // condition
});

약속을 만들어 봅시다:

const myFirstPromise = new Promise((resolve, reject) => { 
    const condition = true;   
    if(condition) {
         setTimeout(function(){
             resolve("Promise is resolved!"); // fulfilled
        }, 300);
    } else {    
        reject('Promise is rejected!');  
    }
});

위의 약속에서 조건이 참이면 Promise is resolved 를 반환하는 약속을 해결하고 그렇지 않으면 오류Promise is rejected 를 반환합니다. 이제 첫 번째 Promise를 만들었으니 이제 사용해 봅시다.
Using Promise:
우리는 resolve를 위해 then()을 사용하고 거부를 위해 catch()를 사용하여 Promise를 생성합니다.

myFirstPromise
.then((successMsg) => {
    console.log(successMsg);
})
.catch((errorMsg) => { 
    console.log(errorMsg);
});

한 단계 더 나아가 보겠습니다.

const demoPromise= function() {
  myFirstPromise
  .then((successMsg) => {
      console.log("Success:" + successMsg);
  })
  .catch((errorMsg) => { 
      console.log("Error:" + errorMsg);
  })
}

demoPromise();

우리가 생성한 약속 조건은 true이고 demoPromise()를 호출한 다음 콘솔 로그에 다음을 읽습니다.

Success: Promise is resolved!

따라서 Promise가 거부되면 catch() 메서드로 이동하고 이번에는 콘솔에 다른 메시지가 표시됩니다.

Error: Promise is rejected!

What is Chaining?
때때로 우리는 여러 개의 비동기 요청을 호출해야 합니다. 그런 다음 첫 번째 Promise가 해결(또는 거부)된 후 체이닝이라는 메서드로 직접 연결할 수 있는 새 프로세스가 시작됩니다.
그래서 우리는 또 다른 약속을 만듭니다:

const helloPromise  = function() {
  return new Promise(function(resolve, reject) {
    const message = `Hi Neeraj, How are you!`;

    resolve(message)
  });
}

우리는 이 약속을 이전의 "myFirstPromise"작업에 다음과 같이 연결합니다.

const demoPromise= function() {

  myFirstPromise
  .then(helloPromise)
  .then((successMsg) => {
      console.log("Success:" + successMsg);
  })
  .catch((errorMsg) => { 
      console.log("Error:" + errorMsg);
  })
}

demoPromise();

비동기/대기:
Await는 기본적으로 약속에 대한 구문 설탕입니다. 이는 비동기 코드를 동기/절차 코드처럼 보이게 만들어 인간이 이해하기 더 쉽습니다.
Async 및 Await 구문:

async function printMyAsync(){
  await printString("one")
  await printString("two")
  await printString("three")
}
You can see that we use the `async` keyword for the wrapper function printMyAsync. This lets JavaScript know that we are using async/await syntax, and is necessary if you want to use Await. This means you can’t use Await at the global level. It always needs a wrapper function. Or we can say await is only used with an async function.

The await keyword is used in an async function to ensure that all promises returned in the async function are synchronized, ie. they wait for each other. Await eliminates the use of callbacks in .then() and .catch(). In using async and await, async is prepended when returning a promise, await is prepended when calling a promise. try and catch are also used to get the rejection value of an async function.

demoPromise를 사용하여 Async 및 Await를 이해하는 예:

async function demoPromise() {
  try {
    let message = await myFirstPromise;
    let message  = await helloPromise();
    console.log(message);

  }catch((error) => { 
      console.log("Error:" + error.message);
  })
}

// finally, call our async function

(async () => { 
  await myDate();
})();