メソッドの基本！オブジェクトとプロパティ

JavaScriptには関数のほかにメソッドと呼ばれるものがあります。結論から言うとメソッドも関数の一種ですが、オブジェクトのプロパティに代入した関数のことを特別にメソッドと呼んでいます。オブジェクトとは、データと機能をまとめたもので、プロパティはオブジェクト内のデータのことを指します。これらについて順に説明していきます。

関連記事：関数の定義と呼び出し

オブジェクトとプロパティ

オブジェクトとは簡単に一言で言ってしまうと、異なる種類のデータを一つにまとめたものです。

たとえば「埼玉県に住んでいる太郎くん（男）、15歳」というデータがあった場合、それぞれのデータをtaroというオブジェクトにまとめることができます。

このとき、それぞれのラベル「name」「sex」「address」「age」をプロパティと呼び、それぞれに値を代入することができます。つまり、オブジェクトとは「キー（プロパティ名）」と、それに対する値を持った連想配列になっています。

実際にJavaScriptでオブジェクトを作るには次のような形が基本となります。

これに「埼玉県に住んでいる太郎くん（男）、15歳」というデータをはめるとこのようなコードとなります。

const taro = {
	name: '太郎',
	sex: '男',
	address: '埼玉県',
	age: 15
}

プロパティに入れた値は「オブジェクト名.プロパティ名」で取り出すことができます。たとえば、上記の値を一つずつ取り出したい場合は次のように記述します。

//名前を出力
console.log(taro.name);

//性別を出力
console.log(taro.sex);

//住所を出力
console.log(taro.address);

//年齢を出力
console.log(taro.age);

また、このときプロパティ名は指定せずにオブジェクト名だけで出力すると、それぞれのプロパティ名とそれに対応する値が出力されます。

「console.log(taro);」と記述した場合の出力例

{name: ‘太郎’, sex: ‘男’, address: ‘埼玉県’, age: 15}

メソッドとは

先述したように、オブジェクトの中にはプロパティと呼ばれるデータが連想配列の形で複数入っています。このプロパティには数値や文字列のほかにも、配列や関数などを入れることができます。そして、このとき関数を入れたプロパティのことをメソッドと呼びます。

たとえば、オブジェクト（taro）から年齢を取り出すメソッド「getAge()」を作る場合は次のようになります。

const taro = {
	name: '太郎',
	sex: '男',
	address: '埼玉県',
	age: 15,

	//年齢を取り出すメソッド
	getAge: function() {
		return this.age;
	}
}

//年齢を出力
console.log(taro.getAge());

また、オブジェクト内で関数を作るのではなく、先に関数を作っておき、その関数をプロパティに代入することもできます。上記のコードと同じ内容で、先に関数を作っておく場合は次のようになります。

//年齢を取り出す関数
function getAgeFunction() {
	return this.age;
}

const taro = {
	name: '太郎',
	sex: '男',
	address: '埼玉県',
	age: 15,

	//関数をプロパティに代入
	getAge: getAgeFunction
}

//年齢を出力
console.log(taro.getAge());

定義した関数をプロパティに代入する時には関数名にカッコをつけず、プロパティを使うときにはプロパティ名の後ろにカッコをつけます。