What are JavaScript Objects?

Objects are one of the most important concepts in JavaScript. Think of an object as a standalone entity that can hold related information and functionality. If a variable is a box holding one item, an object is a filing cabinet with multiple labeled drawers (called properties and methods).

A property is a variable attached to the object (a key: value pair). A method is a function attached to the object.

1. Creating Objects

There are two common ways to create an object:

a) Object Literal Syntax {} (Most Common)

This is the easiest and most readable way to create an object. You define its properties and methods inside curly braces {}.

// Creating a 'user' object
const user = {
  name: "Alice",     // Property 'name' with value "Alice"
  age: 28,           // Property 'age' with value 28
  isAdmin: false     // Property 'isAdmin' with value false
};

b) The new Object() Constructor

This method is less common but achieves the same result. You create an empty object and then add properties to it.

const car = new Object();
car.make = "Tesla";
car.model = "Model 3";
car.year = 2024;

2. Accessing Object Properties

You can access an object's properties (get their values) using two main syntaxes:

a) Dot Notation (.)

The most common and cleanest way. Use the object name, a dot, and the property name.

console.log(user.name); // Output: "Alice"
console.log(car.make);  // Output: "Tesla"

b) Bracket Notation []

Useful when the property name is stored in a variable or contains spaces/special characters.

console.log(user['age']); // Output: 28

let key = 'isAdmin';
console.log(user[key]);   // Output: false

3. Adding Methods to Objects

A method is a function that is a property of an object. You can add functionality to your objects.

const user = {
  name: "Bob",
  age: 30,
  // Adding a method 'greet'
  greet: function() {
    console.log("Hello, my name is " + this.name + "!"); // 'this' refers to the object itself
  }
};

// Calling the object's method
user.greet(); // Output: "Hello, my name is Bob!"

Pro Tip: The this keyword refers to the current object the code is being written inside—in this case, the user object.

4. Modifying and Adding Properties

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

const dog = {
  name: "Rex",
  breed: "German Shepherd"
};

// Modifying an existing property
dog.breed = "Siberian Husky";

// Adding a new property
dog.age = 5;
dog.bark = function() {
  console.log("Woof Woof!");
};

console.log(dog);
// Output: { name: "Rex", breed: "Siberian Husky", age: 5, bark: [Function] }

5. Looping Through an Object (for...in loop)

To iterate over all properties of an object, you use the for...in loop.

const movie = {
  title: "Inception",
  director: "Christopher Nolan",
  year: 2010
};

for (let key in movie) {
  // key is the property name (e.g., 'title', 'director')
  // movie[key] is the value of that property
  console.log(key + ": " + movie[key]);
}
// Output:
// title: Inception
// director: Christopher Nolan
// year: 2010

6. Practical Example: A Simple Product Object

Let's put it all together in a real-world example.

const product = {
  name: "Wireless Mouse",
  price: 29.99,
  inStock: true,
  // Method to apply a discount
  applyDiscount: function(percent) {
    const discount = this.price * (percent / 100);
    this.price = this.price - discount;
    console.log(`New price after ${percent}% discount: $${this.price.toFixed(2)}`);
  },
  // Method to check availability
  checkStock: function() {
    if (this.inStock) {
      console.log("This product is in stock.");
    } else {
      console.log("Sorry, this product is out of stock.");
    }
  }
};

// Using the object
console.log(product.name); // Output: "Wireless Mouse"
product.checkStock();      // Output: "This product is in stock."
product.applyDiscount(10); // Output: "New price after 10% discount: $26.99"

Summary of Key Takeaways:

• Objects are collections of key-value pairs.
• Use the object literal syntax {} for easy creation.
• Access properties with dot notation (obj.property) or bracket notation (obj['property']).
• Methods are functions stored as object properties.
• Use the for...in loop to iterate over an object's properties.
• Objects are dynamic; you can add, modify, or delete properties after creation.