Objects in JavaScript Overview

In JavaScript, objects are one of the core building blocks of the language. They allow developers to group related data and functionality into a single, structured entity. Whether you’re managing user data, API responses, or configurations, understanding objects is essential to mastering JavaScript.

What is an Object in JavaScript?

An object is a collection of properties, where each property is a key–value pair.

Objects are mutable, meaning their properties can be added, changed, or deleted after creation. Objects are used to represent real-world entities such as users, products, or cars, and they help organize data efficiently.

Creating Objects in JavaScript

There are several ways to create objects in JavaScript:

a. Object Literal

The simplest and most common method.

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

b. Using the Object Constructor

const person = new Object();
person.name = "Alice";
person.age = 25;

c. Using a Constructor Function

function Person(name, age) {
  this.name = name;
  this.age = age;
}
const alice = new Person("Alice", 25);

d. Using Object.create()

Creates a new object with a specific prototype.

const proto = { greet: function() { console.log("Hello!"); } };
const obj = Object.create(proto);
obj.name = "Alice";

e. Using ES6 Classes

Modern, syntactic sugar over constructor functions.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}
const alice = new Person("Alice", 25);

Working with Object Properties

Accessing Properties

• Dot notation: person.name
• Bracket notation: person["name"]

Adding or Modifying Properties

person.job = "Developer"; // Add
person.age = 26;          // Modify

Deleting Properties

delete person.age;

Computed Property Names (ES6+)

const key = "name";
const obj = { [key]: "Alice" }; // { name: "Alice" }

Object Methods

Methods are functions stored as properties in an object.

const person = {
  name: "Alice",
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
};
person.greet(); // Hi, I'm Alice

Prototypes and Inheritance

JavaScript uses prototypal inheritance — every object inherits from another object called its prototype.

const person = { name: "Alice" };
const employee = Object.create(person);
employee.job = "Developer";

console.log(employee.name); // Inherited from person

Common Object Methods

Iterating Over Objects

Using for...in Loop

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

Using Object.entries() with for...of

for (let [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`);
}

Object Destructuring (ES6+)

Extract properties directly into variables.

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

JSON and Objects

Convert between JavaScript objects and JSON strings.

const json = JSON.stringify(person); // Object → JSON
const obj = JSON.parse(json);        // JSON → Object

Key Characteristics of JavaScript Objects

• Dynamic: You can add or remove properties at runtime.
• Reference Type: Objects are assigned by reference, not copied.

const obj1 = { a: 1 };
const obj2 = obj1;
obj2.a = 2;
console.log(obj1.a); // 2

Equality: Two objects are equal only if they reference the same instance.

console.log({ a: 1 } === { a: 1 }); // false

Common Use Cases

• Representing structured data (e.g., user profiles)
• Storing configurations or settings
• Creating reusable components and modules
• Implementing prototypes and inheritance
• Quick key-value storage and lookups

Advanced Object Features

Symbols

Unique keys that prevent naming conflicts.

const id = Symbol("id");
const user = { [id]: 123 };

Getters and Setters

Define how properties are accessed or modified.

const obj = {
  get name() { return this._name; },
  set name(value) { this._name = value; }
}

Proxies

Intercept and customize object behavior.

const handler = {
  get(target, prop) {
    return prop in target ? target[prop] : "Not Found";
  }
};
const proxy = new Proxy({ name: "Alice" }, handler);
console.log(proxy.age); // Not Found