You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!
Property accessors provide access to an object's properties by using the dot notation or the bracket notation.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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. 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, you should leave white-space(s) before the dot preceding the method call, so that the dot is not 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
Bracket notation
get = object[property_name] object[property_name] = set
property_name
is a string or Symbol. It does not have to be a valid identifier; it can have any value, including 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 are string or Symbol. Any other value, including a number, is coerced to a string.
let object = {} object['1'] = 'value' console.log(object[1])
This outputs 'value'
, since 1
is coerced into '1'
.
let 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. Put another way, this
does not necessarily refer to the object containing a method. Instead, this
is "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 id
s of form controls. It is better to use bracket notation instead:
x = document.forms['form_name'].elements[strFormControl].value
Specifications
Specification | Status | Comment |
---|---|---|
ECMAScript Latest 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
Desktop | Mobile | Server | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Property accessors | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 3 | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 | nodejs Full support Yes |
Legend
- Full support
- Full support