JavaScriptのオブジェクトとは?基本の使い方から応用まで解説
JavaScriptでは、複数の情報を1つにまとめて扱うために「オブジェクト」というデータ構造が用意されています。
オブジェクトは、関連する情報をひとまとめにできるため、実用的で多くの場面で使われています。
この記事では、JavaScriptにおけるオブジェクトの基本的な作り方や使い方をわかりやすく解説します。
オブジェクトとは?
オブジェクトは、「名前(キー)」と「値」のペアをまとめたデータの集合です。
const user = {
name: "Taro",
age: 25,
isMember: true
};
このように、{ }
(波括弧)を使って定義し、プロパティをカンマで区切って記述します。
プロパティのアクセス方法
オブジェクトの中の値(プロパティ)には、次のいずれかの方法でアクセスします。
console.log(user.name); // "Taro"
console.log(user["age"]); // 25
通常は .
(ドット)でアクセスしますが、キー名が変数だったり、特殊な文字を含む場合は []
(ブラケット)を使います。
プロパティの変更・追加・削除
オブジェクトのプロパティは、後から自由に変更・追加・削除できます。
変更
user.age = 30;
追加
user.email = "taro@example.com";
削除
delete user.isMember;
オブジェクトのループ処理
オブジェクトのプロパティをすべて処理したい場合は、for...in
文を使います。
for (let key in user) {
console.log(key + ": " + user[key]);
}
Object.keys()
や Object.entries()
を使う方法もあります。
ネストされたオブジェクト
オブジェクトの中に、さらにオブジェクトを含めることができます。これを「ネストされたオブジェクト」と呼びます。
const book = {
title: "JavaScript入門",
author: {
name: "Sato",
age: 40
}
};
console.log(book.author.name); // "Sato"
メソッド(関数をプロパティに持つ)
オブジェクトの中に関数を持たせることもできます。これを「メソッド」と呼びます。
const dog = {
name: "Pochi",
bark: function() {
console.log("ワンワン");
}
};
dog.bark(); // "ワンワン"
まとめ
- オブジェクトは「キーと値」の組み合わせでデータを管理する構造
user.name
や user["age"]
で値にアクセス
- 後からプロパティの変更・追加・削除が可能
for...in
でループ処理ができる
- 関数をプロパティとして持たせることもできる(メソッド)
オブジェクトは、JavaScriptにおけるデータの基本的な構造です。
実際のアプリケーション開発でも頻繁に使われるので、しっかりと使い方を身につけておきましょう。