JavaScript Object Properties: Dot Notation or Bracket Notation?

When working with objects in JavaScript will you choose Dot Notation or Bracket Notation?

screams destructuring

Ikr, but lets understand the basics first.

Introduction

Objects are a fundamental concept in JavaScript, serving as containers for organizing and managing data. Object properties, on the other hand, are the key-value pairs that make up these objects.

In this blog, we will learn about:

1. Objects and object properties
2. How to add, update, and delete object properties
3. The differences between dot notation and bracket notation

Understanding Objects

Think of an object like a container, and its properties as items inside the container. For example, consider the entire book library as an object, and each book in the library is like a property of that object.

So, objects hold things (properties), just like containers hold stuff.

const library = {
  book1: {
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
  },
  book2: {
    title: "To Kill a Mockingbird",
    author: "Harper Lee",
  },
  // More books...
};

• Here, library is our object, and each book1, book2, and so on, are properties of the library object.

• Each book has its own set of properties, like title and author.

Adding Properties to Objects

Dot Notation

Dot notation is ideal for adding properties with fixed names. It is similar to placing a known book on a designated shelf within the library. For instance:

library.book3 = {
  title: "Harry Potter and the Sorcerer's Stone",
  author: "J.K. Rowling",
};

Bracket Notation

Bracket notation is more dynamic and adaptable. It allows you to add properties with dynamic names, like adding a book to the library with a customizable label:

const newBookNumber = "book4";
library[newBookNumber] = {
  title: "The Hobbit",
  author: "J.R.R. Tolkien",
};

Updating Properties

Both dot and bracket notations can be used to update properties. Dot notation is suitable for known properties, while bracket notation excels for dynamic properties.

For example changing the details of a book/updating the information on a library's catalog. Here's how you can update properties:

Dot Notation

library.book1.title = "The Great American Novel";

Bracket Notation

const bookToUpdate = "book2";
library[bookToUpdate].author = "Nelle Harper Lee";

Deleting Properties

Deleting properties is like removing a book from your library's catalog. For deleting properties, both notations serve the same purpose. Use the delete keyword with dot or bracket notation to remove properties from the object.

Dot Notation

delete library.book3;

Bracket Notation

const bookToDelete = "book4";
delete library[bookToDelete];

Key Differences between Dot and Bracket Notation

1. Dynamic vs. Static

Dot Notation (Static)

• With dot notation, accessing properties requires prior knowledge of the property's name.

• Imagine you have a car with fixed properties like "make" and "model." You know these properties in advance and access them using dot notation: car.make and car.model.

Bracket Notation (Dynamic)

• Bracket notation allows dynamic access to properties, making it possible to use a variable to specify the property you want to access.

• Now, think of a scenario where you have a car, but you want to access a property based on user input, like "make" or "model." Bracket notation allows you to do this dynamically by using a variable to specify the property you want to access: car[userInput].

2. Handling Special Characters

Dot Notation (Limited)

• Dot notation struggles with property names containing spaces or special characters.

• For instance, consider a person's name with a special character like "O'Reilly".

• Accessing person.O'Reilly using dot notation could result in an error.

Bracket Notation (Versatile)

• Bracket notation, on the other hand, handles properties with spaces, special characters, or numbers with ease.

• You can easily access person["O'Reilly"] without any issues.

3. Adding and Updating Properties

Dot Notation (Static)

Use dot notation when dealing with a fixed set of properties. For instance: student.grade = "A" or student.age = 23.

Bracket Notation (Dynamic)

When dealing with dynamically generated data, bracket notation is more flexible. Use it to add or update properties based on the data received from an external source. For example: student[propertyName] = propertyValue.

Conclusion

Whether you're crafting a web application, handling user input, or working with unconventional property names, a firm grasp of object properties and notations in JavaScript can significantly enhance your development experience.

For more such content feel free to connect with me.

LinkedIn: https://www.linkedin.com/in/quratulain

GitHub: https://github.com/QuratAin