【JavaScript】オブジェクトと関数の理解。オブジェクトの中に関数を入れる方法

#【JavaScript】オブジェクトと関数の理解。オブジェクトの中に関数を入れる方法

オブジェクト、関数、オブジェクト+関数を整理してみました。

##オブジェクト
プロパティ名と値のセットで保存されるデータの入れ物。
例えるならロッカー（ロッカーNOと中身）や住所録（住所と住人）。

###オブジェクトの書き方

    const 定数名 = {
        プロパティ名: 値,
        プロパティ名: 値,
    }

名前(name)とHP(hp)が登録された定数userListの場合

    const userList = {
        name: "aaa",
        hp: 123
    }

console.log(userList);で出力すると

    {name: "aaa", hp: 123}

と表示される。
".プロパティ名"で階層を深く調べることができる
console.log(userList.name);は'aaa'
console.log(userList.hp);は123を表示する

RPGツクールMVもオブジェクトで管理されている。
たとえばアクター1番の$gameActors.actor(1)には以下の情報が格納されている。

    Game_Actor {_hp: 105, _mp: 40, _tp: 0, _paramPlus: Array(8), _states: Array(0), …}

##関数
実行処理を名前で呼び出せるようにまとめたもの。
例えるなら自販機（実行処理に従って、押したボタンに対応した商品が出てくる）。

詳細は以下にて。
【JavaScript】function構文とアロー関数の違い、省略した書き方について
https://qiita.com/kuro_96/items/412d9b9ce1552beb405f

###関数の書き方

const 関数名 = (引数) => {
    実行内容;
}

関数名();で関数の処理を実行。

    const greet = () => {
        console.log("Hi!");
    }
    greet();

実行結果は"Hi!"と表示される。

##オブジェクトの中に関数

オブジェクトのプロパティに関数、値に関数の実行部分を記述することで、オブジェクトを指定して、関数を実行することができる。
例えるなら、住所を指定して、住人に定型文で挨拶するようなもの。

上で書いたオブジェクトuserListと関数を組み合わせる場合

オブジェクトuserList

    const userList = {
        name: "aaa",
        hp: 123
    }

関数greet

    const greet = () => {
        console.log("Hi!");
    }
    greet();

userListにgreetプロパティを作り、値の箇所でgreetの実行部を記述する

    const userList = {
        name: "aaa",
        hp: 123,           //プロパティgreetを追加するために末尾に","を追加
        greet: ()=>{
            console.log("Hi!");
        }
    };
    userList.greet();

実行結果はHi!となる。
これだけだと礼節に欠けるので、自分の名前を名乗ることにする。
greetの値から見てuserListのnameなので、userList.nameと書けばよい。

    const userList = {
        name: "aaa",
        hp: 123,
        greet: () => {
            console.log(`Hi! I'm ${userList.name}.`);
        }
    };
    userList.greet();

実行結果はHi! I'm aaa.となる。
さらに紳士たるMr.aaaは構文をすっきりさせた。

    const userList = {
        name: "aaa",
        hp: 123,
        greet: () => console.log(`Hi! I'm ${userList.name}.`)
    };
    userList.greet();