JavaScript Object Properties

In JavaScript, properties are key-value pairs associated with objects. They define the characteristics of an object, holding data or functionality. Understanding how object properties work is crucial for efficient coding and robust application development.

Types of JavaScript Object Properties

1. Data Properties

  • These properties store values and are the most common type of property.
  • Example: 
const car = {
    brand: "Toyota",
    year: 2023
};
console.log(car.brand); // Output: Toyota

2. Accessor Properties (Getters and Setters)

  • These properties allow you to define functions to get and set values.
  • Example: 
const person = {
    firstName: "John",
    lastName: "Doe",
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
    set fullName(name) {
        const parts = name.split(" ");
        this.firstName = parts[0];
        this.lastName = parts[1];
    }
};
console.log(person.fullName); // Output: John Doe
person.fullName = "Jane Smith";
console.log(person.firstName); // Output: Jane

3. Computed Properties

  • These are dynamically calculated property names.
  • Example:
const propName = "color";
const car = {
    [propName]: "red"
};
console.log(car.color); // Output: red

4. Prototype Properties

  • Properties inherited from an object’s prototype.
  • Example: 
const obj = {};
console.log(obj.toString); // Inherited from Object.prototype

Property Attributes

Every property in JavaScript has attributes that define its behavior. These attributes can be accessed using the Object.getOwnPropertyDescriptor() method.

Key Attributes:

  1. value: The value of the property.
  2. writable: Determines if the value can be changed.
  3. enumerable: Indicates if the property is listed during iteration.
  4. configurable: Defines if the property can be deleted or modified.

Example:

const obj = { a: 1 };
const descriptor = Object.getOwnPropertyDescriptor(obj, "a");
console.log(descriptor);
// Output: { value: 1, writable: true, enumerable: true, configurable: true }

Manipulating Object Properties

Adding/Updating Properties

const car = {};
car.brand = "Toyota"; // Adding
car.brand = "Honda"; // Updating
console.log(car.brand); // Output: Honda

Deleting Properties

delete car.brand;
console.log(car.brand); // Output: undefined

Freezing Properties

To make properties immutable:

Object.freeze(car);
car.brand = "Ford"; // Ignored
console.log(car.brand); // Output: undefined

Enumerating Properties

To iterate over properties:

  • for...in Loop: Iterates over all enumerable properties. 
for (let key in car) {
    console.log(key);
}
  • Object.keys(): Returns an array of enumerable property keys. 
console.log(Object.keys(car));
  • Object.entries(): Returns an array of key-value pairs. 
console.log(Object.entries(car));

Conclusion

JavaScript object properties provide flexibility and functionality for managing data and behavior within objects. From data properties to getters, setters, and computed properties, mastering these features will enhance your programming capabilities.

For more detailed tutorials and advanced guides on JavaScript properties, visit The Coding College.

Leave a Comment