Javascript Accessing Adding And Deleting Object Properties Complete Guide

Last Update:2025-06-22T00:00:00 .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION. 7 mins read Difficulty-Level: beginner

Understanding the Core Concepts of JavaScript Accessing, Adding, and Deleting Object Properties

JavaScript Accessing, Adding, and Deleting Object Properties

1. Accessing Object Properties

Accessing properties of an object can be done using dot notation or bracket notation.

Dot Notation:

const person = { firstName: "John", lastName: "Doe" };
console.log(person.firstName); // Output: John

Use this method when you know the exact name of the property you want to access.

Bracket Notation:
```
console.log(person["lastName"]); // Output: Doe
```
- This is useful when property names are dynamic or contain special characters or spaces.

2. Adding Object Properties

You can add new properties to an existing object using either dot notation or bracket notation:

Dot Notation:

person.age = 50;
console.log(person.age); // Output: 50

Bracket Notation:
```
person["occupation"] = "Software Engineer";
console.log(person.occupation); // Output: Software Engineer
```
- Bracket notation can be particularly useful when adding properties with names that cannot be used with dot notation.

3. Deleting Object Properties

To remove a property from an object, you can use the delete operator.

Using Delete Operator:
```
delete person.lastName;
console.log(person.lastName); // Output: undefined
```
- Note that the delete operator does not return the value of the deleted property; it returns true if the property was successfully deleted, and false otherwise.

Important Information:

Computed Property Names: Introduced in ES6, computed property names allow you to define object properties dynamically:
```
const key = 'dynamicKey';
const obj = {
  [key]: 'value'
};
console.log(obj.dynamicKey); // Output: value
```
Checking for Property Existence: To check if a property exists in an object, you can use the in operator:
```
if ("firstName" in person) {
  console.log("Property exists");
}
```
Enumerable Properties: By default, the properties added to an object are enumerable. You can use Object.keys(), for...in loops, and Object.getOwnPropertyNames() to access enumerable properties:
```
console.log(Object.keys(person)); // Output: ['firstName', 'age', 'occupation']
```
Preventing Modifications: JavaScript provides several methods to make objects or their properties immutable:
- Object.seal(): Can't add new properties, but can modify existing ones.
- Object.freeze(): Can't add, modify, or delete properties.
- Object.preventExtensions(): Can't add new properties, but can modify or delete existing ones.

Property Shorthand: ES6 introduced shorthand notation for object literals, making it easier to add variables as properties to objects:

const firstName = "John", lastName = "Doe";
const person = { firstName, lastName };
console.log(person); // Output: { firstName: 'John', lastName: 'Doe' }

Prototype Inheritance: Objects in JavaScript are linked to other objects, and this linkage forms a chain known as the prototype chain. Understanding this is key to accessing properties not directly on the object but inherited from its prototype:

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement JavaScript Accessing, Adding, and Deleting Object Properties

Step 1: Accessing Object Properties

Example:

// Creating an object
let person = {
    firstName: "John",
    lastName: "Doe",
    age: 25
};

// Accessing properties using dot notation
console.log(person.firstName);  // Output: John
console.log(person.lastName);   // Output: Doe

// Accessing properties using bracket notation
console.log(person["age"]);       // Output: 25

// Accessing non-existent property
console.log(person.middleName); // Output: undefined

Explanation:

We create an object called person with three properties: firstName, lastName, and age.
We access the properties using dot notation (e.g., person.firstName).
We also access the age property using bracket notation (person["age"]), which is useful when keys are dynamic or contain spaces.
If you try to access a non-existent property, you get undefined.

Step 2: Adding Object Properties

Example:

// Creating an object
let student = {
    name: "Jane",
    class: "10th"
};

// Adding a new property using dot notation
student.age = 16;

// Adding a new property using bracket notation
student["gender"] = "Female";

console.log(student); 
// Output: { name: "Jane", class: "10th", age: 16, gender: "Female" }

Explanation:

We create an object called student with two properties: name and class.
We add a new property age using dot notation.
We add another new property gender using bracket notation.
Finally, we log the entire student object to see the added properties.

Step 3: Deleting Object Properties

Example:

// Creating an object
let book = {
    title: "JavaScript Guide",
    author: "John Doe",
    year: 2022
};

// Deleting a property using the delete keyword
delete book.year;

console.log(book); 
// Output: { title: "JavaScript Guide", author: "John Doe" }

// Alternatively, you can use bracket notation
delete book["author"];

console.log(book); 
// Output: { title: "JavaScript Guide" }

Explanation:

We create an object called book with three properties: title, author, and year.
We delete the year property using the delete keyword.
We verify that the property is removed by logging the book object.
We also demonstrate how to delete properties using bracket notation by removing the author property.
Finally, we log the book object to see that both year and author properties have been deleted.

Complete Example with All Operations

// Step 1: Create an object
let car = {
    make: "Toyota",
    model: "Corolla",
    year: 2020
};

// Step 2: Accessing properties
console.log(car.make);          // Output: Toyota
console.log(car["model"]);      // Output: Corolla

// Step 3: Adding properties
car.color = "Blue";
car["engineType"] = "V4";

console.log(car); 
// Output: { make: "Toyota", model: "Corolla", year: 2020, color: "Blue", engineType: "V4" }

// Step 4: Deleting properties
delete car.engineType;
console.log(car); 
// Output: { make: "Toyota", model: "Corolla", year: 2020, color: "Blue" }

delete car["color"];
console.log(car); 
// Output: { make: "Toyota", model: "Corolla", year: 2020 }

In this complete example, we first create a car object, access its properties, add new properties, and finally delete some properties. Each step is clearly demonstrated to give you a clear understanding of how to manipulate JavaScript objects.

Summary

Accessing: Use dot notation (object.property) or bracket notation (object["property"]).
Adding: Use dot notation (object.newProperty = value) or bracket notation (object["newProperty"] = value).
Deleting: Use the delete keyword with dot notation (delete object.property) or bracket notation (delete object["property"]).

Javascript Accessing Adding And Deleting Object Properties Complete Guide