ReviseAlgo Logo

Objects & Prototypes

Object Literals & Property Access

Master JavaScript object basics. Understand object literal creation, dot vs bracket notation for property access, and handling dynamic property lookups.

Last Updated: July 15, 2026 • 10 min read

1. Introduction

Objects are the core data structure in JavaScript, used to store collections of key-value pairs. Properties can hold primitive values, arrays, functions (methods), or other nested objects.

2. Why It Matters

Objects are used for model representation, JSON parsing, configuration structures, and state management. Mastering property access notation is essential for building dynamic web applications.

3. Real-World Analogy

Think of a Custom Office Organizer:

  • Object: The organizer itself, containing slots of varying sizes.
  • Properties (Keys): The labels on the slots ("Pens", "Stamps", "Envelopes").
  • Values: The actual items kept inside the slots.
  • Property Access: Opening a drawer. Using dot notation is like grabbing items from standard drawers, while bracket notation is like using a keypad code to open a drawer dynamically based on current workspace needs.

4. How It Works

Objects are created using curly braces (Object Literals). Properties are accessed in two ways:

1. Dot Notation:

The standard way to access properties. It requires the property name to be a valid JavaScript identifier.

2. Bracket Notation:

Accepts a string expression representing the property name, allowing you to access properties dynamically at runtime.

5. Internal Architecture

JavaScript object property keys are always strings or symbols. If you use a non-string value (like an object or number) as a key inside bracket notation, the JavaScript engine automatically converts it to a string by calling its toString() method before looking up the value.

6. Practical Example

This script demonstrates dynamic property lookup and assignment based on user input parameters:

7. Common Mistakes

  • Trying to use dot notation for dynamic variables: Writing user.key looks for a property literally named "key", instead of resolving the variable key. Use bracket notation (user[key]) instead.
  • Object key coercion trap: Using objects as keys inside bracket notation coerces them to the string "[object Object]", which can lead to properties overwriting each other.

8. Quick Quiz

Q1: What notation must you use to access object properties when their keys contain spaces or special characters?

A) Dot Notation

B) Bracket Notation

Answer: B — Bracket notation is required to access properties with keys that are not valid JavaScript identifiers (e.g. keys containing hyphens or spaces).

9. Scenario-Based Challenge

The Dynamic Config Selector:

A client requests localization formats based on country code: US formats differently than GB. Design an object mapping country configurations and write a resolver using bracket notation to return the correct format parameters.

10. Debugging Exercise

Explain why this code logs undefined, and how to fix it:

const config = {
  port: 8080,
  host: 'localhost'
};

const setting = 'port';
console.log(config.setting); // logs undefined!
View Solution

Diagnosis: The dot notation searches literally for a key named "setting" inside the config object, which does not exist.

Fix: Use bracket notation to resolve the value of the setting variable dynamically:

console.log(config[setting]); // 8080

11. Interview Questions

🟢 Q1: Explain how JavaScript handles object key lookup internally when non-string types are passed as keys.

Answer: Object property keys are always strings or symbols. If a non-string type is passed as a key (e.g. myObject[123] or myObject[anotherObject]), the engine automatically calls the value's toString() method to convert it into a string before looking up the property. For objects, this results in the key "[object Object]", which can cause keys to conflict and overwrite one another.

12. Production Considerations

  • • Use Maps for Dynamic Keys: If you need to map dynamic key-value pairs where keys can be complex objects rather than strings, use ES6 Map objects instead of standard object literals to avoid key string coercion bugs.