The Dot . Operator
Definition
The . symbol is called the Property Accessor Operator (or simply Dot Notation).
It is used to access the properties or methods of an object.
It takes the object name on the left side and the property name on the right side.
Example
// Create an Object
const user = { name: "Alice" };
// Access a property using dot notation
let name1 = user.name;
// Access a property using bracket notation
let name2 = user["name"];
Try it Yourself »
Syntax Rules
Literal Match:
The name on the right side of the dot must match the property name exactly.
It cannot evaluate variables.
Valid Identifiers:
It can only be used with property names that are valid JavaScript identifiers
(they cannot contain spaces, hyphens, or start with numbers).
Dot Notation vs Bracket Notation
In JavaScript, both Dot Notation (object.property) and Bracket Notation (object["property"]) are used to access properties of an object, but they differ significantly in flexibility and syntax requirements:
| Feature | Dot notation | Bracket notation |
|---|---|---|
| Syntax | obj.key | obj[key] |
| Readability | High | Moderate |
| Variables | NO | YES |
| Special Characters | NO | YES |
| Numbers as Keys | NO | YES |
Using Variables and Expressions
Dot Notation treats the name after the dot as a literal string key. It cannot interpret variables.
Bracket Notation evaluates the expression inside the brackets first, allowing you to pass variables or dynamic strings.
Example
const user = { name: "Alex" };
const choice = "name";
user.choice // undefined (no property named "choice")
user[choice] // "Alex" (evaluates choice to "name")
Special Characters and Spaces
Dot Notation only works with valid JavaScript identifiers (letters, numbers, $, and _, and cannot start with a number).
Bracket Notation accepts any string, making it mandatory for keys with spaces, dashes, or special characters.
Example
const member = {
"user ID": 101,
"land-code": "USA"
};
member.user ID // Syntax Error
member.land-code) // Syntax Error (subtraction)
member["user ID"]) // 101
member["land-code"]) // "USA"
Accessing Arrays with Numbers
Because arrays are objects behind the scenes with numerical indexes, you must use bracket notation to access their values.
Example
// Create an Array
const fruit = ["apple", "banana"];
fruit.0 // Syntax Error
fruit[0] // "apple"
Recommendation
Use Dot Notation by default because it is cleaner and easier to read.
Use Bracket Notation when you need to access properties with variables or when dealing with invalid identifier keys.
See Also:
Browser Support
. is an ECMAScript1 (JavaScript 1997) feature.
It is supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera |
