JavaScriptメカニズム（定数、関数、オブジェクト）

参考

【JS】ガチで学びたい人のためのJavaScriptメカニズム

あらすじ

現場でrailsを触ってlaravelを触って今はtypescriptとreact-routerで実装することが多くなってきたが、今までJavascriptをがっつり勉強してなかったので復習も兼ねて上記講座を受けてみようと思った。

とある先輩から「エンジニアじゃない人間が聞いてもわかる程度の説明にしろ」という言葉をいただいたので、できるだけ頑張る。

そもそもの確認

変数

箱。入れ物のイメージ。主に以下３つを使って宣言

• var(非推奨。使わないで)
• let
• const

varは現在非推奨。
letは再代入可能（let A = hoge, letA = fugaが可能）。
constは再代入不可能。

varが非推奨の理由は「再宣言」、「再代入」、スコープを飛び越えるため。
var A = hogeをした後にvar A = hogeも可能だし
var A = hogeの後にvar A = fugaが可能なこと。
また、実装してるとここだけしか使いたくない！って場面（ブロックだったりスコープ）をvarは突き破ってくる。
また、var A (イコール書かない、代入なし)でもundefinedになる。これがエラーとして出ないから怖い。

現状、今はconstでなんでも定義してしまうのがいい。
constは再宣言、再代入ができない、巻き上げ（最初に宣言してるふうに見せる）ができないようになっているので、ガッチリ書かないといけない。

letは再代入可能なので使うとしたら今はfor文くらいな印象

let A = hoge;
A = koushinsitayo;
console.log(A) //koushinsitayoになる

for (let i = 0; i < 3; i++) {
    console.log(i); // 0, 1, 2
    // iを繰り返し代入してる
}

また、let、constはブロックスコープが適応される。（解説は後ほど）
結論、constを使おう。

関数

一連の手続き（処理）を実行する文の集まり。

function fn(A){
  console.log(A);
  return A + 1;
}

fn(A);

Aが仮引数。関数に変数を渡すときに使う。
下のfn(A)のAが実引数という。
これはconsole.logというログに出力するコマンドとA+1の内容が返ってくる。これを戻り値という。
fn(A)はA+1が出力されるということ。

オブジェクト

一言で言うとキーとバリュー。
キーが値札みたいなもので、バリューが売り物みたいなイメージ。
ドット記法（obj.prop1）またはブラケット記法（obj['prop1']）でアクセス可能

const obj = {
    prop1: 'value1',
    prop2: function() {
        console.log('value3');
    },
    prop3: {
        prop4: 'value5'
    }
}

obj.prop2();           // 'value3'と出力
obj.prop6 = 'value6'; // 新しいプロパティを追加（constでもプロパティの追加は可能）
console.log(obj.prop3.prop4); // 'value5'と出力
console.log(obj) //prop1: 'value1',prop2....のように全て取得できる

基本はドット記法で書きたいが、ブラケットで書く場面もごく稀に。

• キーに空白がある場合
• for文でプロパティ名を作る場面（まだ１回くらいしか体験がない）

const obj = {
    'first-name': 'John',
    'my age': 30
};

console.log(obj['first-name']);  // "John"
console.log(obj['my age']);      // 30

for(let i = 1; i <= 3; i++) {
    const propertyName = `item${i}`;
    obj[propertyName] = `value${i}`;
}
// 結果：
// {
//   item1: "value1",
//   item2: "value2",
//   item3: "value3"
// }