Objects: The Basics

An object groups related information together as labeled pairs — a name for each piece of data, and the data itself.

What Is an Object?

const user = {
  name: "Maya",
  age: 27,
  isStudent: false
};

An object stores data as key–value pairs, inside curly braces { }. Each key (also called a property) is a name; each value is the data behind that name.

name: "Maya" — the key name is paired with the value "Maya"
Commas separate each pair
Unlike an array, order and numeric position don't matter — you access things by name

🪪 Real-life analogy

An object is like an ID card. It doesn't store information as an ordered list — it labels each piece: Name: Maya, Age: 27. You look things up by their label ("what's the Name field say?"), not by counting positions.

Reading and Writing Properties

user.name;           // "Maya"  — dot notation
user["name"];      // "Maya"  — bracket notation

user.age = 28;      // update an existing property
user.city = "Lagos"; // add a brand new property
delete user.isStudent; // remove a property entirely

Use dot notation (user.name) most of the time. Use bracket notation (user["name"]) when the key is stored in a variable, or contains spaces/special characters.

const key = "age";
user[key]; // 28 — bracket notation lets the key be dynamic

Why Do We Use Objects?

Objects model real-world "things" that have several properties — a user, a product, a car — bundling all their related data together instead of scattering it across separate variables like userName, userAge, userIsStudent.

Methods: Functions Inside Objects

const user = {
  name: "Maya",
  greet() {
    return `Hi, I'm ${this.name}`;
  }
};

user.greet(); // "Hi, I'm Maya"

A function stored as a property is called a method. Inside a method, this refers to the object the method was called on — here, this.name means "the name property of whichever object called greet()."

Shorthand Properties

const name = "Maya";
const age = 27;

// Long way — repeating yourself:
const user = { name: name, age: age };

// Shorthand — when the key name matches the variable name, just write it once:
const user2 = { name, age };
// same result: { name: "Maya", age: 27 }

When you are creating an object from existing variables and the property name is the same as the variable name, you can write it just once. This is called shorthand property syntax and you will see it constantly in real code.

Computed Property Names

const field = "score";
const obj = { [field]: 100 };
// { score: 100 } — the square brackets say "evaluate this expression as the key name"

// Useful when building objects dynamically:
function makeObj(key, value) {
  return { [key]: value };
}
makeObj("color", "red");  // { color: "red" }
makeObj("size", 42);      // { size: 42 }

Square brackets inside an object literal let you use any expression — a variable, a function call, a concatenated string — as the property name. Without them, the key is always treated as a literal word.

Useful Object Tools

Object.keys(user);    // ["name", "age", "city"] — just the keys
Object.values(user);  // ["Maya", 28, "Lagos"] — just the values
Object.entries(user); // [["name","Maya"], ["age",28], ...] — pairs

Checking for a Property

"name" in user;              // true
user.hasOwnProperty("name"); // true
user.phone === undefined;    // true — property doesn't exist

Common Mistakes

⚠ Watch out for

Using dot notation with a key that has spaces or starts with a number — user.first name is invalid; use user["first name"].
Forgetting that objects are copied by reference — assigning one object variable to another doesn't create an independent copy (see Data Types).
Using a regular function instead of an arrow function when you need this, or vice versa — arrow functions don't bind their own this, which usually breaks object methods.

Best Practices

Use dot notation by default; switch to brackets only when necessary.
Keep related data together in one object rather than many loose variables.
Use Object.freeze() when you want to guarantee an object's properties can't be changed (covered in Object Methods).

Performance Notes

Property lookups on objects are extremely fast in modern engines, especially when an object's "shape" (its set of keys) stays consistent — avoid adding and removing properties unpredictably on objects used in performance-critical code.

Browser Compatibility

Object literals have existed since JavaScript's earliest days. Shorthand method syntax and Object.entries() are more modern (ES6+) but supported everywhere current.

Interview Questions

What's the difference between dot notation and bracket notation?

Both access a property, but bracket notation accepts a string or variable as the key, which allows dynamic property names, while dot notation requires a fixed, valid identifier written directly in the code.

What does this refer to inside an object method?

It refers to the object the method was called on — effectively "whoever is on the left side of the dot" when the method is invoked.

✏️ Exercise

Create an object book with title, author, and pages properties, then add a method summary() that returns a sentence describing the book using this.

🧠 Quiz

1. How do you delete a property from an object?

Using the delete keyword, e.g. delete obj.property.

2. When must you use bracket notation instead of dot notation?

When the property name is stored in a variable, or contains spaces/special characters/starts with a number.

🚀 Mini Challenge

Write a function describe(obj) that uses Object.entries() to log every key and value in any object passed to it.

Summary

Objects store labeled key–value pairs, unlike the numbered positions of arrays.
Access properties with dot or bracket notation; functions inside objects are called methods.
this inside a method refers to the object it was called on.