LoginSignup
0
0

動画付きでイベントループの仕組みを解説した記事の紹介

Last updated at Posted at 2024-04-30

背景

イベントループの勉強を放置してしまっていました。
GWを生かし消化しようと思います。

紹介

こちらの記事で紹介されていた以下引用元の記事を紹介します

youtubeは以下です!

lydiahallieさんのXはこちらです!

自分用の用語まとめ

~実行コンテキストとは~
JavaScriptエンジンがスクリプトファイルをスキャンするときに作る環境です。
この環境の中でコードの変換と実行全体を処理します。

実行コンテキストには、グローバルと関数の2種類があります。

  • グローバル実行コンテキスト
    JavaScriptスクリプトが最初に実行を開始するときに作成され、JavaScriptのグローバルスコープを表します
  • 関数実行コンテキスト
    関数が呼び出されるたびに作成され、関数のローカルスコープを表します

~JavaScriptエンジンとは~
JavaScriptコードを実行し、コンピュータが理解できる言語に変換するコンピュータプログラムです
image.png
引用元

~スタックとは~
線形データ構造であり、特定の順序で処理が実行されます。
その順序はLIFO(Last In First Out)またはFILO(First In Last Out)です。
LIFOは最後に挿入された要素が最初に出てくることを意味し、FILOは最初に挿入された要素が最後に出てくることを意味します。

コールスタックの順序はLIFOです。

image.png
引用元

jsでのスタック(LIFO)のサンプルコード
Implementation of Stack in JavaScript

~線型データ構造とは~
データ構造の一種で、データ要素が順次または線形に配列されたものです。
各要素は、最初と最後の要素を除いて、前と次に隣接しています。

参考

参考

〜非同期〜
他の関数や操作と並行して実行されること

参考

参考

〜キューとは〜
キューは、データを特定の順序で格納・管理するために用いられます。キューは"First in, First out"(先入れ先出し)の原則に従い、キューに最初に追加された要素が最初に削除されます。

キューの基本操作

  • エンキュー(挿入): キューに要素を追加します
  • デキュー(削除): キューから要素を削除して返します

image.png
引用元

jsでのキューのサンプルコード
Implementation of Queue in Javascript

参考
Queue Data Structure

タスクキューはコールバックキュー、マクロタスクキューとも言うそうです。
参考

〜プロミス〜
非同期操作の最終的な完了(または失敗)とその結果の値

参考

〜MutationObserver〜
DOMツリーに加えられた変更を監視します

〜DOM〜
ウェブ・ドキュメントのためのプログラミング・インターフェースです。ドキュメントの構造をオブジェクトのツリーとして表し、各オブジェクトは要素や属性、テキストといったドキュメントの一部に対応しています。

〜queueMicrotask〜
ブラウザのイベントループに制御が戻る前に、安全なタイミングで実行されるマイクロタスクをキューに入れます。

参考

〜応答性〜
与えられた時間内に割り当てられたタスクを完了するシステムまたは機能の具体的な能力
〜一貫性〜
🙇‍♂️調査中です、解釈でき次第まとめます

参考

〜PromiseState〜
thenメソッドへの着信に対してプロミスがどのように反応するかを制御する、つまりPromiseオブジェクトの状態です

〜PromiseResult〜
プロミスが解決または拒否された値です。PromiseStateがPENDINGでない場合のみ意味があります。

〜PromiseFulfillReactions〜
プロミスがPENDING状態からFULFILLED状態に遷移した場合に処理されるレコード

参考

dynamicの意味

本記事を読んで頂き、ありがとうございました。
いいねいただけると記事執筆の励みになりますので、参考になったと思われた方は是非よろしくお願い致します🙏

0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0