Understanding JavaScript Objects

By /

Objects let you group related data and behavior together under one name, using labeled properties instead of numeric positions. This guide covers how to create, access, and modify objects — a data structure you’ve actually already been using throughout this series without necessarily naming it.

If you’ve worked through our guides on arrays and the DOM, objects are the missing piece — in fact, DOM elements themselves are objects, which is part of why this topic connects so directly to everything covered so far.

By the end of this guide, you’ll be able to model genuinely realistic data — a user profile, a product listing, a form’s state — instead of relying on a scattered pile of separate variables to represent one thing.

What an Object Actually Is

According to MDN’s guide to JavaScript object basics, an object is a collection of related data and/or functionality, usually made up of several variables and functions — called properties and methods once they live inside an object.

const person = {
  name: "Alex",
  age: 30,
  isStudent: false
};

Objects vs. Arrays

According to freeCodeCamp’s beginner’s guide to objects, a major difference between objects and other data types is that objects can store different types of data as their values, accessed through named properties rather than the numeric indexes covered in our arrays guide. Use an array when order and position matter; use an object when each value has a natural, meaningful name.

Accessing Properties

console.log(person.name); // "Alex" — dot notation
console.log(person["age"]); // 30 — bracket notation

Dot notation is more common and easier to read; bracket notation becomes necessary when the property name is stored in a variable, or contains characters that wouldn’t work as a regular identifier.

Related Articles:

const key = "name";
console.log(person[key]); // "Alex" — bracket notation with a variable
console.log(person.key);  // undefined — dot notation can't do this

That last line is a common point of confusion: person.key looks for a literal property named "key", not the value stored inside the key variable. Only bracket notation can use a variable to look up a property dynamically.

Adding and Updating Properties

person.email = "alex@example.com"; // adds a new property
person.age = 31;                    // updates an existing one

Objects Can Contain Methods

A property that holds a function is called a method:

const person = {
  name: "Alex",
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

person.greet(); // Hello, I'm Alex

The this keyword inside a method refers to the object it belongs to — this.name means “the name property of whichever object called this method,” which is exactly what lets the same method work correctly on different objects without hardcoding a specific name.

Nested Objects

Object values aren’t limited to simple types — they can hold other objects and arrays, letting you model genuinely realistic, structured data:

const user = {
  name: "Alex",
  address: {
    city: "Austin",
    zip: "78701"
  },
  hobbies: ["reading", "chess"]
};

console.log(user.address.city); // "Austin"
console.log(user.hobbies[0]);   // "reading"

Accessing nested data just means chaining dot notation deeper — user.address.city reads as “the city property, of the address property, of user.” This pattern shows up constantly in real API responses, which are frequently several layers of nested objects and arrays.

Shorthand Property Names

const name = "Alex";
const age = 30;

// Long form
const person1 = { name: name, age: age };

// Shorthand — when the variable name matches the property name
const person2 = { name, age };

When a variable’s name already matches the property name you want, JavaScript lets you skip repeating it — a small but genuinely common convenience in real-world code, especially when building an object from several existing variables at once.

Computed Property Names

const propName = "score";
const result = {
  [propName]: 95
};
console.log(result.score); // 95

Wrapping an expression in square brackets inside an object literal lets you use a dynamic value as the property name itself, rather than a fixed one — useful when the property name isn’t known until the code actually runs.

Looping Through an Object

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

Note this uses for...in, which loops through an object’s keys — different from the for...of loop covered in our loops guide, which is built for arrays and other iterables instead.

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

const scores = { math: 90, science: 85, art: 100 };

console.log(Object.keys(scores));   // ["math", "science", "art"]
console.log(Object.values(scores)); // [90, 85, 100]
console.log(Object.entries(scores)); // [["math", 90], ["science", 85], ["art", 100]]

These three built-in methods convert an object’s data into arrays, which unlocks all the array methods covered in our arrays guide — for example, chaining Object.values(scores).reduce(...) to sum every score, something you can’t do directly on the object itself.

Destructuring Objects

const { name, age } = person;
console.log(name, age); // "Alex" 31

const { name: fullName } = person; // rename while destructuring
console.log(fullName); // "Alex"

Destructuring pulls specific properties out into their own variables in one line, rather than writing const name = person.name; repeatedly for each property you need — a pattern you’ll see constantly in real-world JavaScript, especially in function parameters.

Removing a Property

delete person.email;

Comparing Objects

const a = { x: 1 };
const b = { x: 1 };
console.log(a === b); // false — different objects in memory

const c = a;
console.log(a === c); // true — same object, same reference

This is a genuine source of beginner confusion: a and b look identical, but === compares object references, not their contents — so two separately created objects with the same properties are never considered equal this way, even if every value inside matches exactly.

Objects Everywhere: The DOM Is an Object

As covered in our DOM guide, every element you select with querySelector() is itself an object, with properties like textContent and methods like addEventListener(). Understanding plain objects makes DOM manipulation click more clearly, since you’ve actually been working with objects — reading properties, calling methods — throughout that entire guide.

Two Ways to Create an Object

The curly-brace syntax shown so far is called an object literal — the most common way to create an object with known properties upfront. According to MDN’s guide to working with objects, object properties are basically the same as variables, except they’re associated with an object rather than a scope — and property names are case-sensitive, just like variable names covered in our variables guide.

// Object literal — most common
const car = { make: "Toyota", model: "Corolla" };

// Object constructor — less common, same result
const car2 = new Object();
car2.make = "Honda";
car2.model = "Civic";

Stick with object literals unless you have a specific reason to use the constructor form — they’re shorter, more readable, and by far the more common pattern in real-world JavaScript.

Checking Whether a Property Exists

Accessing a missing property returns undefined rather than throwing an error, which can make it hard to tell whether a property is genuinely missing or just set to undefined on purpose. The hasOwnProperty() method resolves this ambiguity directly:

console.log(person.hasOwnProperty("name")); // true
console.log(person.hasOwnProperty("phone")); // false

Objects and JSON

JSON — the format most APIs use to send data, as covered in our APIs guide — is essentially text formatted to look like a JavaScript object. JSON.stringify() converts an object into that text format, and JSON.parse() converts it back:

const data = { name: "Alex", age: 30 };
const json = JSON.stringify(data);
console.log(json); // '{"name":"Alex","age":30}'

const parsed = JSON.parse(json);
console.log(parsed.name); // "Alex"

This is exactly what’s happening behind the scenes every time you call response.json() on a fetch result — the raw text response is being parsed back into a genuine JavaScript object you can work with directly.

Common Mistakes Beginners Make

  • Comparing objects with ===. As shown above, this checks reference equality, not content — two objects with identical properties still aren’t === equal unless they’re literally the same object.
  • Confusing dot notation with a variable key. obj.key looks for a property literally named “key” — using a variable’s value as the key requires bracket notation: obj[key].
  • Forgetting that objects are mutable even when declared with const. const prevents reassigning the variable itself, but properties inside the object can still be changed freely — this is a common surprise for people coming from languages where const means fully frozen.
  • Trying to loop an object with for…of. Plain objects aren’t iterable by default — use for...in, or convert with Object.entries() first if you want for...of.

A few loose threads worth tying off before moving on. Object values aren’t limited to primitives — they can nest freely, holding arrays or other objects, exactly as shown above. If you ever need a Map instead of a plain object, it’s a more specialized structure with a couple of extra guarantees (reliable insertion order, any type as a key) — worth knowing exists, though plain objects cover the overwhelming majority of everyday use. And if you’re ever checking whether two objects hold the same data rather than the same reference, comparing their JSON.stringify() output is a common, if imperfect, shortcut — it has edge cases with property order and certain data types, but works well enough for straightforward comparisons.

Objects are one of the most fundamental structures in JavaScript — genuinely everywhere, from simple data grouping to the DOM elements you’ve been manipulating throughout this series. The comparison and mutability quirks covered above — reference equality, mutable properties inside a const object — are worth sitting with a little longer than the rest, since they’re the details most likely to cause a confusing bug later rather than an obvious error message right away.

From here, pairing this with our guides on arrays and APIs covers the two places you’ll use objects most: modeling your own data, and working with whatever a real API sends back.

Next: JavaScript Classes →

Leave a Comment

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

Scroll to Top