Property accessors

Διαβάζετε την αγγλική έκδοση αυτού του περιεχομένου, καθώς δεν διατίθεται ακόμη σε αυτή τη γλώσσα. Βοηθήστε μας να μεταφράσουμε αυτό το άρθρο!

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. 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 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 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

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
Property accessorsChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support YesSafari Full support YesWebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0nodejs Full support Yes

Legend

Full support  
Full support

See also