# Call Back
javascriptは同期されているため、信号が送信された後から作成された順序で同期して実行されます.
ハウスティンとは何ですか.var変数または関数宣言が上に移動されます.

"Synchronous callback"

これは一般的な同期関数です.関数を宣言し、呼び出し直後に必要な結果を表示します.

function printImmediately(print) {
  print();
}

printImmediately(()=> console.log('hello'));

"Asynchronous callback"

ひどうきかんすう
関数を宣言するときに、パラメータとして必要な値と遅延時間を受け入れます.

function printWIthDelay(print, timeout) {
  setTimeout(print, timeout);
}
printWithDelay(()=> console.log('async callback'), 2000);

Promise

非同期アクションの実行
重要なポイント!
1.ステータスの理解
state:pending(承諾が作成され、操作が実行されました)
->完了(操作完了)または却下(問題発生)
2.生産者(情報提供者)と消費者(情報消費)の違いを知る

"Producer"

promiseという클래스を使って作ってみます.

//1.Producer
//new Promise가 생성될 때, executor는 바로 실행된다. 이에 주의해서 사용해야 한다.

const promise = new Promise((resolve, reject) => {
  console.log('doing something..'); //즉시 console 출력
  setTimeout(()=> {
    resolve('jev'); // 성공했을 때
    //reject(new Error('no network')); // 실패했을 때
  }, 2000);
});


promise
  .then(value=> {console.log(value)}) // value는 promise 객체가 선언한 resolve의 인자인 'jev'를 받는다.
  //catch(error => {console.log(error)}) // error는 promise 객체가 선언한 reject의 인자인 new Error를 받는다.
  //finally(() => {console.log('finally')}) // 성공하든 실패하든 상관없이 출력

"Promise Chaining"

const fetchNumber = new Promise((resolve, reject)=> {setTimeout(()=> resolve(1), 1000)})

fetchNumber
  .then(num=> num*2) // 2 after 1sec
  .then(num=> num*3) // 6 after 1sec
  .then(num => { // 값을 출력시켜도 되고, 비동기인 promise를 전달해도 됨.
  	return new Promise((resolve, reject)=> {
      setTimeout(()=> resolve(num-1), 1000)})}) 
  .then(num=> console.log(num)) // 5 after 1sec

//이렇게 알아볼 수 있듯이 .then으로 인자를 계속 연결하면서 이을수 있다.

//다른 예를 통해 다시한번 이해해보자.

const getHen= () => 
  new Promise((resolve, reject)=> {
    setTimeout(()=> resolve('닭'), 1000)})

const getEgg = hen =>
  new Promise((resolve, reject)=> {
    setTiemout(()=> resolve(`${hen}=> '계란'`), 1000)})

const cook = egg =>
  new Promise((resolve, reject)=> {
    setTimeout(()=> resolve(`${egg}=> '후라이'`), 1000)})

getHen()
    //인자 없이 'getEgg'로만 표현가능.
  .then(hen=> getEgg(hen)) //닭=> 계란
    //인자 없이 'cook'로만 표현가능.
  .then(egg=> cook(egg)) //닭=> 계란=> 후라이
    //인자 없이 'console.log'로만 표현가능.
  .then(meal=> console(meal)) //닭=> 계란=> 후라이 after 3sec

Async / Await

コミットメントをシンプル、シンプル、同期化
async、awaitを使用すると、同期作成のように簡単に作成できます.

"Async"

//기존 promise 함수를 이용한 경우
function fetchUser() {
  return new Promise(resolve,reject)=> {
    resolve('jev')})
    
fetchUser()
    .then(console.log)
  
//async를 이용한 경우
async function fetchUser() {
	return 'jev';)
    
fetchUser()
    .then(console.log)

"Await"

async function getApple() {
  await delay(1000);
  return 'apple';} // 1초 뒤에 apple을 resolve 한다.

async function getBanana() {
  await delay(1000);
  return 'banana';}  // 1초 뒤에 banana를 resolve 한다.

//이제 기존 방식대로 'apple'과'banana'를 출력하기.

function pickFruits() {
  return getApple.then(apple=> {
    return getBanana.then(banana=> `${apple}+${banana}`)})}

pickFruits.then(console.log); // 2초 뒤 apple+banana 출력

//async를 이용하여 'apple'과 'banana'를 출력하기.

async function pickFruits() {
  const apple = await getApple();
  const banana = await getBanana();
  return `${apple}+${banana}`}

pickFruits().then(console.log) // 2초 뒤 apple+banana 출력

//병렬적으로 async 사용하기

async function pickFruits() {
  //promise를 통해 각각 함수들을 불러오고, await을 통해 각 함수들 출력
  const applePromise = getApple(); // promise는 선언하는 순간 실행
  const bananaPromise = getBanana();
  const apple = await getApple();
  const banana = await getBanana();
  return `${apple}+${banana}`}

pickFruits().then(console.log) // 1초 뒤 apple+banana 2번 출력

//병렬적으로 유용하게 Promise APIs를 통해 사용하기

function pickAllFruits() {
  return Promise.all([getApple(), getBanana()]).then(fruits=> fruits.join('+'))}

pickAllfruits.then(console.log) // 1초 뒤 apple+banana 2번 출력

操作KEY WORDS

"chrome v"

Chromeブラウザの一部としてのエンジン.このエンジンによりjavascriptコードを解釈して実行することができます.

"runtime environment"

Webブラウザはjsエンジンだけでなく、ブラウザが提供するjsランタイム環境もweb api、queue、event loopなどからなるため、非同期で実行できます.

また,同期性を保証する非同期および非ブロック操作は,JavaScriptエンジンを駆動するランタイム環境で行う.(ブラウザまたはノード)
非同期操作を実行すると、コードがスタックされ、呼び出しスタックで実行されます.1.javascriptのエンジン委任->web api
2.webapi非同期タスクの実行->テクノロジーキューへの配信.(イベントループ経由)
3.callスタックにスタックされた関数がない場合、イベントループは、技術キューで待機しているcallback関数をcallスタックに渡します.
4.スタックされたcallback関数をcallスタックで実行し、callスタックから削除します.

「jsエンジン」

Webページのjsコード解析構文を受信し、構文エラーがなければ実行可能コマンドに変換します.memory heapとcall stackからなる.タスクを処理すると、メインスレッドから呼び出された関数がcallスタックに蓄積されます.
すなわち、単一スレッドベースの言語には、プライマリスレッドと呼び出しスタックがあります.
[ソース]
https://www.youtube.com/watch?v=aoQSOZfz3vQ&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC
https://medium.com/@vdongbin/javascript-%EC%9E%91%EB%8F%99%EC%9B%90%EB%A6%AC-single-thread-event-loop-asynchronous-e47e07b24d1c
https://prohannah.tistory.com/59
https://dkje.github.io/2020/09/20/AsyncAndEventLoop/