スキップしてメイン コンテンツに移動

オブジェクト入門:プロパティ

オブジェクト入門:プロパティ

オブジェクトの基礎

JavaScript初心者にとって、オブジェクトはデータを整理する基本的なデータ構造です。オブジェクトはキーと値のペアで構成され、キーは文字列(またはシンボル)で、値は任意の型を取ることができます。オブジェクトリテラルを使うと、簡単にオブジェクトを作成できます。

{ name: "太郎", age: 30, isStudent: false }

上記の例では、nameageisStudent がキーで、対応する文字列、数値、真偽値が値です。オブジェクトリテラルは波括弧で囲み、キーと値をコロンで区切り、ペア同士はカンマで区切ります。

プロパティと値

オブジェクトのプロパティは、キーと値の組み合わせです。プロパティにアクセスする方法は主に2つあります:ドット記法とブラケット記法です。

ドット記法

ドット記法は、キーが有効なJavaScript識別子(英数字とアンダースコア、ドル記号)である場合に使います。

const person = { name: "花子", age: 25 };
console.log(person.name); // 花子
console.log(person.age);  // 25

ブラケット記法

ブラケット記法は、キーが文字列として渡される場合や、変数でキーを指定したい場合に使います。キーがスペースや特殊文字を含む場合もブラケット記法が必要です。

const key = "favorite color";
const person = { "favorite color": "青" };
console.log(person[key]); // 青

ブラケット記法は、キーを文字列リテラルまたは変数で指定できる柔軟性がありますが、ドット記法よりも可読性が低くなることがあります。

メソッドとデータ構造

オブジェクトはプロパティだけでなく、関数をプロパティとして持つことができます。これをメソッドと呼びます。メソッドはオブジェクトの状態を操作したり、情報を取得したりするために使われます。

const calculator = {
  add(a, b) {
    return a + b;
  },
  subtract(a, b) {
    return a - b;
  }
};
console.log(calculator.add(5, 3)); // 8

上記のcalculatorオブジェクトは、addsubtractというメソッドを持っています。メソッド内でthisを使うと、オブジェクト自身のプロパティにアクセスできます。

const counter = {
  count: 0,
  increment() {
    this.count += 1;
  }
};
counter.increment();
console.log(counter.count); // 1

オブジェクトはデータ構造としても重要です。配列と組み合わせることで、リストやマップのような複雑な構造を簡単に表現できます。例えば、ユーザー情報を配列に格納し、各ユーザーをオブジェクトで表すと、検索やフィルタリングが容易になります。

この記事はAIによって作成されました。

コメント