プロパティアクセサー

オブジェクトは実際には連想配列 (別名 map、 dictionary、 hash、 lookup table) とみなすことができます。この配列におけるキーはオブジェクトのプロパティ名です。

一般的に、オブジェクトのプロパティについて説明する際には、プロパティとメソッドを区別します。しかし、プロパティとメソッドの区別は慣習的なものにすぎません。メソッドは呼び出すことができるプロパティです (例えば、値として Function インスタンスへの参照を持っているようなものです)。

プロパティにアクセスするには、ドット表記法とブラケット表記法の 2 通りがあります。

object.property の構文では、 property は有効な JavaScript の 識別子でなければなりません。 (ECMAScript 標準では、プロパティの名前は技術的には "IdentifierNames" であり、 "Identifiers" ではないので、予約語を使用することができますがお勧めしません)。例えば、 object.$1 は有効であるのに対し、 object.1 は有効ではありません。

const variable = object.property_name;

object.property_name = value;

const object = {};

object.$1 = 'foo';
console.log(object.$1);  // 'foo'

object.1 = 'bar';        // SyntaxError
console.log(object.1);   // SyntaxError

ここで、 createElement というメソッドを document から取得し、呼び出します。

document.createElement("pre");

数値リテラルに対してメソッドを使用する場合で、その数値リテラルに指数や小数点がない場合、メソッド呼び出しをするドットの前にホワイトスペースを入れることで、ドットが小数点とみなされることを防ぐことができます。

77 .toExponential();
// or
77
.toExponential();
// or
(77).toExponential();
// or
77..toExponential();
// or
77.0.toExponential();
// 77.と77.0は同じものとして評価されます

object[property_name] の構文では、 property_name は文字列またはシンボルです。ですから、これは任意の文字列、例えば '1foo'、'!bar!'、または ' ' (空白) であっても構いません。

const variable = object[property_name];
object[property_name] = value;

これは前の例とまったく同じです。

document["createElement"]("pre");

ブラケット表記法の前には空白を入れることができます。

document ["createElement"]("pre");

プロパティ名は文字列またはシンボルです。それ以外の値は、数値を含めて、文字列へ強制変換されます。これは 'value' を出力します。 1 が '1' に強制変換されるからです。

let object = {};
object["1"] = "value";
console.log(object[1]);

こちらも 'value' を出力します。foo と bar は同じ文字列に変換されるからです。

let foo = { unique_prop: 1 },
  bar = { unique_prop: 2 },
  object = {};
object[foo] = "value";
console.log(object[bar]);

SpiderMonkey JavaScript エンジンでは、この文字列は "[object Object]" となります。

メソッドは、そのメソッドが所属するオブジェクトにバインドされているわけではありません。特に、 this はメソッド内で固定されていません。つまり、 this は必ずしもそのメソッドを含んでいるオブジェクトを参照しているとは限りません。 this は関数呼び出し時に「渡される」ものです。メソッドのバインドを参照してください。

JavaScript 初心者はしばしば、代わりにブラケット表記法を使えるところで eval() を使用してしまう間違いを犯します。

例えば、以下のような構文がたくさんのスクリプトで見られます。

x = eval("document.forms.form_name.elements." + strFormControl + ".value");

eval() は低速であり、可能な限り避けるべきです。また、 strFormControl は ID を必要としますが、フォームコントロールの名前と id は必須ではありません。代わりにブラケット表記法を使った方が良いでしょう。

x = document.forms["form_name"].elements[strFormControl].value;

• Object
• Object.defineProperty()
• オプショナルチェイニング