JavaScript Object Properties

In JavaScript, object properties are key-value pairs that define the characteristics of an object. Properties can store any value, including primitive types, objects, arrays, and functions. Understanding how properties work is essential for mastering JavaScript objects.


🔹 What Are Object Properties?

Every object in JavaScript is a collection of properties. A property is an association between a key (also called a name) and a value.

javascriptCopyEditlet user = {
  name: "Alice",
  age: 25,
  isAdmin: false
};

Here, the object user has three properties: name, age, and isAdmin.

  • Keys: "name", "age", "isAdmin"
  • Values: "Alice", 25, false

🔸 Types of Object Properties

JavaScript object properties fall into two main categories:

1. Data Properties

These are the most common type. A data property contains a value, which can be anything — a number, string, boolean, array, object, or even a function.

Example:

javascriptCopyEditlet car = {
  brand: "Toyota",
  year: 2023
};

Here, both brand and year are data properties.

2. Accessor Properties (Getters & Setters)

Accessor properties don’t hold values directly. Instead, they use functions to get or set a value.

javascriptCopyEditlet person = {
  firstName: "John",
  lastName: "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};

console.log(person.fullName); // John Doe

Setters allow assigning values:

javascriptCopyEditlet person = {
  firstName: "John",
  lastName: "Doe",
  set fullName(name) {
    [this.firstName, this.lastName] = name.split(" ");
  }
};

person.fullName = "Jane Smith";
console.log(person.firstName); // Jane

🔸 Property Attributes

Every property in JavaScript has internal attributes that define its behavior:

  • value – The data associated with the property.
  • writable – If true, the value can be changed.
  • enumerable – If true, the property shows up in loops like for...in.
  • configurable – If true, the property can be deleted or changed.

You can define properties explicitly using Object.defineProperty():

javascriptCopyEditlet obj = {};

Object.defineProperty(obj, "hidden", {
  value: 42,
  writable: false,
  enumerable: false,
  configurable: false
});

🔸 Property Names and Keys

  • Property keys are always strings (or symbols).
  • Even if you write age: 30, JavaScript treats the key as "age".

You can also use computed property names:

javascriptCopyEditlet key = "score";
let player = {
  [key]: 100
};

🔸 Adding and Modifying Properties

javascriptCopyEditlet book = {};
book.title = "JavaScript 101";
book["author"] = "Jane Doe";

🔸 Deleting Properties

Use the delete keyword:

javascriptCopyEditdelete book.title;

🔸 Checking for Properties

To check if a property exists:

  1. Using the in operator:
javascriptCopyEditconsole.log("author" in book); // true or false
  1. Using hasOwnProperty():
javascriptCopyEditbook.hasOwnProperty("author"); // true

🔸 Enumerating Properties

Use a for...in loop:

javascriptCopyEditfor (let key in book) {
  console.log(key + ": " + book[key]);
}

Or use Object.keys() to get property names as an array:

javascriptCopyEditObject.keys(book);

Other helpful methods:

  • Object.values(book)
  • Object.entries(book)

🔸 Property Shorthand and Computed Properties (ES6)

javascriptCopyEditlet name = "John";
let age = 30;

let user = { name, age }; // Property shorthand

Computed property example:

javascriptCopyEditlet prop = "level";
let game = {
  [prop]: "Advanced"
};

✅ Summary

JavaScript object properties are powerful tools that allow you to store, retrieve, and manipulate data efficiently. Understanding data properties, accessor properties, and their attributes like writable, enumerable, and configurable helps in writing robust and flexible code.

Leave a Reply

Your email address will not be published. Required fields are marked *