JS Objects

Object Study Path

Start by creating objects, then learn properties and methods. Next, understand this, how to display objects, and when constructors are useful. Finally, learn modern patterns like destructuring and optional chaining.

Object Intro

Objects store data as key-value pairs. They are used to model real-world entities like users, products, and settings.

const user = {
  name: "Ozan",
  age: 30,
  isAdmin: false
};

console.log(user.name);

You can also create objects with variables using property shorthand.

const name = "Jane";
const age = 28;

const person = { name, age };
console.log(person);

Object Properties

Access properties using dot notation or bracket notation. Brackets are useful when the property name is dynamic.

const product = { title: "Laptop", price: 999 };

console.log(product.title);
console.log(product["price"]);

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

You can add, update, and delete properties.

const settings = {};
settings.theme = "light";
settings.fontSize = 16;

settings.fontSize = 18;
delete settings.theme;

console.log(settings);

Computed properties allow dynamic keys when creating objects.

const field = "score";
const obj = { [field]: 100 };

console.log(obj.score);

Object Methods

Methods are functions stored as object properties.

const user2 = {
  name: "John",
  greet: function () {
    return "Hello, " + this.name;
  }
};

console.log(user2.greet());

Modern shorthand method syntax is common.

const car = {
  brand: "Toyota",
  info() {
    return "Brand: " + this.brand;
  }
};

console.log(car.info());

Object this

this refers to the object that calls the method. In regular functions used as methods, this points to the caller.

const account = {
  owner: "Ozan",
  balance: 100,
  deposit(amount) {
    this.balance += amount;
  }
};

account.deposit(50);
console.log(account.balance); // 150

Note: Arrow functions do not have their own this. Avoid using arrows as object methods when you need this.

const bad = {
  name: "X",
  // Arrow has no own this:
  show: () => console.log(this)
};

bad.show();

Object Display

When you log an object, you usually see a structured view. To display objects as text, convert them to strings.

const user3 = { name: "Jane", age: 28 };

console.log(user3);
console.log(JSON.stringify(user3));

To list properties, you can use Object.keys(), Object.values(), or Object.entries().

const obj2 = { a: 1, b: 2 };

console.log(Object.keys(obj2));    // ["a", "b"]
console.log(Object.values(obj2));  // [1, 2]
console.log(Object.entries(obj2)); // [["a",1],["b",2]]

Object Constructors

Constructor functions were used before classes. They create multiple objects with the same structure.

function User(name, age) {
  this.name = name;
  this.age = age;
}

const u1 = new User("Ali", 20);
const u2 = new User("Veli", 22);

console.log(u1, u2);

In modern JavaScript, constructors are often replaced by class, but understanding this pattern helps you read older code.

Modern Must-Know: Destructuring

Destructuring extracts values from objects into variables.

const user4 = { name: "Ozan", age: 30 };

const { name: n, age } = user4;
console.log(n, age);

Modern Must-Know: Optional Chaining and Nullish Coalescing

Optional chaining (?.) safely accesses nested properties. Nullish coalescing (??) provides a default for null or undefined.

const data = { user: { profile: { city: "Hopa" } } };

console.log(data.user?.profile?.city);     // "Hopa"
console.log(data.user?.address?.street);   // undefined

const city = data.user?.address?.city ?? "Unknown";
console.log(city); // Unknown

Next Step

Continue with JS Scope to learn where variables live and how JavaScript resolves names.