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 notationIn 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 notationIn 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 namesProperty 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 bindingA 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.
This tutorial describes different ways of accessing an object properties.
#javascript #property accessors #programming