Historical Context & Motivation
Early programming languages stored data in simple variables and flat arrays, which worked fine for basic tasks. However, as software grew more complex, developers needed a way to group related pieces of data together under a single name — something that could hold a person's first name, last name, and age all in one place. This need gave rise to objects, one of the most important data structures in modern programming. JavaScript, which was designed in just ten days in 1995, placed objects at the very core of the language. In fact, nearly everything in JavaScript is an object, from arrays to functions.
The central question this lesson addresses is straightforward: how do you create an object in JavaScript, and once you have one, how do you read and write its properties using dot notation and bracket notation? Understanding the difference between these two approaches is essential for writing clean, bug-free code.
Core Principles & Definitions
Before diving into syntax, you need to understand four foundational ideas that make JavaScript objects work. Think of these as the building blocks that every object-related feature rests on.
Object
Property
name: "Alice" is a property where the key is name and the value is "Alice".Dot Notation
obj.key. It is concise and readable, but the key must be a valid identifier (no spaces, no starting with a number, no special characters).Bracket Notation
obj["key"]. It is more flexible — you can use variables, strings with spaces, or computed expressions as property names.Object Literal
{ } used to create an object directly in your code. It is the most common way to create objects in JavaScript.Visual Explanation — Object Anatomy
student object with four properties. Each row represents one key-value pair. The keys (shown in cyan) are always strings, while the values (shown in green or gold) can be any type.Notice how the object is wrapped in curly braces { }. Inside, each property follows the pattern key: value, and properties are separated by commas. The keys in this example (name, age, grade, gpa) are all simple identifiers, which means you can use either dot notation or bracket notation to access them. When you want to retrieve Alice's GPA, you could write student.gpa or student["gpa"] — both return 3.8.
How It Works — Dot vs Bracket Under the Hood
Both dot notation and bracket notation ultimately do the same thing — they look up a property name on an object and return its value. The difference lies in how the property name is provided. Understanding this distinction will help you choose the right notation in every situation.
Dot Notation
With dot notation, you type the property name directly after a period. The JavaScript engine reads the exact characters you write and searches the object for a matching key. The syntax is object.propertyName. Because the engine takes the name literally, the property name must follow the rules of a JavaScript identifier: it cannot start with a number, it cannot contain spaces, and it cannot use reserved characters like hyphens.
student.name always looks for the key "name".Bracket Notation
With bracket notation, you place an expression inside square brackets. The JavaScript engine evaluates that expression first, converts the result to a string, and then uses that string to find the matching key. This means you can pass a variable, a concatenated string, or any expression — making bracket notation far more flexible.
let prop = "name"; student[prop] evaluates prop to "name", then looks up that key.Writing (Setting) Properties
Both notations also let you create or update properties. Writing student.email = "alice@school.edu" or student["email"] = "alice@school.edu" will either add a new email property or overwrite its existing value. If the property does not yet exist, JavaScript automatically creates it — no special declaration is needed.
undefined. For example, student.phone returns undefined if no phone property has been set. This is a common source of subtle bugs, so always double-check your property names!Dot vs Bracket — When to Use Which
Now that you know the mechanics, the natural follow-up question is: when should you use dot notation and when should you reach for bracket notation? The diagram and table below lay out the decision clearly.
| Feature | Dot Notation | Bracket Notation |
|---|---|---|
| Syntax | obj.key | obj["key"] or obj[variable] |
| Key with spaces? | ❌ Not allowed | ✅ Allowed: obj["first name"] |
| Key from a variable? | ❌ Not possible | ✅ obj[myVar] |
| Key starts with a number? | ❌ Syntax error | ✅ obj["2ndPlace"] |
| Readability | Very clean and short | Slightly more verbose |
| Common use case | Known, simple property names | Dynamic keys, computed names, or special characters |
Worked Example — Building a Movie Object
Let's walk through a complete example where we create a movie object, access its properties with both notations, and dynamically add new properties based on user input.
movie object with three properties using the object literal syntax:
const movie = { title: "Inception", year: 2010, director: "Christopher Nolan" };title, year, and director.title is a valid identifier, we use dot notation for a clean read:
console.log(movie.title);"Inception"console.log(movie["director"]);"Christopher Nolan"let userChoice = "year";
console.log(movie[userChoice]);
Here userChoice evaluates to the string "year", so the engine looks up movie["year"]. Note: movie.userChoice would NOT work here — it would look for a literal key called "userChoice", which doesn't exist.2010movie.rating = 8.8;
console.log(movie.rating);8.8 — the property was created automatically.movie.userChoice when they mean movie[userChoice]. With dot notation, the engine takes the name literally — it searches for a property called "userChoice" instead of evaluating the variable. If you need a dynamic lookup, you must use brackets.Strengths & Limitations
JavaScript objects are incredibly versatile, but like any tool, they have trade-offs. The table below summarizes the key strengths and limitations of objects and property access patterns.
| Strengths | Limitations |
|---|---|
| Flexible structure — properties can be added or removed at any time | No built-in error if you access a nonexistent property (returns undefined) |
| Values can be any type, including nested objects and functions (methods) | Property order is not guaranteed for non-integer keys in all engines |
| Dot notation provides clean, readable syntax for most use cases | Dot notation cannot handle dynamic keys, keys with spaces, or keys that start with numbers |
| Bracket notation handles every valid string key and supports runtime computation | Bracket notation is slightly more verbose and can reduce readability if overused |
| JSON, the universal data exchange format, is directly based on object syntax | Large objects with many properties can become hard to manage without additional patterns like classes |
Connection to Advanced Concepts
Once you master basic object creation and property access, you'll encounter more advanced features built on the same foundation. The table below previews how today's concepts connect to topics you'll explore later in your JavaScript journey.
| What You Learned Today | Where It Leads |
|---|---|
Object literals { } | Classes & Constructors — Create reusable blueprints for objects with class and new |
| Dot & bracket property access | Destructuring — Extract multiple properties at once: const { name, age } = student; |
| Dynamic keys via brackets | Computed property names — Use expressions as keys inside literals: { [expr]: value } |
| Adding properties after creation | Object.freeze & Object.seal — Lock objects to prevent accidental modifications |
| Objects as key-value stores | Map & WeakMap — Dedicated key-value collections with any type of key, better performance for frequent additions/deletions |
Every one of these advanced features assumes you understand how objects store key-value pairs and how dot and bracket notation work. Mastering today's lesson gives you the foundation for object-oriented programming, API data handling, and virtually every real-world JavaScript application.
Practice Problems
student.name and student["name"] produce the same result, but student.name and student[name] (without quotes) might not. What is the critical difference?console.log(car.year) output?
const car = { make: "Toyota", model: "Camry", year: 2023 }; car.year = 2024;getProperty that takes an object and a string representing a property name, then returns the value of that property. Which notation must you use inside the function, and why?"first name", "last name", and "phone number" (note: these keys contain spaces). Write code to create a contact object and then log the contact's phone number. Can you use dot notation for these keys? Explain.const settings = {}; const keys = ["volume", "brightness", "contrast"]; const values = [75, 50, 60]; for (let i = 0; i < keys.length; i++) { settings[keys[i]] = values[i]; }
Explain step by step what happens in the loop. Why would dot notation be impossible here? What does the settings object look like when the loop finishes?Lesson Summary
A JavaScript object is an unordered collection of key-value pairs created with the object literal syntax { key: value }. Each key is a string (the property name), and each value can be any data type. Properties can be read or written at any time — JavaScript objects are dynamic and flexible.
You access properties using two notations. Dot notation (obj.key) is concise and ideal when the key is a known, valid identifier. Bracket notation (obj["key"] or obj[variable]) is essential when the key contains spaces, starts with a number, or is stored in a variable. Default to dot notation for readability, and switch to bracket notation when flexibility is needed. Mastering both unlocks every advanced JavaScript pattern from destructuring to class-based programming.