JavaScript Object Properties: A Complete Tutorial with Examples

In JavaScript, object properties are key-value pairs that store data related to the object. Properties can be of any data type, including strings, numbers, arrays, functions (methods), or even other objects.

This tutorial will cover how to define, access, modify, delete, and use advanced techniques with object properties.

1. Defining Object Properties

You can define properties in an object using object literals, dot notation, bracket notation, and Object.defineProperty().

Example 1: Defining Properties Using an Object Literal

let person = {
  name: 'Alice',
  age: 30,
  isStudent: false,
};

console.log(person); 
// Output: { name: 'Alice', age: 30, isStudent: false }

Explanation

The person object has three properties: name, age, and isStudent.
The keys (name, age, isStudent) are strings, and the values can be any data type.

Example 2: Defining Properties Using Dot and Bracket Notation

let car = {};
car.brand = 'Toyota'; // Dot notation
car['model'] = 'Corolla'; // Bracket notation

console.log(car); 
// Output: { brand: 'Toyota', model: 'Corolla' }

Explanation

Dot Notation: Use object.propertyName to define a property.
Bracket Notation: Use object[‘propertyName'] to define a property, useful when property names contain spaces or special characters.

Example 3: Using Object.defineProperty()

The Object.defineProperty() method provides more control over property characteristics.

let user = {};
Object.defineProperty(user, 'name', {
  value: 'John',
  writable: false, // Cannot be modified
  enumerable: true, // Shows up in loops
  configurable: false // Cannot be deleted or modified
});

console.log(user.name); // Output: John
user.name = 'Doe'; // This will not change the name due to writable: false
console.log(user.name); // Output: John

Explanation

Object.defineProperty() allows you to create or modify properties with specific attributes (writable, enumerable, configurable).
writable: If false, the property value cannot be changed.
enumerable: If true, the property will be included in loops such as for…in.
configurable: If false, the property cannot be deleted or changed to a data descriptor.

2. Accessing Object Properties

You can access properties using dot notation or bracket notation.

Example 4: Accessing Properties

let book = {
  title: 'JavaScript Essentials',
  author: 'Jane Doe',
  year: 2023
};

console.log(book.title); // Output: JavaScript Essentials
console.log(book['author']); // Output: Jane Doe

Explanation

Dot Notation: Use object.propertyName to access a property.
Bracket Notation: Use object[‘propertyName'] to access a property. This is necessary when the property name has spaces or special characters.

3. Modifying Object Properties

You can modify an existing property’s value using either dot or bracket notation.

Example 5: Modifying Properties

let car = {
  brand: 'Toyota',
  model: 'Corolla',
  year: 2022
};

car.year = 2023; // Modify using dot notation
car['model'] = 'Camry'; // Modify using bracket notation

console.log(car); 
// Output: { brand: 'Toyota', model: 'Camry', year: 2023 }

Explanation

Use object.propertyName = newValue to change the value of a property.

4. Deleting Object Properties

You can delete an object property using the delete operator.

Example 6: Deleting Properties

let user = {
  name: 'Alice',
  age: 25,
  email: 'alice@example.com'
};

delete user.email;

console.log(user); 
// Output: { name: 'Alice', age: 25 }

Explanation

The delete operator removes the specified property from the object.
Deleting a non-existent property does not throw an error.

5. Checking for Property Existence

You can check if an object has a specific property using the in operator or the hasOwnProperty() method.

Example 7: Using the in Operator and hasOwnProperty()

let person = {
  name: 'John',
  age: 30
};

console.log('name' in person); // Output: true
console.log('gender' in person); // Output: false

console.log(person.hasOwnProperty('age')); // Output: true
console.log(person.hasOwnProperty('toString')); // Output: false

Explanation

in Operator: Returns true if the property exists in the object or its prototype chain.
hasOwnProperty(): Returns true if the property exists directly on the object, not on its prototype.

6. Iterating Over Object Properties

You can use a for…in loop, Object.keys(), Object.values(), and Object.entries() to iterate over object properties.

Example 8: Iterating with for…in Loop

let car = {
  brand: 'Toyota',
  model: 'Camry',
  year: 2023
};

for (let key in car) {
  console.log(`${key}: ${car[key]}`);
}

Output

brand: Toyota
model: Camry
year: 2023

Explanation

The for…in loop iterates over all enumerable properties of the object.

Example 9: Using Object.keys(), Object.values(), and Object.entries()

let book = {
  title: 'JavaScript Essentials',
  author: 'Jane Doe',
  year: 2023
};

console.log(Object.keys(book)); // Output: ['title', 'author', 'year']
console.log(Object.values(book)); // Output: ['JavaScript Essentials', 'Jane Doe', 2023]
console.log(Object.entries(book)); // Output: [['title', 'JavaScript Essentials'], ['author', 'Jane Doe'], ['year', 2023]]

Explanation

Object.keys(): Returns an array of the object's property names.
Object.values(): Returns an array of the object's property values.
Object.entries(): Returns an array of key-value pairs.

7. Using Computed Property Names

JavaScript allows you to define property names dynamically using computed property names within an object literal.

Example 10: Computed Property Names

let propertyName = 'color';
let car = {
  brand: 'Toyota',
  [propertyName]: 'Red' // Computed property name
};

console.log(car.color); // Output: Red

Explanation

The property name is computed dynamically using the variable propertyName.

8. Freezing and Sealing Objects

JavaScript provides methods like Object.freeze() and Object.seal() to control object properties.

Example 11: Using Object.freeze() and Object.seal()

let user = {
  name: 'Alice',
  age: 25
};

Object.freeze(user);
user.age = 30; // This will not change the age property

console.log(user.age); // Output: 25

let book = {
  title: 'JavaScript Essentials'
};

Object.seal(book);
book.author = 'Jane Doe'; // Adding new properties is not allowed
delete book.title; // Deleting properties is also not allowed

console.log(book); // Output: { title: 'JavaScript Essentials' }

Explanation

Object.freeze(): Prevents adding, deleting, or modifying properties.
Object.seal(): Prevents adding or deleting properties, but allows modifying existing ones.

Summary

JavaScript object properties are fundamental for storing and manipulating data within objects. Here's a quick recap of what we covered:

Property Operations

Advanced Techniques

• Computed Property Names: Define properties dynamically.
• Control Attributes: Use Object.defineProperty() for writable, enumerable, and configurable attributes.
• Freeze/Seal Objects: Use Object.freeze() and Object.seal() to control changes to object properties.

By mastering object properties in JavaScript, you gain greater control over how you define, access, modify, and interact with data in your applications