非同期

非同期:単一スレッドで実行されるJavaScriptの限界を解決します.
非同期処理により,ブロックせずに効率的に処理できる.
JavaScriptエンジンは、2つの主要なコンポーネントから構成されています.
​
メモリheap(Memory heap)-hipにオブジェクトが割り当てられ、ほとんどが構造化されていないメモリ領域です.変数とオブジェクトのすべてのメモリ割り当てがここで発生します.
コールスタック(Call Stack)-コードが実行されると、コールスタックが蓄積されます.
​
運転環境(Runtime)
ブラウザには、JavaScript開発者が使用するAPI(settimeoutなど)がほとんど含まれています.しかし、これらのAPIはエンジンによって提供されるものではない.では、これらのAPIはどこから来たのでしょうか.
​
実際、ブラウザはエンジンだけではありません.ブラウザが提供するWeb APIには、DOM、AJAX、settimeoutが含まれます.これらのWeb APIの呼び出しを制御するイベントキューとイベントループも存在する.
​
イベントキューと非同期コールバックの処理手順
JavaScript実行環境(Runtime)にはイベントキューがあります.
ボタンをクリックするなどのイベントが発生すると、DOMイベント、HTTPリクエスト、settimeoutなどの非同期関数はC++実装のWeb APIを呼び出し、Web APIはコールバック関数をイベントキュー(コールバックキュー)にプッシュする.イベントキューは、スタックが空の場合にイベントループを返します(スタックに入れます).イベントループの基本的な役割は、キューとスタックの2つの部分を観察し、スタックが空いているときにコールバックを実行することです.各メッセージおよびコールバックは、他のメッセージを処理する前に完全に処理されます.
ソース:https://new93helloworld.tistory.com/361?category=765705
非同期

function plus() {
  let a = 1;
  setTimeout( ()=>console.log(++a), 1000);
  return a;
}

const result = plus();
console.log('result :', result);  //?

同期+非同期+同期

const baseData = [1,2,3,4,5,6,100];

function sync() {
  baseData.forEach((v,i) => {
    console.log("sync ", i);
  });
}

const asyncRun = (arr, fn) => {
   arr.forEach((v,i) => {
     setTimeout( () => fn(i), 1000);
   });
}
 

function sync2() {
  baseData.forEach((v,i) => {
    console.log("sync 2 ", i);
  });
}

asyncRun(baseData, idx =>console.log(idx))
sync();
sync2();

非同期+非同期

const baseData = [1,2,3,4,5,6,100];

const asyncRun = (arr, fn) => {
   arr.forEach((v,i) => {
     setTimeout(() => {
       setTimeout(() => {
         console.log("cb 2");
         fn(i)
        },1000);
       console.log("cb 1");
     }, 1000);
   });
}

asyncRun(baseData, idx =>console.log(idx))