2.5 Objects

After exploring primitive types, let's now look at reference types in JavaScript. The reference category includes objects, arrays, and functions. In this lesson we focus on objects. An object in JavaScript — as in many other languages — is similar to an object in real life. Think of a person: they have a name, an age, an address, and so on. These are the properties of a person, and JavaScript objects work exactly the same way.

Grouping related variables into an object

When several variables are strongly related, it is cleaner to wrap them inside a single object instead of keeping them as independent variables. For example, name and age can be grouped into one person object:

const person = {
  name: 'John',
  age: 30
};
console.log(person);

We declared person with const (because we don't want to reassign the whole object) and used the literal object syntax: a pair of braces containing one or more key: value pairs separated by commas. The keys (name, age) are the properties of the object.

Reading and updating properties

There are two ways to access an object's properties:

  • Dot notation: cleaner and concise — person.name = 'John' or console.log(person.name).
  • Bracket notation: useful when the property name is dynamic — person['name'] = 'Mary'.

Dot notation should be your default because it is more readable. Bracket notation shines when the target property is only known at runtime, for example when the UI lets the user select which property to modify: person[selection] reads or writes whichever property is currently selected. That's it for objects in JavaScript. In the next video we'll move on to arrays.

Summary

This lesson introduces JavaScript objects as a way to organize related data through key-value pairs (properties), using a person object with name and age as an example. It covers object literal syntax, two methods of accessing and modifying properties (dot notation and bracket notation), and explains when to use bracket notation for dynamic property access based on runtime values.

Key points

  • Objects group related properties that represent real-world entities (e.g., a person with name and age properties)
  • Object literal syntax uses curly braces to define key-value pairs: const person = { name: 'John', age: 30 }
  • Dot notation (person.name) is the preferred, cleaner way to access and modify object properties
  • Bracket notation (person['name']) enables dynamic property access when the property name is stored in a variable or determined at runtime
  • Both access methods can read and modify property values with the same syntax
  • Bracket notation is essential when user interface interactions determine which property to access—the property name changes based on user selection

FAQ

What's the difference between dot notation and bracket notation for accessing object properties?

Dot notation (person.name) is more concise and is your default choice for cleaner code. Bracket notation (person['name']) is used when the property name is stored in a variable or determined at runtime—for example, when a user selects which property to access through your interface.

Why use objects instead of declaring multiple separate variables?

Objects keep related data organized together, making code cleaner and more maintainable. A person object with name and age properties groups logically related information instead of scattering them as separate variables, making your code's intent much clearer.

When should I use bracket notation instead of dot notation?

Use bracket notation when you don't know the property name at code-write time but it will be determined when the code runs. For instance, if a user selects a property name from a dropdown, you store that selection in a variable and use bracket notation to access it dynamically: person[selection].