今回はオブジェクトのプロパティやメソッドを操作してみます。

---

１　プロパティとオブジェクトについて

　まず、プロパティの定義を振り返ります。

HTML（一部）

<script>
    let tri = {
        name : "",
        base : 0,
        height : 0,

    }

　何かに似ていると思われた方は、こちらをご覧ください。

HTML（一部）

<script>
    let week = {Sunday:"日曜日", Monday:"月曜日", Tuesday:"火曜日"};

　これは連想配列の定義です。
　プロパティの定義と連想配列の定義の仕方は、同じであることがわかります。

　次はメソッドです。

HTML（一部）

<script>
    let tri = {

        calcArea : function() {
            return ( this.base * this.height ) / 2 ;
    }

　何かに似ていると思われた方は、こちらをご覧ください。

HTML（一部）

<script>
    const f = function(x, y){
        return x + y;
    }

　これは無名関数の定義です。
　メソッドの定義と無名関数の定義の仕方は、ほぼ同じであることがわかります。
　オブジェクトのメソッドはプロパティと同様に、連想配列のひとつの要素として付与されたものです。
　したがって、メソッドとは「オブジェクトが、プロパティとして持っている関数」ということができます。

---

２　追加と削除

　プロパティが連想配列と同じであれば、同じように追加や削除ができるはずですね。
　オブジェクトのプロパティについて整理できたところで、実際に操作していきましょう。

HTML（一部）

<script>
    let a = {};
    a.name = "りんご";
    document.write("<p>" + a.name + "</p>");
    a.price = 100;
    document.write("<p>" + a.price + "</p>");
</script>

ブラウザ

　それぞれ name、price というプロパティと、その値である「リンゴ」（文字列）、「100」（数値）が追加されていますね。

HTML（一部）

<script>
    let b = {};
    b.name = "りんご";
    b.price = 100;

    delete b.name;
    document.write("<p>" + b.name + "</p>");
    document.write("<p>" + b.price + "</p>");
</script>

ブラウザ

　delete でプロパティの削除ができます。
　まず、<script> 以下１行目でオブジェクト b をつくり、２行目以下でオブジェクトとその値を追加しています。
　そして４行目で name プロパティ自体を削除しています。
　値の更新ではありません。
　そして、そのプロパティの出力を実行すると、（この環境では）プロパティがない旨が表示されます。

　なお、メソッドも同様に操作することができます。

---

３　次回

　今回はオブジェクトのプロパティ及びメソッドの概念の復習と、追加・削除でした。
　次回は、さらに効率的にオブジェクトを扱うことのできる、「クラス」に取り組んでいきます。