【JavaScript】オブジェクト - プロパティとメソッドの集合体
JavaScriptのオブジェクトをご紹介します。
オブジェクト
オブジェクトはプログラミング上で表現したモノ（物）です。
一般的にオブジェクト指向プログラミングと呼ばれるアプリケーションの設計思想と合わせて使います。
オブジェクト指向プログラミングは奥が深く、理解するには膨大な知識が必要なため、説明を割愛します。
ここではオブジェクトそのものについてご紹介します。
概要
オブジェクトはプロパティやメソッドの集合です。
数値や文字列と同様にobject型の変数や値として扱うことができます。
プロパティ
プロパティはオブジェクトが所有する値（数値や文字列など）のことです。
メソッド
メソッドはオブジェクトが所有する処理のまとまりです。
関数のように定義し呼び出すことができます。
生成
基本構文
{}オブジェクトは波括弧（{}）で記述します。
サンプル
let x = {};
console.log(typeof(x));object{}でオブジェクトを定義し、変数xに代入しています。
コンソール結果からもobject型の値であることが分かります。
プロパティ
オブジェクトにプロパティを定義できます。
初期値
オブジェクトの生成時にプロパティを定義できます。
{
プロパティ名: プロパティ値,
プロパティ名: プロパティ値,
プロパティ名: プロパティ値
}プロパティは名称と値のセットです。
複数ある場合はカンマ（,）で区切り定義します。
サンプル
let person = {
name: "tanaka",
age: 20,
height: 170
};
console.log(person);{name: 'tanaka', age: 20, height: 170}プロパティの記憶
プロパティの追加や値の更新が可能です。
基本構文
変数.プロパティ名 = 値追加、更新するプロパティを変数（object型）とプロパティ名をドット（.）で繋げて指定します。
指定プロパティに代入演算子を使って値を記憶します。
指定プロパティが既に存在する場合は値の更新、存在しない場合はプロパティの追加となります。
サンプル
let person = {
name: "tanaka",
age: 20,
height: 170
};
console.log(person);
person.age = 24;
person.weight = 60;
console.log(person);{name: 'tanaka', age: 20, height: 170}
{name: 'tanaka', age: 24, height: 170, weight: 60}コンソール結果からageプロパティを更新し、weightプロパティを追加したことが分かります。
プロパティの取得
プロパティの値を取得できます。
基本構文
変数.プロパティ名値を取得するプロパティを変数（object型）とプロパティ名をドット（.）で繋げて指定します。
サンプル
let person = {
name: "tanaka",
age: 20,
height: 170
};
console.log(person.name);tanakaメソッド
オブジェクトにメソッドを定義できます。
初期値
オブジェクトの生成時にメソッドを定義できます。
{
メソッド名: function( 引数値 ) {
// 処理........
return 値;
},
メソッド名: function( 引数値 ) {
// 処理........
}
}メソッドは名称と処理のセットです。
複数ある場合はカンマ（,）で区切り定義します。
サンプル
let person = {
greeting: function() {
console.log("Hello");
},
addition: function( a, b ) {
let total = a + b;
console.log( a + " + " + b + " = " + total);
}
}
console.log(person);{greeting: ƒ, addition: ƒ}メソッドの呼び出し
メソッドを呼び出し、処理を実行することができます。
基本構文
変数.メソッド名()呼び出すメソッドを変数（object型）とメソッド名をドット（.）で繋げて指定します。
サンプル
let person = {
greeting: function() {
console.log("Hello");
},
addition: function( a, b ) {
let total = a + b;
console.log( a + " + " + b + " = " + total);
}
}
person.greeting();
person.addition(5, 8);Hello
5 + 8 = 13メソッドの記憶
メソッドの追加や更新が可能です。
基本構文
変数.メソッド名 = function( 引数値 ) {
// 処理.......
}追加、更新するメソッドを変数（object型）とメソッド名をドット（.）で繋げて指定します。
指定メソッドに代入演算子を使って無名関数を記憶します。
指定メソッドが既に存在する場合は更新、存在しない場合は追加となります。
サンプル
let person = {
greeting: function() {
console.log("Hello");
},
addition: function( a, b ) {
let total = a + b;
console.log( a + " + " + b + " = " + total);
}
}
person.greeting();
person.greeting = function() {
console.log("Hey!");
};
person.subtraction = function( a, b ) {
let result = a - b;
console.log( a + " - " + b + " = " + result);
}
person.greeting();
person.subtraction(5, 8);
console.log(person);Hello
Hey!
5 - 8 = -3
{greeting: ƒ, addition: ƒ, subtraction: ƒ}コンソール結果からgreetingメソッドの更新とsubtractionメソッドの追加を確認できます。
集合体
オブジェクトに複数のプロパティとメソッドを所有することができます。
let person = {
name: "tanaka",
age: 20,
height: 170,
greeting: function() {
console.log("Hello");
},
addition: function( a, b ) {
let total = a + b;
console.log( a + " + " + b + " = " + total);
}
};
console.log(person);
console.log(person.name);
person.greeting();{name: 'tanaka', age: 20, height: 170, greeting: ƒ, addition: ƒ}
tanaka
Hello連想配列とブラケット記法
連想配列はオブジェクト型です。
JavaScriptではオブジェクト型を使い、プログラム上に連想配列を実現します。
プロパティのアクセス（値の追加・更新・取得）はドット（.）を使うドット記法と角括弧（[]）を使うブラケット記法があります。
ドット記法は上記で説明したものになりますが、連想配列では一般的にブラケット記法を用います。
let data = {};
data["name"] = "tanaka";
data["age"] = "20";
data["height"] = "170";
console.log(typeof(data));
console.log(data);object
{name: 'tanaka', age: '20', height: '170'}
