JavaScript: Property Dot Notation vs Bracket Notation

By Xah Lee. Date: . Last updated: .

There are 3 primary syntaxes to access a object's property:

object.key
Dot notation. Most convenient.
  • Dot notation cannot be used when the property name contains space. For example, {"a b":7}
  • Dot notation cannot be used when the property name is a language keyword or reserved word. For example, obj.for.
  • Dot notation cannot be used when the property name is number. For example, obj.7
  • Dot notation cannot be used to create new property at run time. For example, when you have a property name as value of a variable, constructed from user input.
  • Dot notation cannot be used for Symbol key properties.
object[key]
Bracket notation. Useful if key contains space or is a number or Symbol type, or is a variable.
object?.key
Same as dot notation, but return undefined instead of error out if object is undefined or null [see Optional Chaining Operator ]

Example of a property name with space in it:

// property name that contains space
const x = {"a b": 8};

console.log( x["a b"] === 8 ); // true

// the following are syntax errors

x[a b]
// SyntaxError: Unexpected identifier

x."a b"
// SyntaxError: Unexpected string

Example of a property name of digits:

// a property with name that's a digit
const x = {"3":8};

console.log( x["3"] === 8); // true

console.log(x[3]); // 8
// JavaScript automatically convert 3 to string


// following are syntax errors
// dot notation cannot be used

x."3"
// SyntaxError: Unexpected string

x.3
// SyntaxError: Unexpected number

Here is a example of creating property with a name from the value of a variable.

// creating a property, with name from a value of variable
// dot notation won't work

const obj = {"p1":1};
const v = "p2";

obj[v] = 2;

console.log(obj); // { p1: 1, p2: 2 }

JavaScript Property

JavaScript: Get Property

BUY
Ξ£JS
JavaScript in Depth

JavaScript in Depth

Basic Syntax

Value Types

Variable

String

Property

Object and Inheritance

Array

Function

Constructor/Class

Iterable 🌟

Misc