JavaScriptには、名前付けされたデータのコレクションを意味するオブジェクトという機能があります。
オブジェクトは、JavaScriptにおいて多くの側面に関連するため、早い段階でオブジェクトを理解しておくことが必要です。
今回は、オブジェクトとは何か、またオブジェクトの作成・参照方法について解説していきます。
オブジェクト
オブジェクトは、かんたんに言えばデータの集合体のことです。
1つのオブジェクトは複数のデータを持つことができ、さまざまな値を表現することができます。
オブジェクトをキャビネットとして表現した場合、キャビネットに収納されているファイルが各データに当たります。
プロパティ
オブジェクトの各データのことをプロパティと呼びます。
プロパティとは、キー（key）と値（value）がペアになったのものです。
キーは文字列、値にはあらゆるものを置くことができます。
| キー | 値 |
|---|---|
| name | Emma |
| age | 30 |
上記は、「name」と「age」というキーを持ったファイルが収納されているキャビネット（user）をイメージした例です。
ファイルにアクセスすることで、いつでもファイルの中身（Emmaや30）を参照したり、変更することができます。
メソッド
オブジェクトでは、異なる値や機能を持つ複数のプロパティを管理することができます。
プロパティの値には、文字列や数値などのプリミティブな値だけでなく、関数や配列などのオブジェクトの値を入れることができます。
値に関数を指定した場合、そのプロパティのことをメソッドと呼びます。
| キー | 値 |
|---|---|
| name | Emma |
| age | 30 |
| sayHi | function(){ return this.name; } |
例えば、sayHiというキーにアクセスすることで、値に格納されている関数を実行することができます。
オブジェクトの作成
ここまででオブジェクトがどのようなものなのかイメージすることができました。
次に、オブジェクトの作成方法について見ていきましょう。
オブジェクトは、以下の2つの構文を使って作成することができます。
const obj = new Object(); // オブジェクトコンストラクタ
const obj = {}; // オブジェクトリテラル
多くの場合、オブジェクトリテラルが使われており、この記事でもオブジェクトリテラル構文をもとに解説していきます。
オブジェクトリテラルの中には、プロパティを「キー:値」のようにコロン:で区切って記述すると、初期値を設定することができます。
const obj = {
'key': 'value' // キー:値
};
プロパティのキーはクォートを省略することができ、その方が簡潔になります。
const obj = {
key: 'value'
};
しかし、変数名のルールに沿っていないキーは、クォートで囲む必要があるため注意してください。
const obj = {
'key-1': 'value' // ハイフンは変数名に使用できないが、クォートで囲めばOK
};
複数のプロパティを記述する際には、それぞれのプロパティをカンマ,で区切ります。
const user = {
name: 'Emma', // カンマ要
age: 30, // カンマ要
job: 'Teacher'
};プロパティへのアクセス
オブジェクトは作成するだけでは意味がなく、アクセスしながらさまざまな操作を行います。
さいごに、プロパティのアクセス方法についても学んでいきましょう。
プロパティへのアクセスには、ドット記法.または、ブラケット記法[]を使う方法があります。
const obj = {
key: 'value'
};
console.log(obj.key); // "value" ドット記法
console.log(obj['key']); // "value" ブラケット記法
ドット記法
ドット記法では、変数名のルールのように、プロパティのキー名が指定のルールに沿っている必要があります。
const obj = {
name: 'Emma',
123: 456,
say-hi: 'Hi!'
};
obj.name; // OK
obj.123; // NG。数字のみ、数字からはじまるものは使用できない
obj.say-hi; // NG。ハイフンは使用できない
ブラケット記法
一方、ブラケット記法では、任意の文字列をキーに指定することができます。
あくまでキーは文字列として認識されるため、数値のみを指定した場合にも、暗黙的に文字列に変換されます。
const obj = {
name: 'Emma',
123: 456,
'say-hi': 'Hi!'
};
console.log(obj['name']); // "Emma"
console.log(obj[123]); // 456
console.log(obj['say-hi']); // "Hi!"
まとめ
今回は、オブジェクトの基本について解説しました。
まずは、これらの基本をおさえていきましょう。
// ポイント
* オブジェクトは、プロパティで管理されたデータのまとまり
* プロパティは、キーと値で構成される
* オブジェクトの作成には、主にオブジェクトリテラルを使い、初期値を設定できる
* プロパティのアクセスには、ドット記法かブラケット記法を用いる
以下の記事では、オブジェクトのさまざまな操作方法を紹介しています。
気になる方はチェックしてみてください。
オブジェクトは、1つの箱にデータを集めて管理する機能です。 JavaScriptでは、オブジェクトを扱っていく機会がたくさんあります。 今回はオブジェクトの操作方法に焦点を当てて解説します。 オブジェクトの作成とプロパティへのアクセス オブジェクトを作成するには、オブジェクトリテラル{}の中...
コメント