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:
- Objects and object properties
- How to add, update, and delete object properties
- 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 eachbook1
,book2
, and so on, are properties of thelibrary
object.Each book has its own set of properties, like
title
andauthor
.
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
andcar.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
Top comments (2)
A property 'name' can also be a
Symbol
. In this case, only bracket notation can be used.Glad we on same page this time π