Web/JavaScript/Reference/Operators/Property accessors-2

From Get docs


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

In the object.property syntax, the property must be a valid JavaScript identifier. (In the ECMAScript standard, the names of properties are technically "IdentifierNames", not "Identifiers", so reserved words can be used but are not recommended). For example, object.$1 is valid, while object.1 is not. 

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

Here, the method named createElement is retrieved from document and is called. 

document.createElement('pre')

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

In the object[property_name] syntax, the property_name is just a string or Symbol. So, it can be any string, including '1foo', '!bar!', or even ' ' (a space). 

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

This does the exact same thing as the previous example. 

document['createElement']('pre')

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. This outputs 'value', since 1 is coerced into '1'. 

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

This also outputs 'value', since both foo and bar are converted to the same string. 

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

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.

Examples

Bracket notation vs. 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
ECMAScript (ECMA-262)The definition of 'Property Accessors' in that specification.

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile Server
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js
Property accessors Chrome

Full support 1

Edge

Full support 12

Firefox

Full support 1

IE

Full support 3

Opera

Full support 4

Safari

Full support 1

WebView Android

Full support 1

Chrome Android

Full support 18

Firefox Android

Full support 4

Opera Android

Full support 10.1

Safari iOS

Full support 1

Samsung Internet Android

Full support 1.0

nodejs

Full support 0.1.100

Legend

Full support  
Full support


See also

Retrieved from "https://getdocs.org/index.php?title=Web/JavaScript/Reference/Operators/Property_accessors-2&oldid=27825"
Powered by MediaWiki