Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Dot notation vs Bracket notation in JavaScript
The dot notation and bracket notation are both methods for accessing object properties in JavaScript. While dot notation is cleaner and more commonly used, bracket notation provides greater flexibility, especially when working with dynamic property names or property names that contain special characters.
Syntax
Here's the basic syntax for both notations:
// Dot notation object.propertyName // Bracket notation object["propertyName"] object[variableName]
Basic Example: Accessing Properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dot vs Bracket Notation</title>
</head>
<body>
<h3>Object Property Access</h3>
<div id="result"></div>
<script>
const student = {
name: "John",
age: 20,
grade: "A+"
};
let output = "<h4>Using Dot Notation:</h4>";
output += "student.name = " + student.name + "<br>";
output += "student.age = " + student.age + "<br>";
output += "student.grade = " + student.grade + "<br><br>";
output += "<h4>Using Bracket Notation:</h4>";
output += 'student["name"] = ' + student["name"] + "<br>";
output += 'student["age"] = ' + student["age"] + "<br>";
output += 'student["grade"] = ' + student["grade"] + "<br>";
document.getElementById("result").innerHTML = output;
</script>
</body>
</html>
Dynamic Property Access
Bracket notation allows you to use variables to access properties dynamically:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Property Access</title>
</head>
<body>
<h3>Dynamic Property Access with Variables</h3>
<div id="dynamic-result"></div>
<script>
const person = {
firstName: "Alice",
lastName: "Smith",
occupation: "Developer"
};
// Using variables with bracket notation
const prop1 = "firstName";
const prop2 = "lastName";
const prop3 = "occupation";
let result = "<h4>Dynamic Access:</h4>";
result += "person[prop1] = " + person[prop1] + "<br>";
result += "person[prop2] = " + person[prop2] + "<br>";
result += "person[prop3] = " + person[prop3] + "<br><br>";
result += "<h4>Note:</h4>";
result += "person.prop1 would be undefined (looks for literal 'prop1' property)";
document.getElementById("dynamic-result").innerHTML = result;
</script>
</body>
</html>
Special Cases for Bracket Notation
Bracket notation is required when property names contain spaces, special characters, or start with numbers:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Special Property Names</title>
</head>
<body>
<h3>Special Property Names</h3>
<div id="special-result"></div>
<script>
const specialObject = {
"first name": "Bob",
"user-id": 12345,
"2023-data": "current year",
"@handle": "@bobsmith"
};
let output = "<h4>Properties with Special Characters:</h4>";
output += 'specialObject["first name"] = ' + specialObject["first name"] + "<br>";
output += 'specialObject["user-id"] = ' + specialObject["user-id"] + "<br>";
output += 'specialObject["2023-data"] = ' + specialObject["2023-data"] + "<br>";
output += 'specialObject["@handle"] = ' + specialObject["@handle"] + "<br><br>";
output += "<p><strong>Note:</strong> These properties cannot be accessed with dot notation</p>";
document.getElementById("special-result").innerHTML = output;
</script>
</body>
</html>
Comparison
| Feature | Dot Notation | Bracket Notation |
|---|---|---|
| Syntax | object.property | object["property"] |
| Readability | More readable | Less readable |
| Dynamic access | Not supported | Supported |
| Special characters | Not supported | Supported |
| Property names with spaces | Not supported | Supported |
| Variable as property name | Not supported | Supported |
When to Use Each
Use Dot Notation when:
- Property names are known at compile time
- Property names are valid identifiers (no spaces, special characters)
- You want cleaner, more readable code
Use Bracket Notation when:
- Property names are stored in variables
- Property names contain special characters or spaces
- Property names are determined at runtime
- Iterating over object properties
Conclusion
Both dot and bracket notation serve important purposes in JavaScript. Use dot notation for cleaner code with static property names, and bracket notation when you need dynamic access or special property names. Understanding when to use each approach will make your JavaScript code more flexible and maintainable.
Updated on: 2026-03-15T23:18:59+05:30
2K+ Views
Advertisements