Our volunteers haven't translated this article into عربي yet. Join us and help get the job done!
Property accessors provide access to an object's properties by using the dot notation or the bracket notation.
Syntax
object.property object["property"]
Description
One can think of an object as an associative array (a.k.a. map, dictionary, hash, lookup table). The keys in this array are the names of the object's properties. It's typical when speaking of an object's properties to make a distinction between properties and methods. However, the property/method distinction is little more than a convention. A method is simply a property that can be called, for example if it has a reference to a Function instance as its value.
There are two ways to access properties: dot notation and bracket notation.
Dot notation
get = object.property; object.property = set;
In this code, property
must be a valid JavaScript identifier, i.e. a sequence of alphanumerical characters, also including the underscore ("_
") and dollar sign ("$
"), that cannot start with a number. For example, object.$1
is valid, while object.1
is not.
document.createElement('pre');
Here, the method named "createElement" is retrieved from document
and is called.
If you use a method for a numeric literal and the numeric literal has no exponent and no decimal point, leave white-space(s) before the dot that precedes the method call to prevent the dot from being interpreted as a decimal point.
77 .toExponential(); // or 77 .toExponential(); // or (77).toExponential(); // or 77..toExponential(); // or 77.0.toExponential(); // because 77. === 77.0, no ambiguity :p
Bracket notation
get = object[property_name]; object[property_name] = set;
property_name
is a string. The string does not have to be a valid identifier; it can have any value, e.g. "1foo", "!bar!", or even " " (a space).
document['createElement']('pre');
This does the exact same thing as the previous example.
A space before bracket notation is allowed.
document ['createElement']('pre');
Property names
Property names must be strings. This means that non-string objects cannot be used as keys in the object. Any non-string object, including a number, is typecasted into a string via the toString method.
var object = {}; object['1'] = 'value'; console.log(object[1]);
This outputs "value", since 1 is type-casted into '1'.
var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {}; object[foo] = 'value'; console.log(object[bar]);
This also outputs "value", since both foo and bar are converted to the same string. In the SpiderMonkey JavaScript engine, this string would be "['object Object']".
Method binding
A method is not bound to the object that it is a method of. Specifically, this
is not fixed in a method, i.e., this
does not necessarily refer to an object containing the method. this
is instead "passed" by the function call. See method binding.
Note on eval
JavaScript novices often make the mistake of using eval where the bracket notation can be used instead. For example, the following syntax is often seen in many scripts.
x = eval('document.forms.form_name.elements.' + strFormControl + '.value');
eval
is slow and should be avoided whenever possible. Also, strFormControl
would have to hold an identifier, which is not required for names and IDs of form controls. It is better to use bracket notation instead:
x = document.forms["form_name"].elements[strFormControl].value;
Specifications
Specification | Status | Comment |
---|---|---|
ECMAScript 2017 Draft (ECMA-262) The definition of 'Property Accessors' in that specification. |
Draft | |
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Property Accessors' in that specification. |
Standard | |
ECMAScript 5.1 (ECMA-262) The definition of 'Property Accessors' in that specification. |
Standard | |
ECMAScript 1st Edition (ECMA-262) The definition of 'Property Accessors' in that specification. |
Standard | Initial definition. Implemented in JavaScript 1.0. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |