JavaScript Notes

JavaScript Object Properties - Keys, Values, Descriptors & Dynamic Properties

Deep dive into JavaScript object properties: enumerable, configurable, writable descriptors, computed keys, Object.keys/values/entries, and property iteration patterns.

What are Object Properties?

Every key-value pair inside an object is called a property. JavaScript gives you fine-grained control over how each property behaves — whether it can be changed, deleted, or even seen in a loop.

Think of object properties like columns in a spreadsheet: each column has a name (key) and a value. But unlike a spreadsheet, JavaScript also lets you control whether a column is visible, editable, or deletable.

Adding, Reading, and Deleting Properties

Example

const profile = {}; // Add properties profile.name = "Aman"; profile["role"] = "developer"; // Read properties console.log(profile.name); console.log(profile["role"]); // Delete properties delete profile.role; console.log(profile);

Output

Aman
developer
{ name: 'Aman' }

Object.keys(), Object.values(), Object.entries()

These three are the most used methods to extract data from objects:

Example

const student = { name: "Priya", marks: 92, city: "Jaipur" }; console.log(Object.keys(student)); // Array of keys console.log(Object.values(student)); // Array of values console.log(Object.entries(student)); // Array of [key, value] pairs

Output

[ 'name', 'marks', 'city' ]
[ 'Priya', 92, 'Jaipur' ]
[ [ 'name', 'Priya' ], [ 'marks', 92 ], [ 'city', 'Jaipur' ] ]

Practical Use: Convert Object to Array and Back

Example

const prices = { apple: 50, mango: 80, banana: 30 }; // Double all prices using entries() const updated = Object.fromEntries( Object.entries(prices).map(([fruit, price]) => [fruit, price * 2]) ); console.log(updated);

Output

{ apple: 100, mango: 160, banana: 60 }

Computed Property Names (Dynamic Keys)

Example

Output

{ username: 'riya_dev', username_id: 42 }

Property Shorthand (ES6)

When the variable name matches the key name:

js example

const name = "Rahul";
const age = 28;
const company = "Google";

// ❌ Verbose old way
const dev1 = { name: name, age: age, company: company };

// ✅ ES6 shorthand
const dev2 = { name, age, company };

console.log(dev2);

Output

{ name: 'Rahul', age: 28, company: 'Google' }

Property Iteration

for...in loop

Example

const car = { brand: "Honda", model: "City", year: 2022 }; for (let key in car) { console.log(`${key} → ${car[key]}`); }

Output

brand → Honda
model → City
year → 2022

⚠️ for...in also iterates inherited properties. Use hasOwnProperty() to filter.

Safe iteration with Object.keys()

Example

const grades = { maths: 90, science: 85, history: 78 }; Object.keys(grades).forEach(subject => { console.log(`${subject}: ${grades[subject]}`); });

Output

maths: 90
science: 85
history: 78

Checking Property Existence

js example

const config = { theme: "dark", language: "en" };

// 1. 'in' operator (checks own + prototype)
console.log("theme" in config);       // true
console.log("fontSize" in config);    // false

// 2. hasOwnProperty (own properties only)
console.log(config.hasOwnProperty("theme"));    // true
console.log(config.hasOwnProperty("toString")); // false (inherited)

// 3. Optional chaining (safe access)
console.log(config.fontSize?.value);  // undefined (no error)

Output

true
false
true
false
undefined

Property Descriptors — Advanced Control

js example

const settings = {};

Object.defineProperty(settings, "maxRetries", {
  value: 3,
  writable: false,      // cannot change value
  enumerable: true,     // shows in for...in / Object.keys
  configurable: false   // cannot delete or redefine
});

console.log(settings.maxRetries); // 3

settings.maxRetries = 10;         // silently fails (or throws in strict mode)
console.log(settings.maxRetries); // still 3

console.log(Object.getOwnPropertyDescriptor(settings, "maxRetries"));

Output

3
3
{ value: 3, writable: false, enumerable: true, configurable: false }

Object.freeze() vs Object.seal()

js example

const config = { debug: true, version: "1.0" };

// freeze() — no add, delete, or modify
Object.freeze(config);
config.debug = false;      // silently ignored
config.newProp = "test";   // silently ignored
delete config.version;     // silently ignored
console.log(config);

// seal() — can modify existing, but no add/delete
const settings = { logLevel: "info" };
Object.seal(settings);
settings.logLevel = "debug"; // ✅ allowed
settings.newProp = "test";   // ❌ silently ignored
console.log(settings);

Output

{ debug: true, version: '1.0' }
{ logLevel: 'debug' }

Feature	`freeze()`	`seal()`
Modify existing properties	❌ No	✅ Yes
Add new properties	❌ No	❌ No
Delete properties	❌ No	❌ No
Use case	Config constants	Restrict shape only

Getter and Setter Properties

js example

const circle = {
  _radius: 5,
  
  get area() {
    return Math.PI * this._radius ** 2;
  },
  
  set radius(r) {
    if (r <= 0) throw new Error("Radius must be positive");
    this._radius = r;
  }
};

console.log(circle.area.toFixed(2));

circle.radius = 10;
console.log(circle.area.toFixed(2));

Output

78.54
314.16

Common Mistakes ❌

1. Using for...in and getting prototype properties

js example

// ❌ Wrong — may include inherited keys
function Person(name) { this.name = name; }
Person.prototype.species = "human";
const p = new Person("Anu");

for (let key in p) {
  console.log(key); // name AND species (unwanted!)
}

// ✅ Correct — guard with hasOwnProperty
for (let key in p) {
  if (p.hasOwnProperty(key)) console.log(key); // name only
}

2. Confusing Object.keys() with for...in

Example

// ✅ Object.keys() — own enumerable only (safe) console.log(Object.keys(p)); // ['name'] // ⚠️ for...in — own + inherited enumerable (needs guard)

3. Accessing a nested property of undefined

js example

const user = { profile: null };

// ❌ TypeError
console.log(user.profile.name);

// ✅ Optional chaining
console.log(user.profile?.name); // undefined

Interview Questions 🎯

Q1. What is the difference between Object.keys(), Object.values(), and Object.entries()? > keys() returns an array of property names, values() returns an array of property values, and entries() returns an array of [key, value] pairs.

Q2. What is a property descriptor? > A hidden metadata object for each property with value, writable, enumerable, and configurable attributes.

Q3. What is the difference between Object.freeze() and Object.seal()? > freeze() prevents adding, deleting, and modifying properties. seal() prevents adding and deleting but allows modifying existing properties.

Q4. What is the difference between in and hasOwnProperty? > in checks both own and inherited (prototype chain) properties. hasOwnProperty checks only the object's own properties.

Q5. What are computed property names? > ES6 feature that lets you use an expression as a key name inside {} using [expression] syntax.

Q6. What is optional chaining (?.) used for with properties? > It safely accesses nested properties without throwing a TypeError if an intermediate value is null or undefined.

Q7. What does delete do to a property? > It removes the property from the object entirely. Returns true on success. Cannot delete non-configurable properties.

Key Takeaways 🏁

Every property has hidden descriptor attributes: writable, enumerable, configurable
Object.keys(), .values(), .entries() are the standard ways to extract property data
Use computed property names [expr] for dynamic keys
ES6 shorthand eliminates { name: name } → just { name }
for...in loops over prototype chain — guard with hasOwnProperty or use Object.keys()
Object.freeze() fully locks; Object.seal() locks structure but allows value changes
Optional chaining ?. prevents TypeError on null/undefined intermediate values

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript Object Properties - Keys, Values, Descriptors & Dynamic Properties.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, objects, object, properties

Continue learning this concept

ObjectsJavaScript Objects - Complete Guide to Object Basics with ExamplesMaster JavaScript objects from scratch. Learn object creation, key-value pairs, dot vs bracket notation, nested objects, and real-world use cases with clear examples.ObjectsJavaScript Object Methods - Built-in Methods & Custom Methods Complete GuideLearn JavaScript object methods: Object.keys, Object.assign, Object.create, custom methods, method shorthand ES6, and built-in static methods with real examples.ObjectsJavaScript Object Programs - Practice Problems with SolutionsSolve JavaScript object programs: CRUD operations, merge, filter, transform, group by, frequency counter, nested access, and common coding interview problems with solutions.ObjectsJavaScript Object Destructuring - Complete Guide with ExamplesMaster JavaScript object destructuring: rename variables, default values, nested destructuring, function parameter destructuring, and array destructuring with real-world examples.ObjectsJavaScript Rest Operator (...) - Parameters, Destructuring & Complete GuideMaster the JavaScript rest operator: rest parameters in functions, object/array rest in destructuring, rest vs spread, variadic functions, and real-world patterns.ObjectsJavaScript Spread Operator (...) - Complete Guide with ExamplesMaster the JavaScript spread operator (...): copy arrays/objects, merge data, pass arguments, shallow vs deep copy, and real-world patterns with clear examples.

PreviousJavaScript Object Programs - Practice Problems with Solutions NextJavaScript Rest Operator (...) - Parameters, Destructuring & Complete Guide