【JavaScript】基本的なことを言語化してまとめてみた

普段何気なく使っている仕組みや機能でも「説明して」って言われると、うまく言えないこともしばしば。・・・でも答えたい！
ということで、JavaScriptの基本的な部分を言語化してまとめてみました。

ホイスティング（巻き上げ）とは

変数や関数の定義（宣言）をコード実行前にメモリに配置すること。
これにより、宣言前の変数や関数の使用も可能になる。

クロージャーとは

一種の関数オブジェクト。
関数の中に関数が内包された状態において、外側の関数のスコープ内の必要な変数への参照と、自身の内部コードから成る内側の関数のこと。外側の関数はエンクロージャーと呼ぶ。
プライベート変数の定義ができたり、動的関数をつくれたりする。

thisとは

呼び出し元のオブジェクトを参照する。

call, apply, bindとは

bindはthisの参照先を指定できる。

applyとcallはthisの参照先を変更して実行する。その際の引数を第二引数で渡すことができる。
applyの第二引数は配列、callの第二引数は文字列等。

イベントループとは

JavaScriptエンジンに採用されているアルゴリズム。
「タスクの待機→タスクの実行→タスクの待機→タスクの実行」を無限にループする。
タスクが複数ある場合は、古いものから実行する。

イベントバブリングとは

子要素で起きたイベントが親要素に伝わっていくこと。
要素上でイベントが起きると、最初にそのハンドラが実行され、次にその親要素のハンドラが実行され、documentに到達するまで繰り返される（場合によっては、documentの上のwindowまで伝わることもある）。

例えば、子要素・親要素ともにクリックイベントが付与されていたとすると、「クリックイベント発生→子要素のクリックイベントハンドラ実行→親要素のクリックイベントハンドラ実行」という順になる。

event.stopPropagation()、event.stopImmediatePropagation()を使用すれば、イベントバブリングを止めることが可能。

キャプチャリングとは

バブリングとは逆で、イベントが要素へ下りていくフェーズ。
通常、クリックされると、キャプチャリングによってクリックイベントが要素を降りて行き、ターゲット要素に到着すると、逆にバブリングフェーズに入る。

詳しく知りたい場合はこちら

イベントデリゲーションとは

多くの要素に同じような処理を付与する場合、1つ1つの要素にハンドラを設定するのではなく、共通の親に1つのハンドラを置き、event.targetをハンドラで取得して処理判断を行うこと。

実行コンテキストとは

JavaScriptエンジンがスクリプトを実行するときに作成する実行環境のようなもの。

最初にスクリプトが実行されるとき、JavaScriptエンジンはグローバル実行コンテキストを作成し、グローバルオブジェクトやthisなどを作成する。
また、関数が呼び出されるたびに関数実行コンテキストを作成し、引数やthis、外部変数などのオブジェクトを作成する。

スクリプトはそこで作成されたオブジェクトを使用して処理を行う。

詳しく知りたい方はこちら

コールスタックとは

JavaScriptエンジンが実行コンテキストを管理するために使用するスタック状の仕組み（後入れ先出し/LIFO）。
コンテキストが作られたらコールスタックに格納され、そのコンテキスト部分の処理が終われば破棄（pop）される。

requireとimportの違い

requireはCommonJS、importはESModuleというモジュールシステム。
CommonJSは主にNode.jsで使用される。また、ESmoduleはES6で定められた。

var, let, constの違い

• var：再宣言・再代入OK、関数スコープは適用されるがブロックスコープは適用されない。
• let：再宣言不可、再代入OK
• const：再宣言も再代入もNG

詳しくはこちら

ajaxとは

非同期通信を行いながらインターフェイスの構築を行う実装方式。

Promiseとは

非同期処理の最終的な完了や失敗を表すオブジェクト。

コールバックとは

他のコードの引数として渡される関数。

スコープチェーンとは

あるスコープが他のスコープを含んでいる状態。

async, awaitとは

非同期処理を扱うためのもの。
asyncを関数に付与することで、内部の処理を非同期的に行える。
また、asyncの中でawaitは非同期処理が終わるまで、他の内部処理を待たせる。

プロトタイプベースのOOPとは

OOP（オブジェクト指向型プログラミング）は、主にクラスベースとプロトタイプベースに分かれる。Javaなどがクラスベースで、JavaScriptはプロトタイプベース。

クラスベースは、クラスという実体のないものと、それを実体化したインスタンスで基本的に構成される。

一方、プロトタイプベースでは実体のないクラスは存在せず、実体のあるオブジェクトしかない。そのため、どんなオブジェクトもプロトタイプになれるし、独自のプロパティやメソッドも追加することができる。

prototypeとは

JavaScript オブジェクトが互いに機能を継承する仕組み。
あるオブジェクトのインスタンスと、そのプロトタイプ(proto プロパティ)がリンクされている。

プロトタイプチェーンとは

オブジェクトのプロトタイプ（protoプロパティ）が継承され、リンクされていること。

メソッドやプロパティを呼び出す際、まずはそのオブジェクト自体にそのメソッド・プロパティがないか探すが、見つからない場合は紐づいているプロトタイプを探しにいく。この捜索は、該当のメソッド・プロパティが見つかるか、プロトタイプチェーンが終わるまで行われる。

use strictとは

デフォルトでは許容している一部の処理（バグを生みやすい処理）をエラーにする。
スクリプト全体に適用することもできるし、指定した関数内部でのみ適用することも可能。

• 宣言されていない変数の使用
• 書き込み不可の変数への書き込み
• 削除不可プロパティの削除

ES6に追加された機能は

• アロー関数
• let, const 追加
• classの継承ができるようになった
• スプレッド構文追加
• Promiseオブジェクトの追加

etc…

nullとundefiendの違い

nullは「何もない/存在しない」という意図的に情報を持つ。
undefinedは未定義といった意味を持つ。メモリは割り当てられているが、値が入っていない状態。

==と===の違い

==は異なる型を比較する際、型変換して比較する。
===は、型変換は行わず、その型も含めて同値かどうか判断する。

webpackとは

JavaScriptのモジュールバンドラ。
ローダーを使用すると、HTML、CSS、画像などもバンドルできる。

npmとyarnの違い

どちらもパッケージマネージャー。
yarnが後発でfacebookによって作られたもの。npmよりも処理速度が速かったり、セキュリティが強かったり、サブコマンドが短かったりする。

package.jsonとlockファイルの違い

package.jsonはバージョンも含めたパッケージ要件が記録されている一方、lockは要件を満たした上で、実際にインストールし使用されているバージョンなどのデータが入っている。