JavaScript Object Properties: Dot Notation or Bracket Notation?
Tags: javascript, webdev, beginners, programming
Published: 2023-11-01 10:34:15

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

![JavaScript Object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyme2r9c20ceb3rqu6uz.gif)


## 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.**


```javascript
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:

```javascript
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:

```javascript
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

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

### Bracket Notation

```javascript
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

```javascript
delete library.book3;
```
### Bracket Notation

```javascript
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](https://www.linkedin.com/in/quratulain-shoro-7792721a4)

GitHub: [https://github.com/QuratAin](https://github.com/QuratAin)