One can think of an object as anassociative array (a.k.a.map,dictionary,hash,lookup table). Thekeys in this array are the names of the object'sproperties.

There are two ways to access properties:dot notation andbracket notation.

In theobject.propertyName syntax, thepropertyName must be a valid JavaScriptidentifier which can also be areserved word. For example,object.$1 is valid, whileobject.1 is not.

const variable = object.propertyName;object.propertyName = value;

const object = {};object.$1 = "foo";console.log(object.$1); // 'foo'

const object = {};object.1 = "bar"; // SyntaxErrorconsole.log(object.1); // SyntaxError

Here, the method namedcreateElement is retrieved fromdocument 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 leavewhite-space(s) before the dot preceding the method call, so that the dot is not interpreted as a decimal point.

77 .toExponential();// or77.toExponential();// or(77).toExponential();// or77..toExponential();// or77.0.toExponential();// because 77. === 77.0, no ambiguity

In addition,private elements can only be accessed using dot notation within the class that defines them.

In theobject[expression] syntax, theexpression should evaluate to a string orSymbol that represents the property's name. So, it can be any string literal, for example, including'1foo','!bar!', or even' ' (a space).

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

This does the exact same thing as the previous example.

document["createElement"]("pre");

A space before bracket notation is allowed.

document ["createElement"]("pre");

Passing expressions that evaluate to property name will do the same thing as directly passing the property name.

const key = "name";const getKey = () => "name";const Obj = { name: "Michel" };Obj["name"]; // returns "Michel"Obj[key]; // evaluates to Obj["name"], and returns "Michel"Obj[getKey()]; // evaluates to Obj["name"], and returns "Michel"

However, beware of using square brackets to access properties whose names are given by external input. This may make your code susceptible toobject injection attacks.

Each property name is a string or aSymbol. Any other value, including a number, is coerced to a string. This outputs'value', since1 is coerced into'1'.

const object = {};object["1"] = "value";console.log(object[1]);

This also outputs'value', since bothfoo andbar are converted to the same string ("[object Object]").

const foo = { uniqueProp: 1 };const bar = { uniqueProp: 2 };const object = {};object[foo] = "value";console.log(object[bar]);

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 a property that can be called (for example, if it has a reference to aFunction instance as its value).

A method is not bound to the object that it is a property of. Specifically,this is not fixed in a method and does not necessarily refer to the object containing the method. Instead,this is "passed" by the function call. Seethe reference forthis.

JavaScript novices often make the mistake of usingeval() where the bracket notation can be used instead.

For example, the following syntax is often seen in many scripts.

const 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 andids of form controls. It is better to use bracket notation instead:

const x = document.forms.form_name.elements[strFormControl].value;

• Object
• Object.defineProperty()
• Optional chaining (?.)