JavaScript Objects

An object in JavaScript is a data structure that stores related data and behavior as key-value pairs.

• Properties: The data stored in objects.
• Keys: Always a string or symbol (the label).
• Values: Can be any data type, including strings, numbers, booleans, or even other objects.
• Methods: A function that is a property of an object.

Creating Objects

There are several ways to define objects depending on your use case:

1. Object Literal Syntax

The most common and simplest way to create an object.

const car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2020
};

2. Using the new Object() Constructor

const book = new Object();
book.title = "JavaScript Guide";
book.author = "Jane Doe";

This syntax is valid but rarely used in practice. Object literal syntax achieves the same result with less verbosity and is strongly preferred. You may encounter new Object() in older codebases, but it is not recommended for new projects.

3. Using Classes (ES6+)

Useful for creating multiple objects of the same "type" with a blueprint.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
const user = new Person("Alice", 25);

Accessing and Modifying Properties

Access Methods

1. Dot Notation: The standard way to access values (object.key).
   • Example: person.name returns "John".
2. Bracket Notation: Required if the key has spaces, special characters, or is stored in a variable.
   • Example: settings["dark mode"] returns true.

Modifying Objects

Objects are mutable, meaning you can change them after they are created:

• Add: person.city = "New York";
• Update: person.age = 31;
• Delete: delete person.isStudent;

Advanced Object Concepts

Nested Objects

An object can be a property of another object. To access deep data, you "chain" the keys.

const user = {
  name: "Jane",
  address: {
    city: "Los Angeles",
    zip: "90001"
  }
};

console.log(user.address.city); // "Los Angeles"

The this Keyword

Inside an object method, this refers to the object itself. This allows methods to access other properties within the same object.

const person = {
  name: "Emma",
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // "Hello, my name is Emma"

However, arrow functions do not have their own this binding — they inherit this from the surrounding scope instead. This means defining an object method as an arrow function will cause this to behave unexpectedly:

const person = {
  name: "Emma",
  greet: () => {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // "Hello, my name is undefined"

For object methods that need to reference the object itself, always use a regular function, not an arrow function.

Iterating Over Objects

The for…in loop is the primary tool for iterating over an object's keys.

for (let key in user) {
  console.log(key, user[key]);
}

Built-in Object Methods

JavaScript provides static methods to extract data from objects into arrays, which is very useful for manipulation: