JavaScriptの仕様を簡単にまとめました。

なにこれ

UdemyでJavaScriptの講座を受けて、知らなかったことが大量にあるのでドキュメント化して見返せるようにするためにまとめました。

内容

関数は先に読み込まれる。未定義はエラー。定義されてたらundifined
ホスティングは順番の問題らしい。

JavaScriptは実行する環境によって使える機能が異なる

ブラウザ環境

・ECMAScript + WebAPIs(DOM API) etc..

Node.js環境

・ECMAscript + CommonJS

universal JavaScript

色んな環境で動くJavaScript

即時関数

関数の最後に（）をつけると、すぐに読み込む

厳格な等価性

下記のコードは、変数aと変数bの型をチェックした後に、中身が一致するかチェックする。
下記の場合だと、エラーになる。数値と文字列だから。

a = “a”
b = 1
console.log(a === b);

下記はおk．抽象的な等価性だから、中身が一致してるかしかチェックしない。ザル。

a = "1";
b = 1;
console.log(a == b);

参照とconst

定数には再代入できないけど、定数内のオブジェクトには再代入できる。

const b = {
  prop: "hi",
};
// b = {}; // これを表示するとエラーになります。定数がすでに入ってるエラー
b.prop = "vue";
console.log(b);

参照と引数

引数でとった変数を参照すると、参照元も変更される。

let b = {
    prop: 0
}
function fn2(arg2) {
    arg2.prop = 1;
    console.log(b, arg2);
}
fn2(b);
// 出力結果：{prop: 1} {prop: 1}

分割代入

「{ a }」を使うと、参照元の影響を受けずに代入できる？要検証。用途が分からん

関数とは

実行可能なオブジェクト！
（）をつけると実行されるよ。
下記みたいにプロパティやメソッドを定義できるよ。

function a() {
    console.log('hello');
}
a.prop = 0;
a.method = function() {
    console.log('method');
}
console.log(a.prop);
// 出力結果：hello, method, 0

関数のreturn（すごーく当たり前だけど）

returnした変数の内容が入ってきます。

function fn(a) {
  const b = a;
  return b;
}

let c = fn(1);
console.log(c);

コールバック関数

引数で関数を渡して実行するみたいなイメージ

function bye() {
  console.log("bye");
}

function fn(cb) {
  cb();
}
fn(bye);

thisの豆知識（実用性なさそう）

window.nameで変数指定しなくてもthisで取ってこれる

window.name = "John2";
function a() {
  console.log("Hello " + this.name);
}
a();
出力結果：Hello John2

bind

引数を上書きします。bindによるthisの束縛とも言うらしい。メンヘラこっわ

function a(name) {
  console.log("hello " + name);
}
const b = a.bind(null, "Tim");
b(“AAA”);

function a() {
  console.log("hello " + this.name);
}
const b = a.bind({ name: "Tim" });
b("11");

// 出力結果：hello Tim（両方とも同じ結果）

applyとcallの違い

applyは配列、callはそれぞれ独立した変数。定数timの必要性は要検証

function a(name, name1) {
  console.log("hello " + name, name1);
}
const tim = { name: "Tim" };
a.apply(tim, ["Tim1", "Bob2"]);
a.call(tim, "Tim3", "Bob4");

// 出力結果：hello Tim1 Bob2, hello Tim3, Bob4

アロー関数

無名関数の省略記法。でも厳密に同じではない。returnの役割を理解したほうが良い。戻り値を定義しようね。
アロー関数はthisを取らない

const b = (name, name1) => {
  return "hi" + name + name1;
};
console.log(b("1", "2"));

アロー関数とthisの関係性

関数内にthisがあればそちらを参照、なかったら（？）グローバルを参照

window.name = "John";
const a = () => console.log("Bye " + this.name);
a(); // Bye John
const person = {
  name: "Tom",
  hello() {
    const c = () => console.log("Bye " + this.name);
    c(); // Bye tom
  },
};
person.hello();
function b() {
  const a = () => console.log("Bye " + this.name);
  a();
}
b(); // Bye John

コンストラクター関数

オブジェクトを生成するための関数

インスタンス化

オブジェクト化すること。newを使う

インスタンス

オブジェクトそのもの

プロトタイプ

メモリ化のためにprototypeを使う。Person.prototype === bob.prototype // true
つまり、インスタンス化した時にprototypeの参照がprotoにコピーされる

instanceof

どのコンストラクターから生成されたオブジェクトかを確かめる

関数の引数の余分なやつ

3番目は、関数のボディ部分になる（実行する内容）

const fn1 = new Function("a", "b", "return a + b");
const result = fn1(1, 2); // 3

プロトタイプ継承

プロトタイプで作ったものを継承できるよ。他に引数を追加したりできる。　

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.hello = function () {
  console.log("hello " + this.name);
};
function Japanese(name, age, gender) {
  Person.call(this, name, age);
  this.gender = gender;
}
Japanese.prototype = Object.create(Person.prototype);
const taro = new Japanese("Taro", 23, "Men");
console.log(taro);
taro.hello();

ビルドインオブジェクト

コード実行前にJSエンジンによって自動的に生成されるオブジェクト

ディスクリプター

プロパティの設定値。これによって値が変更できたり削除できたりする。すげえ

静的メソッド・スタティックメソッド

インスタンス化を行わずに使用できるメソッド

演算子と優先順位

演算に優先順位があり、++を行うタイミングで実行する順番が変わる

let a = 0;
let b = a++;
console.log(a, b);
// 出力結果：1 0

let a = 0;
let b = ++a;
console.log(a, b);
// 出力結果：1 1

for…of

イテレータを持つオブジェクトの反復操作を行う

イテレーターとは

反復操作を行う時に使用するオブジェクト（反復可能オブジェクト）。ルール有り。

ジェネレーターとは

イテレーターを生成するための特殊な関数（より簡略化して記述可能！）

スプレッド演算子

反復可能や列挙可能オブジェクトの展開を行う

スレッド

連続して実行される一本の処理の流れ（英語で糸と言う、2ちゃんのスレとかだね）

非同期処理

メインスレッドから一時的に切り離される処理

タスクキュー

実行待ちの非同期処理の行列➡️非同期処理の実行順を管理！先入れ先出しします。（商品管理かな？）

Promiseとは

非同期処理をよりかんたんに、可読性が上がるように書けるようにしたもの

マクロタスク

タスクキュート読んでいたもの。
下記がマクロタスク行き
・setTimeout
・setInterval

マイクロタスク

タスクキューとは別で存在する非同期処理の待ち行列（ジョブキュー）こいつの方が優先される？
下記がマイクロタスク行き
・Promises
・queueMicrotask

Async(Await)

Promiseを返却する関数の宣言を行う.Promiseを更に直感的に記述できるようにしたもの

Await

Promiseを返却する関数の非同期処理が完了するまで待つ.Promiseを直感的（略
awaitを使うとresolve(val)で渡された引数が受け取れるらしい。Promise内か明示的だと使えるよ！

Promiseの（メソッド？）あれこれ

・then 成功した時
・catch エラーの時。throw new Errorで投げられたらちゃんと受け取れ！
・finally 最後の時　引数取れない

モジュール

ソースコードを機能毎に分割してメンテナンスしやすくする仕組み。
代表的なものにESM(ESModule)とCSJ(CommonJS)があるよ〜