What you'll be able to do

By the end of this page you should be able to create an object with named keys, read and write with dot or bracket notation, nest a small object inside another, and explain why user2 = user1 does not copy the data.

Previous post: common array patterns.

Who this is for

  • People who have lists of values but need named fields (name, email, id)
  • Beginners unsure when to use user.name vs user["name"]
  • Anyone who duplicated a user with = and watched both “copies” change

You can skip this if dot/bracket access and shared references already feel solid. Come back when a nested property is undefined and you are not sure why.

An object is a named bag of values

Arrays are ordered by index. Objects store values under keys (also called properties).

const user = {
  id: 1,
  name: "Asha",
  active: true,
};
console.log(user.name); // "Asha"

Scenario A — one Learn author. Fields you care about by name, not position.

Scenario B — a settings bag. { theme: "light", compact: false }.

Prefer object literals { ... } when you start.

Dot vs bracket

const post = { title: "Objects", "reading-time": "15 min" };
console.log(post.title);
console.log(post["reading-time"]);

const key = "title";
console.log(post[key]);

Scenario A — normal identifiers. post.title is clear and short.

Scenario B — key from a variable, or a key with a hyphen. Use brackets: post[key], post["reading-time"].

Dot cannot use a variable name as the key — post.key looks for a property literally called key.

Nested objects

const article = {
  title: "Objects",
  author: { name: "Asha", id: 1 },
};
console.log(article.author.name); // "Asha"

Scenario A — post with author info. Nest a small object.

Scenario B — missing middle. article.author might be missing; reading .name throws. Check step by step, or use optional chaining later when you meet it: article.author?.name.

Changing properties (mutation)

const user = { name: "Asha" };
user.name = "Asha R";
user.role = "editor"; // add
delete user.role; // remove

Scenario A — update a profile field in memory.

Scenario B — const user. You can still change properties; const only blocks rebinding user = .... Same lesson as const arrays.

The big surprise: user2 = user1 shares one object

const user1 = { name: "Asha" };
const user2 = user1;
user2.name = "Ben";
console.log(user1.name); // "Ben"

Scenario A — “backup user” that is not a backup. Same reference, two names.

Scenario B — pass an object into a function that assigns a field. The caller’s object changes.

This mirrors array sharing. A shallow copy for flat objects: const user2 = { ...user1 }; or Object.assign({}, user1). Nested objects inside are still shared — that deeper copy story comes soon.

A tiny practice file

Save as objects.html.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>objects</title>
  </head>
  <body>
    <button id="share">Mutate shared copy</button>
    <button id="copy">Mutate shallow copy</button>
    <pre id="out"></pre>
    <script>
      let user1 = { name: "Asha" };
      const out = document.getElementById("out");
      document.getElementById("share").addEventListener("click", function () {
        user1 = { name: "Asha" };
        const user2 = user1;
        user2.name = "Ben";
        out.textContent = "shared → user1.name = " + user1.name;
      });
      document.getElementById("copy").addEventListener("click", function () {
        user1 = { name: "Asha" };
        const user2 = { ...user1 };
        user2.name = "Ben";
        out.textContent =
          "copy → user1.name = " + user1.name + ", user2.name = " + user2.name;
      });
    </script>
  </body>
</html>

Mistakes I see a lot

1. user2 = user1 as a copy. It shares one object.

2. obj.key when key is a variable. Use obj[key].

3. Reading nested properties without checking the middle.

4. Using arrays when keys are named fields. Prefer objects for records.

5. Assuming const freezes properties. It does not.

6. Relying on key order for program logic. Prefer arrays when order is the point.

What to try before the next post

  1. Build a user with id and name; log both access styles.
  2. Nest an author object; read author.name.
  3. Assign b = a, change b, log a.
  4. Build the tiny HTML file.

Next in this series: Object.keys, values, and entries — walking an object’s keys without treating it like an array.

Try this next outside the series

Objects and references click faster when you connect them to state, payloads, and database-shaped data.

javascripttutorialsdevelopers