Accessing Objects in JavaScript: Dot Notation vs Bracket Notation

When referring to accessing object properties in JavaScript, there are two different syntax - dot notation and bracket notation. It can be confusing to decide which to use when writing programs. Are they the same? Do they work the same? You’ll find out soon enough! I carefully explain and illustrate what they both are and how to use both efficiently in this article.

Before we dive into JavaScript access syntax, there are some core concepts to first understand in order to have a clearer understanding of how dot notation and bracket notation work which include object, object property, key and value.
An object in JavaScript is simply a group of unordered key-value pairs, and each of the key-value pair is what is referred to as an object property. An object property is a characteristic of the object which is made up of a key that holds a value. A property value is accessed by declaring the key against the object name using either dot or bracket notation. Using the dot or bracket notation, we can access, modify or add a new property to an object. It is worthy to note however also that an object property can be deleted by prefixing the keyword delete before object.property or object[property]

//Declare an object
const person = {
    name: "Steph",
    hair: "Brown"
}


let result = person.name; //dot notation
let result2 = person["hair"]; //bracket notation


console.log(result); //returns Steph
console.log(result2); //returns Brown

DOT NOTATION
This approach uses a period sign (.) to access an object property value, the syntax for this is object.property. When evaluated, it takes a left-to-right approach. So, it checks if an object exists first and then checks if the specified property exists within that object.

BRACKET NOTATION
This approach involves using the use of square brackets to access object property, the syntax for this is object[expression] where the expression within the brackets is evaluated and returns what is then used as the key. When accessing person’s hair value, it should be noted that the key hair is enclosed in quotation in order for it to be evaluated correctly as an expression, the quotation marks make hair a valid expression in the form of a string. Therefore person[hair]throws an error.

THE DIFFERENCE
Using dot notation only allows static keys while bracket notation permits the use of dynamic “key(s)” since it will eventually be evaluated to get the actual key. This means that when a property is accessed with dot notation, whatever value follows the period sign (.) is compared with the list of keys in the referred object looking for a match but when the bracket notation is used to access an object’s property, the content within the brackets is first evaluated and returned as the key.

//Illustrate difference
const person = {
    name: "Steph",
    hair: "Brown"
}


const human = {
    id: "name"
}


console.log(person[human.id]); //returns Steph
console.log(person.human.id); //undefined

The first person[human.id] evaluates human.id and returns a string ”name” which then serves as the key, in other words person[“name”] is what is accessed. On the other hand, person.human.id rather searches for an object person and then checks within the object for a key human which is undefined as person doesn't have a key human.

THE DECISION FACTOR
The decision on how to access a property in JavaScript should be determined by the type or nature of the property to be accessed. When dealing with a static key, dot notation is most efficient and when dealing with dynamic keys, the bracket notation should be used. Also, you should put into consideration static keys that may include a character like the hyphen (-), or a combination of characters should be accessed with bracket notation.
I hope this helps you understand both dot and bracket notations better!