JavaScript Object Properties

In JavaScript, objects are collections of properties, where each property is an association between a key (or name) and a value. Properties define the characteristics of an object, such as its attributes, methods, or any other relevant data. This article will explain different ways to work with object properties, including how to create, access, modify, delete, and enumerate them.

Defining Object Properties

Object properties can be defined using object literals or the Object constructor.


// Using Object Literal
const car = {
  brand: 'Toyota',
  model: 'Corolla',
  year: 2022,
  displayInfo: function() {
    console.log(`${this.brand} ${this.model}, ${this.year}`);
  }
};

// Using Object Constructor
const person = new Object();
person.firstName = 'Jane';
person.lastName = 'Doe';
person.age = 30;
person.fullName = function() {
  return this.firstName + ' ' + this.lastName;
};

In the above examples, the car and person objects have properties such as brand, model, year, and methods like displayInfo and fullName.

Accessing Object Properties

You can access object properties in two ways:

1. Dot Notation

console.log(car.brand); // Output: Toyota
console.log(person.firstName); // Output: Jane

2. Bracket Notation

Bracket notation is useful when property names contain special characters or are dynamically determined.

console.log(car['model']); // Output: Corolla
const propName = 'lastName';
console.log(person[propName]); // Output: Doe

Modifying Object Properties

To modify the value of an object property, simply assign a new value using dot or bracket notation.

car.year = 2023; // Using Dot Notation
person['age'] = 31; // Using Bracket Notation

console.log(car.year); // Output: 2023
console.log(person.age); // Output: 31

Adding New Object Properties

New properties can be added to an object by assigning a value to a property that does not exist yet.

car.color = 'Red';
person['nationality'] = 'American';

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

Deleting Object Properties

You can delete a property from an object using the delete operator.

delete car.model;
delete person['age'];

console.log(car); // Output: { brand: 'Toyota', year: 2023, displayInfo: [Function: displayInfo], color: 'Red' }
console.log(person); // Output: { firstName: 'Jane', lastName: 'Doe', fullName: [Function: fullName], nationality: 'American' }

Enumerating Object Properties

There are several ways to enumerate or iterate over an object's properties in JavaScript.

1. Using `for...in` Loop

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

for (let key in car) {
  console.log(`${key}: ${car[key]}`);
}
// Output:
// brand: Toyota
// year: 2023
// displayInfo: [Function: displayInfo]
// color: Red

2. Using `Object.keys()`

The Object.keys() method returns an array of a given object's own property names.

const keys = Object.keys(person);
console.log(keys); // Output: ["firstName", "lastName", "fullName", "nationality"]

3. Using `Object.entries()`

The Object.entries() method returns an array of a given object's own enumerable property [key, value] pairs.

const entries = Object.entries(car);
console.log(entries); 
// Output: [["brand", "Toyota"], ["year", 2023], ["displayInfo", [Function: displayInfo]], ["color", "Red"]]

Property Attributes

Each object property has attributes that describe its behavior:

writable: If true, the property value can be changed.
enumerable: If true, the property shows up during enumeration of the properties (like in a for...in loop or Object.keys()).
configurable: If true, the property can be deleted or its attributes can be modified.

These attributes can be set using the Object.defineProperty() method:

const book = {};
Object.defineProperty(book, 'title', {
  value: 'JavaScript Essentials',
  writable: false,
  enumerable: true,
  configurable: false
});

console.log(book.title); // Output: JavaScript Essentials
book.title = 'Advanced JavaScript'; // This will not change the title as writable is set to false
console.log(book.title); // Output: JavaScript Essentials

Conclusion

Understanding how to define, access, modify, and delete object properties in JavaScript is fundamental to mastering the language. JavaScript offers various methods and notations to manage object properties effectively, providing flexibility and control over data structures in your applications. Mastering these concepts allows for writing more robust, efficient, and scalable code.

Archive