などの疑問や悩みを解決してまいります。
オブジェクトが苦手な方、学習しているが理解できず挫折してしまう方など、オブジェクトの理解に苦戦されている方はいると思います。
自分もJavaScriptを学び始めの頃は、オブジェクトをなかなか理解できずに苦しんだ思い出があります。
今回はJavaScript初心者の方に向けて、オブジェクトと使い方について解説していきたいと思います。
オブジェクトとは
オブジェクトは、入れ物である箱と、箱の中に入っている中身で成り立っています。
箱の中にどんなものが入っているのか分かるように、入れ物には名前をつけて必要なときに取り出していきます。
箱の中に入っている中身すなわち内容物のことをプロパティ(property)と呼びます。
オブジェクトの宣言
オブジェクトは {}
(中括弧)を使って定義でき、これはオブジェクトリテラルという一般的なオブジェクトの宣言方法です。
let myObject = {};
このオブジェクトはまだ中身が空っぽですが、中にプロパティを追加することで、データを保持することができます。
プロパティはキーと値の組み合わせで構成され、キーは文字列や数値などで、値にはさまざまなデータ型(文字列、数値、他のオブジェクトなど)が入ります。
例えば、name
というプロパティを持つオブジェクトを作成し、それに文字列の値を割り当てると以下のようになります。
let person = {
name: 'John Doe'
};
このようにして、オブジェクトを定義し、プロパティを追加することで、複雑なデータ構造を作成できます。
プロパティの作成とアクセス方法
前項では1つのプロパティを追加したコード例を紹介しましたが、ここでは複数のプロパティの指定と、そのアクセス方法を解説していきます。
複数のプロパティを指定する場合はカンマ「,
」で区切りで記述していきます。
let person = {
name: 'Alice',
age: 30,
job: 'Engineer'
};
オブジェクトのプロパティにアクセスするには、ドット演算子 .
もしくはブラケット記法 []
を使用します。
console.log(person.name);
// 'Alice'
console.log(person['age']);
// 30
どちらの方法でも同じ結果を得ることができます。
ブラケット記法は、特に変数を使用して動的にプロパティにアクセスする際に便利です。
メソッドの作成と呼び出し方
メソッドは、オブジェクト内で関数を定義することで作成されます。
複数定義する場合はプロパティ同様カンマ「,
」で区切ります。
let calculator = {
add: function(a, b) {
return a + b;
},
subtract: function(a, b) {
return a - b;
}
};
メソッドを呼び出すには、オブジェクト名の後にドット演算子 .
を使ってメソッド名を指定し、括弧 ()
をつけて呼び出します。
console.log(calculator.add(5, 3));
// 8
console.log(calculator.subtract(7, 2));
// 5
オブジェクトを車で例えて宣言してみる
オブジェクトの内容を何かに例えるとした場合は、「車」が一番例として挙げやすいです。
車をオブジェクトに例えると以下のような内容になります。
let car = {
brand: 'Toyota',
model: 'VOXY',
year: 2022,
color: 'white',
start: function() {
console.log('Engine started!');
},
stop: function() {
console.log('Engine stop!');
}
};
このcar
オブジェクトは、ブランド(brand
)、モデル(model
)、製造年(year
)、色(color
)などのプロパティがあります。
また、start
とstop
いうメソッド(関数)も備えており、これを呼び出すことでエンジンを始動・停止することができます。
car.start();
// Engine started!
car.stop();
// Engine stop!
このように、オブジェクトはデータをまとめ、それに対する操作や機能を定義するための便利な仕組みです。
オブジェクト内での this の使い方と意味
JavaScriptの this
は、特定のコンテキスト内で呼び出されたときに、そのコンテキスト自体を指す特殊なキーワードです。
主にグローバルコンテキストと関数コンテキストなどがあります。
特にオブジェクト内で this
を使用する場合、そのオブジェクト自体を参照するために利用されます。
考え方として、this
は呼び出し元であるオブジェクトを指します。
以下は this
の使用例です。
let car = {
brand: 'Toyota',
model: 'Voxy',
start: function() {
console.log('Engine started for ' + this.brand + ' ' + this.model);
}
};
car.start();
// 'Engine started for Toyota Voxy'
この例では、start
メソッド内で this.brand
と this.model
を使用しています。
this
を使うことで、そのメソッドが呼ばれた時点の car
オブジェクトにアクセスし、そのプロパティの値を表示しています。
注意ポイント
注意が必要な点として、this
の値は実行コンテキストによって変わることがあるため、関数を別のコンテキストで呼び出す場合には挙動が変わる可能性があります。
オブジェクトのループ処理について
オブジェクトのプロパティを反復処理する方法として for...in
ループが利用されます。
このループはオブジェクト内の各プロパティを順番に取り出し、そのキーに対応する値に繰り返しアクセスすることができます。
let car = {
brand: 'Toyota',
model: 'Camry',
year: 2022
};
for (let key in car) {
console.log(key + ': ' + car[key]);
}
// brand: Toyota
// model: Camry
// year: 2022
key
にオブジェクトのキー名を代入しているためcar[key]
でそのキーの値を出力しているのですね。注意ポイント
car.key
のようにドットを使った場合、key
が変数であっても文字列として解釈されないためブラケット記法を使っています。