In JavaScript, objects are collections of key-value pairs, where each key (also known as a property name) is associated with a value. Object properties are fundamental to working with objects and are used to store and retrieve data.

Key Concepts of JavaScript Object Properties

1. Definition and Syntax

An object property consists of a key (or name) and a value. You can define an object and its properties using two common syntaxes:

• Object Literal Notation:

  let person = {
    name: "John",
    age: 30,
    occupation: "Engineer"
  };
  

• Using the Object Constructor:

  let person = new Object();
  person.name = "John";
  person.age = 30;
  person.occupation = "Engineer";
  

2. Accessing Properties

You can access object properties using either dot notation or bracket notation:

• Dot Notation:

  console.log(person.name); // Output: John
  

• Bracket Notation:

  console.log(person["age"]); // Output: 30
  

Bracket notation is especially useful when property names are dynamic or not valid JavaScript identifiers (e.g., names with spaces or special characters).

3. Adding or Modifying Properties

You can add or modify properties using either notation:

• Dot Notation:

  person.email = "john.doe@example.com"; // Adding a new property
  person.age = 31; // Modifying an existing property
  

• Bracket Notation:

  person["phone"] = "555-1234"; // Adding a new property
  person["occupation"] = "Senior Engineer"; // Modifying an existing property
  

4. Deleting Properties

You can delete properties using the delete operator:

delete person.occupation;
console.log(person); // Output: { name: "John", age: 31, email: "john.doe@example.com", phone: "555-1234" }

5. Enumerating Properties

To iterate over object properties, you can use a for...in loop or methods such as Object.keys(), Object.values(), and Object.entries():

• for...in Loop:

  for (let key in person) {
    if (person.hasOwnProperty(key)) { // Check if property is not inherited
      console.log(key + ": " + person[key]);
    }
  }
  

• Object.keys(): Returns an array of the object's property names.

  console.log(Object.keys(person)); // Output: ["name", "age", "email", "phone"]
  

• Object.values(): Returns an array of the object's property values.

  console.log(Object.values(person)); // Output: ["John", 31, "john.doe@example.com", "555-1234"]
  

• Object.entries(): Returns an array of key-value pairs.

  console.log(Object.entries(person)); // Output: [["name", "John"], ["age", 31], ["email", "john.doe@example.com"], ["phone", "555-1234"]]
  

6. Property Attributes

JavaScript object properties have attributes that define their behavior:

• writable: If true, the property's value can be changed. If false, the value is read-only.
• enumerable: If true, the property will be included in enumerations (e.g., for...in loop).
• configurable: If true, the property descriptor can be changed and the property can be deleted.

You can use Object.defineProperty() to set these attributes:

Object.defineProperty(person, 'birthYear', {
  value: 1991,
  writable: false,
  enumerable: true,
  configurable: true
});

console.log(person.birthYear); // Output: 1991

7. Symbols as Property Keys

Symbols are unique and immutable primitive values that can be used as object property keys, providing a way to avoid name collisions:

const id = Symbol('id');
let user = {
  [id]: 123
};

console.log(user[id]); // Output: 123

Summary:

• Object properties are key-value pairs that make up the structure of JavaScript objects.
• Accessing properties can be done using dot notation or bracket notation.
• Adding, modifying, and deleting properties are straightforward using these notations and the delete operator.
• Enumerating properties can be done using loops or methods like Object.keys(), Object.values(), and Object.entries().
• Property attributes control the behavior of properties and can be modified using Object.defineProperty().
• Symbols offer a way to create unique property keys to avoid conflicts.