jsの基礎知識をまとめた学習記事です。
JavaScript
JavaScriptとは、ECMAscriptの使用に基づいて実装される言語。
ブラウザ
|-JavaScript
|-ECMAscript
|-WebAPI
オブジェクト
キーと値をペアで管理する入れ物。
{ num1: 1, num2: 10 }
メソッド
オブジェクトの中に格納された関数。
{ funA: function a(){
console.log("ok");
} }
グローバルオブジェクト
ｊｓエンジンによって生成されるコード内のどこからでもアクセスできる（あらかじめ設定されている）オブジェクト。ｊｓの実行前には、グローバルオブジェクト（window）とthisが用意される。
コンテキスト
文脈。コードの現在の実行状態。
・グローバルコンテキスト → 関数の外側。
・関数コンテキスト → 関数の内側。
コールスタック
jsがどのように処理を進めたのか追跡している。
検証ツール→Sources→CallStackここで確認できる。
スコープ
実行中のコードから値と式を参照できる範囲。
検証ツール→Sources→Scopeここで確認できる。
・自身のスコープよりも外側のスコープは参照可能。
・より内側のスコープの値が優先的に参照される。
let a = 0;
function b(){
//関数コンテキスト
console.log(this, arguments, a);
};
console.log(a);
console.log(b);
ホイスティング
コンテキスト内で宣言した変数や関数の定義をコード実行前にメモリーに配置すること。（コンテキストは、コードの現在の実行状態。）
ホイスティングが働いているので関数宣言の記述よりも上にその関数を呼び出す記述をしたとしてもちゃんと呼び出すことができる。（関数式は不可。）
※undefind→jsが用意している未定義という値。
クロージャー
関数が外部スコープ（レキシカルスコープ）で定義されている変数を使っている状態。
function a() {
num = 0;
function b() {
console.log(num);
}
}
即時関数
関数定義と同時に一度だけ実行される関数。
(function a(){
console.log("ok");
})()
undefindとnull
undefindは値が未定義。
nullは値が空。
暗黙的な型変換
jsは勝手に型の変換を行ってくれる。
const a = 1;
const b = "1";
c = a + b;
//"11"
上記の場合、aがstring型に変換されている。
==と===
==と===の違いは、型を比較するかしないか
const a = 1;
const b = "1";
a == b
//true
//==は型の比較をしない。
a === b
//false
//===は型の比較をする。
if(!a) { }
if(!a)の形でaがfalsyな値のときに{}内が実行される。
JavaScriptのデータ型
jsには８種類のデータ型がある。
//プリミティブ型（不変）
string
number
boolean
undefind
null
symbol
bigint
//オブジェクト型（可変）
object
let a = "Hello";
let b = a;
console.log(b);
//"Hello"
b = "Bye";
console.log(a);
//"Hello"
console.log(b);
//"Bye"
変数aは値を保持する。
const a = {prop: 1}
a.prop = 2
//constでオブジェクトそのものは再代入できないが、中の値には再代入できる。
const b = {prop: 1}
const c = {prop: 1}
console.log(b === c)
//false
//bとcはオブジェクトへの参照が格納されているのでfalseになる。
console.log(b.prop === c.prop)
//true
//中の値は同じなのでtrue
オブジェクトの参照
その他の型と違いオブジェクトは可変です。どういうことかというとオブジェクトの中身が変わった場合、すべてのオブジェクトの参照を保持している変数は影響を受けるということです。
オブジェクト以外の型なら不変なのでこのような影響は受けません。
オブジェクトは中身が変更されたら、そのオブジェクトへの参照を保持しているすべての変数に影響を与えることをおさえておきましょう。
ちなみにオブジェクト自体への参照がかわるだけなら他の変数に影響を及ぼしません。
