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