JavaScript Objects

Object Basics

Objects are collections of key-value pairs, where each key (also called a property name) is associated with a value. Keys are strings (or Symbols), and values can be any data type: numbers, strings, booleans, arrays, other objects, or functions. Objects group related data and functionality together, making code more organized and meaningful.

Properties are values associated with an object—they represent characteristics or attributes of the thing the object represents. For example, a person object might have properties like firstName, lastName, age, and email. Each property has a name (key) and a value. Properties are accessed using the object name followed by a dot and the property name.

Methods are functions stored as object properties. They represent actions or behaviors that the object can perform. For example, a person object might have a greet() method or a calculateAge() method. Methods can access and modify the object's properties using the this keyword, which refers to the object the method belongs to.

You can access object properties using two notations: dot notation (object.property) or bracket notation (object["property"]). Dot notation is more concise and commonly used when you know the property name in advance. Bracket notation is necessary when property names have spaces, start with numbers, are stored in variables, or are determined dynamically at runtime.

Objects are mutable, meaning they can be changed after creation. You can add new properties, modify existing property values, delete properties, and add or remove methods. Even objects declared with const can have their properties modified—const only prevents reassigning the variable to a different object, not modifying the object's contents. This mutability makes objects flexible for representing dynamic, changing data.

// Object literal
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  eyeColor: "blue"
};

// Accessing properties (dot notation)
console.log(person.firstName); // "John"
console.log(person.age);       // 30

// Accessing properties (bracket notation)
console.log(person["lastName"]); // "Doe"

// Adding new properties
person.city = "New York";
person["country"] = "USA";

Object Methods

Methods are functions stored as object properties—they define what an object can do. While regular properties hold data, methods hold behavior. When you define a function as a property of an object, it becomes a method of that object. Methods are defined just like properties but with a function as the value.

You access and call methods using the object name, a dot, the method name, and parentheses for arguments: objectName.methodName(). The parentheses are crucial—they invoke the method. Without parentheses, you're referencing the function itself rather than calling it. For example, person.greet() calls the method, while person.greet references it.

Inside a method, the this keyword refers to the object that the method belongs to. This allows methods to access and manipulate the object's own properties. For example, in a person object's fullName() method, this.firstName accesses that person's firstName property. The this keyword creates a self-reference to the object.

Methods can access and modify object properties using this. They can read property values (this.age), change them (this.age++), call other methods (this.fullName()), and perform operations using multiple properties. This makes objects capable of managing their own data and behavior, a key principle of object-oriented programming.

Objects can contain any data type as property values, including other objects. This creates nested objects or object hierarchies. For example, a person object might have an address property that's itself an object with street, city, and zipCode properties. Access nested properties using multiple dots: person.address.city. Objects can also contain arrays as properties, and arrays can contain objects as elements, creating complex data structures.

// Object with methods
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  },
  greet: function() {
    return "Hello, I'm " + this.fullName();
  }
};

// Calling methods
console.log(person.fullName()); // "John Doe"
console.log(person.greet());    // "Hello, I'm John Doe"

// Nested objects
const student = {
  name: "Alice",
  grades: {
    math: 95,
    science: 88
  }
};

console.log(student.grades.math); // 95