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
How to add, access, delete, JavaScript object properties?
JavaScript objects are collections of key-value pairs where you can dynamically add, access, and delete properties. This guide demonstrates the fundamental operations for managing object properties.
Syntax
// Adding properties obj.propertyName = value; obj['propertyName'] = value; // Accessing properties obj.propertyName; obj['propertyName']; // Deleting properties delete obj.propertyName; delete obj['propertyName'];
Example: Adding Properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object Properties</title>
</head>
<body>
<h1>Add, Access, Delete JavaScript Object Properties</h1>
<div id="result"></div>
<button onclick="manageProperties()">Manage Properties</button>
<script>
function manageProperties() {
let obj = {
firstName: 'John',
lastName: 'Doe',
age: 25
};
let result = document.getElementById('result');
// Adding property using dot notation
obj.school = 'Harvard University';
result.innerHTML = 'Added property: school = ' + obj.school + '<br>';
// Adding property using bracket notation
obj['city'] = 'New York';
result.innerHTML += 'Added property: city = ' + obj['city'] + '<br>';
// Accessing properties
result.innerHTML += 'Accessing firstName: ' + obj.firstName + '<br>';
// Deleting property
delete obj.age;
result.innerHTML += 'Deleted age property. Age now: ' + obj.age + '<br>';
}
</script>
</body>
</html>
Different Methods for Property Operations
Method 1: Dot Notation
<!DOCTYPE html>
<html>
<body>
<div id="output1"></div>
<script>
let person = {name: 'Alice'};
// Add property
person.age = 30;
document.getElementById('output1').innerHTML = 'Added age: ' + person.age + '<br>';
// Access property
document.getElementById('output1').innerHTML += 'Name: ' + person.name + '<br>';
// Delete property
delete person.name;
document.getElementById('output1').innerHTML += 'Name after deletion: ' + person.name;
</script>
</body>
</html>
Method 2: Bracket Notation
<!DOCTYPE html>
<html>
<body>
<div id="output2"></div>
<script>
let car = {brand: 'Toyota'};
// Add property with dynamic key
let propertyName = 'model';
car[propertyName] = 'Camry';
document.getElementById('output2').innerHTML = 'Added model: ' + car[propertyName] + '<br>';
// Access with special characters in key
car['fuel-type'] = 'Gasoline';
document.getElementById('output2').innerHTML += 'Fuel type: ' + car['fuel-type'] + '<br>';
// Check if property exists before deletion
if ('brand' in car) {
delete car['brand'];
document.getElementById('output2').innerHTML += 'Brand deleted. Exists: ' + ('brand' in car);
}
</script>
</body>
</html>
Comparison of Property Access Methods
| Method | Syntax | Dynamic Keys | Special Characters |
|---|---|---|---|
| Dot Notation | obj.property | No | No |
| Bracket Notation | obj['property'] | Yes | Yes |
Key Points
- Use dot notation for simple, known property names
- Use bracket notation for dynamic keys or keys with special characters
- The
deleteoperator removes properties completely - Accessing a deleted property returns
undefined - Use
inoperator to check if a property exists
Conclusion
JavaScript provides flexible ways to manage object properties through dot and bracket notation. Use dot notation for simple cases and bracket notation when you need dynamic property names or special characters in keys.
Updated on: 2026-03-15T23:18:59+05:30
194 Views
Advertisements