JavaScriptを習得したい

on Note

オブジェクトは変数や配列と比べると理解しやすい

変数は、1つの変数に対して値が1つ入る構図です。
let color = "black";

変数に複数の値を格納しようとしたものが配列です。
let size = ["S", "M", "L"];

配列ではデータが、何の分類もされずひたすら1方向に値が並ぶイメージです。

配列のイメージ画像

例えば
const array = ["山田太郎", 30];
という配列があったとします。「山田太郎」は名前であろうことは分かりますが、「30」は何をさしているのか分かりづらいです。

これをオブジェクトを使って格納すると、
const array = {name: "山田太郎", age: 30};
となり、「30」は年齢として格納されていることが分かります。

このように値に名前を付けて、属性の意味を持たせて格納する箱がオブジェクトです。名前と値をペアにして格納します。

オブジェクトもまた変数や配列と同じく、データの管理方法と言えます。

簡単なデータを一時的に入れておく箱として変数が便利です。複数のデータを入れる箱には配列が便利です。

オブジェクトもまた、多くのデータを入れておくのに便利な箱です。オブジェクトはデータだけでなく関数も格納することができます。

オブジェクトが扱うものにプロパティとメソッドがある

オブジェクトではデータを、名前と値をセットにして格納します。この、名前と値がセットになった状態のデータのことをプロパティと呼びます。

またオブジェクトは、データだけでなく関数も持つことができます。この場合、プロパティの値に関数が入る形です。この関数の部分をメソッドと呼びます。オブジェクトの中にある関数に対してメソッドと呼んでいるわけです。

オブジェクトのイメージ画像

よく使われる命令文で見てみます。
window.alert("abc");
「alert( )」がメソッドです。windowオブジェクトの中のメソッド、ということになります。

window.console.log("abc");
「log( )」がメソッドに当たります。windowオブジェクトの中のconsoleオブジェクトの中のメソッド、という感じになります。(「console」は正確にはインターフェースに分類される)

「window.」の部分は省略することができますので、
alert("abc");
console.log("abc");
と書くことがほとんどでしょう。

つまりオブジェクトは、中にプロパティとメソッドを持ちます。

オブジェクトとは何かをまとめると

多くのデータを格納したり、関数を持つことができる柔軟な箱がオブジェクトです。

オブジェクトの中で扱う、名前と値がセットになったデータをプロパティと呼びます。データと並行して格納された、機能的な部分をメソッドと呼びます。

オブジェクトはプロパティとメソッドを持ちます。