1朕非同期コード例

console.log('하나'); // 1. 

// 1초 뒤에 첫번째 인자로 들어간 콜백 함수를 실행한다.
setTimeout(function() {
  console.log('셋'); // 3.
}, 1000);
// 첫번째 인자 : 특정 함수의 인자로 들어가는 함수 '콜백 함수'
// 두번째 인자 : 1000ms -> 1초(second)

console.log('둘'); // 2. 

🤔 どうしてそうするの?

2朕コールバック関数

//  ☑️ 동기 콜백의 예제

function greeting(name) { 
  console.log( '안녕하세요' + name); // 4. 콘솔 로그 출력
}

function processUserInput(callback) { 
  const name = prompt('이름을 입력해주세요'); // 2. prompt로 이름을 입력받는다.
  callback(name); // 3. 인자로 받은 콜백 함수를 호출한다
}

processUserInput(greeting); // 1. 함수에 함수를 인자로 넣어준다.

3朕JavaScriptエンジン

▼JavaScriptエンジンは、JavaScriptコードを解釈して実行する「interpreter」です。

各ブラウザには異なるエンジンタイプがあります。

▼JavaScriptエンジンは大きく「hip」と「呼び出しスタック」に分けられる。

「JavaScriptは単一スレッド言語」

=>1つの呼び出しスタックのみを使用

=>同時に一つのことしか処理できません。

4」Webブラウザの構成

プルトニウムイベントループ

▼呼び出しスタックと呼び出し行列をじっと見つめていた。

▼呼び出しスタックが空の場合は、コールバックキューのコールバック関数を呼び出しスタックに入る順に入れます。

5π

👀 非同期とtry-catch

document.querySelector('.btn').click(function() { // (A)
  try {
    $.getJSON('/이런저런 주소', function(res) { // (B)
      // 여기서 에러 🚨
    });
  } catch (e) {
    console.log('속보) 에러 발생: ' + e.message);
  }
});

try-catchでBで発生したエラーをキャプチャしたい場合は、答えは簡単です。

document.querySelector('.btn').click(function() { // (A)
  $.getJSON('/이런저런 주소', function(res) { // (B)
    try {
      // 여기서 에러 🚨
    } catch (e) {
      console.log('속보) 에러 발생: ' + e.message);
    }
  });
});

🌐 リファレンスリンク