JavaScript Mastery - Objects

Introduction to Objects

Objects in JavaScript are reference types that store data as key-value pairs. Unlike arrays which use numeric indices, objects use named keys to access values. Objects are fundamental to JavaScript and represent real-world entities with properties and behaviors. They are mutable and can contain any data type including other objects, arrays, and functions.

Syntax:

const objectName = {
  key1: value1,
  key2: value2,
  key3: value3
};

Examples:

Example 1: Basic Person Object

const person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};
console.log(person); // { name: "John Doe", age: 30, city: "New York" }

Example 2: Product Object

const product = {
  id: 101,
  title: "Laptop",
  price: 999.99,
  inStock: true
};
console.log(product); // { id: 101, title: "Laptop", price: 999.99, inStock: true }

Example 3: Mixed Data Types

const student = {
  name: "Alice",
  grades: [85, 92, 78],
  isActive: true,
  address: null
};
console.log(student); // { name: "Alice", grades: [85, 92, 78], isActive: true, address: null }

---

Ways to Create Objects

JavaScript provides multiple ways to create objects. The most common methods are object literals, the new keyword with Object constructor, and Object.create() method. Each method has its own use cases and benefits. Object literals are the most straightforward and widely used approach for creating simple objects.

Syntax:

// Object Literal
const obj1 = { key: value };

// Constructor Function
const obj2 = new Object();

// Object.create()
const obj3 = Object.create(null);

Examples:

Example 1: Object Literal

const car = {
  brand: "Toyota",
  model: "Camry",
  year: 2023,
  color: "blue"
};
console.log(car); // { brand: "Toyota", model: "Camry", year: 2023, color: "blue" }

Example 2: Constructor Function

const book = new Object();
book.title = "JavaScript Guide";
book.author = "John Smith";
book.pages = 350;
book.published = true;
console.log(book); // { title: "JavaScript Guide", author: "John Smith", pages: 350, published: true }

Example 3: Object.create() Method

const animal = Object.create(null);
animal.species = "Dog";
animal.breed = "Golden Retriever";
animal.age = 3;
animal.friendly = true;
console.log(animal); // { species: "Dog", breed: "Golden Retriever", age: 3, friendly: true }

---

Accessing Object Properties

Object properties can be accessed using two main notations: dot notation and bracket notation. Dot notation is more common and readable when you know the property name at compile time. Bracket notation is useful when property names are dynamic, contain special characters, or are stored in variables. Both methods allow you to retrieve values from object properties.

Syntax:

// Dot Notation
objectName.propertyName

// Bracket Notation
objectName["propertyName"]
objectName[variableName]

Examples:

Example 1: Dot Notation

const employee = {
  firstName: "Sarah",
  lastName: "Johnson",
  position: "Manager",
  salary: 75000
};
console.log(employee.firstName); // "Sarah"
console.log(employee.position); // "Manager"
console.log(employee.salary); // 75000

Example 2: Bracket Notation

const user = {
  username: "john_doe",
  email: "john@example.com",
  "full-name": "John Doe",
  age: 28
};
console.log(user["username"]); // "john_doe"
console.log(user["full-name"]); // "John Doe"
console.log(user["age"]); // 28

Example 3: Dynamic Property Access

const settings = {
  theme: "dark",
  language: "english",
  notifications: true
};
const propertyName = "theme";
console.log(settings[propertyName]); // "dark"

const keys = ["language", "notifications"];
keys.forEach(key => console.log(settings[key])); // "english", true

---

Adding and Updating Properties

Object properties can be added or updated after the object is created using either dot notation or bracket notation. When you assign a value to a property that doesn't exist, it gets added to the object. If the property already exists, its value gets updated. This dynamic nature makes objects very flexible for storing and modifying data.

Syntax:

// Adding/Updating with Dot Notation
objectName.newProperty = value;

// Adding/Updating with Bracket Notation
objectName["newProperty"] = value;

Examples:

Example 1: Adding New Properties

const smartphone = {
  brand: "Apple",
  model: "iPhone 14"
};
smartphone.storage = "128GB";
smartphone.color = "blue";
smartphone["price"] = 799;
console.log(smartphone); // { brand: "Apple", model: "iPhone 14", storage: "128GB", color: "blue", price: 799 }

Example 2: Updating Existing Properties

const profile = {
  name: "Mike Wilson",
  age: 32,
  city: "Boston"
};
profile.age = 33; // Birthday update
profile.city = "Seattle"; // Moved to new city
profile["name"] = "Michael Wilson"; // Full name update
console.log(profile); // { name: "Michael Wilson", age: 33, city: "Seattle" }

Example 3: Dynamic Property Addition

const inventory = {
  apples: 50,
  bananas: 30
};
const newFruit = "oranges";
const quantity = 25;
inventory[newFruit] = quantity;
inventory["grapes"] = 40;
console.log(inventory); // { apples: 50, bananas: 30, oranges: 25, grapes: 40 }

---

Deleting Properties

The delete operator is used to remove properties from objects. It returns true if the property is successfully deleted or if the property doesn't exist. The delete operation modifies the original object by completely removing the specified property. It's important to note that delete only works on object properties, not on variables or function parameters.

Syntax:

delete objectName.propertyName;
delete objectName["propertyName"];

Examples:

Example 1: Deleting with Dot Notation

const laptop = {
  brand: "Dell",
  processor: "Intel i7",
  ram: "16GB",
  storage: "512GB SSD",
  price: 1299
};
delete laptop.price;
delete laptop.storage;
console.log(laptop); // { brand: "Dell", processor: "Intel i7", ram: "16GB" }

Example 2: Deleting with Bracket Notation

const restaurant = {
  name: "Pizza Palace",
  cuisine: "Italian",
  rating: 4.5,
  "delivery-time": "30 minutes",
  location: "Downtown"
};
delete restaurant["delivery-time"];
delete restaurant["location"];
console.log(restaurant); // { name: "Pizza Palace", cuisine: "Italian", rating: 4.5 }

Example 3: Conditional Property Deletion

const gameCharacter = {
  name: "Hero",
  level: 15,
  health: 100,
  mana: 50,
  temporaryBoost: true
};
if (gameCharacter.temporaryBoost) {
  delete gameCharacter.temporaryBoost;
}
delete gameCharacter.mana;
console.log(gameCharacter); // { name: "Hero", level: 15, health: 100 }

---

Nested Objects

Nested objects are objects that contain other objects as property values. This creates a hierarchical structure that can represent complex data relationships. Nested objects are commonly used to model real-world entities with multiple levels of information. You can access nested properties by chaining dot notation or bracket notation.

Syntax:

const nestedObject = {
  level1: {
    level2: {
      level3: value
    }
  }
};
// Access: nestedObject.level1.level2.level3

Examples:

Example 1: User Profile with Address

const userProfile = {
  personal: {
    firstName: "Emma",
    lastName: "Davis",
    age: 28
  },
  address: {
    street: "123 Main St",
    city: "Portland",
    zipCode: "97201"
  },
  preferences: {
    theme: "dark",
    language: "english"
  }
};
console.log(userProfile.personal.firstName); // "Emma"
console.log(userProfile.address.city); // "Portland"
console.log(userProfile.preferences.theme); // "dark"

Example 2: Company Structure

const company = {
  name: "Tech Solutions Inc",
  departments: {
    engineering: {
      employees: 25,
      manager: "John Smith"
    },
    sales: {
      employees: 15,
      manager: "Sarah Johnson"
    },
    hr: {
      employees: 5,
      manager: "Mike Wilson"
    }
  }
};
console.log(company.departments.engineering.manager); // "John Smith"
console.log(company.departments.sales.employees); // 15

Example 3: Product Catalog

const product = {
  id: 12345,
  details: {
    name: "Wireless Headphones",
    specifications: {
      battery: "20 hours",
      connectivity: "Bluetooth 5.0",
      weight: "250g"
    },
    pricing: {
      retail: 199.99,
      wholesale: 149.99
    }
  }
};
console.log(product.details.specifications.battery); // "20 hours"
console.log(product.details.pricing.retail); // 199.99

---

Object Storage and Reference Types

Objects in JavaScript are reference types, meaning variables store references (memory addresses) to objects rather than the actual object values. When you assign an object to multiple variables, they all point to the same object in memory. This means changes made through one variable affect all other variables referencing the same object. Understanding this concept is crucial for avoiding unexpected behavior in JavaScript applications.

Syntax:

const obj1 = { key: value };
const obj2 = obj1; // obj2 references the same object as obj1

Examples:

Example 1: Reference Sharing

const original = {
  name: "Alice",
  age: 25,
  hobbies: ["reading", "swimming"]
};
const copy = original;
copy.age = 26;
copy.hobbies.push("cycling");
console.log(original.age); // 26 (changed!)
console.log(original.hobbies); // ["reading", "swimming", "cycling"]
console.log(original === copy); // true (same reference)

Example 2: Function Parameter References

function modifyUser(user) {
  user.status = "active";
  user.lastLogin = new Date();
}
const userData = {
  username: "john_doe",
  email: "john@example.com"
};
modifyUser(userData);
console.log(userData); // { username: "john_doe", email: "john@example.com", status: "active", lastLogin: [current date] }

Example 3: Array of Object References

const baseConfig = {
  theme: "light",
  language: "en"
};
const userConfigs = [baseConfig, baseConfig, baseConfig];
userConfigs[0].theme = "dark";
console.log(userConfigs[1].theme); // "dark" (all references affected)
console.log(userConfigs[2].theme); // "dark" (all references affected)

---

Traversing Object Keys

Traversing or iterating through object properties is essential for processing object data. JavaScript provides several methods including for...in loops, Object.keys(), Object.values(), and Object.entries(). Each method serves different purposes and offers various ways to access object properties, values, or both. The choice depends on what information you need during iteration.

Syntax:

// for...in loop
for (let key in object) { }

// Object.keys()
Object.keys(object).forEach(key => { });

// Object.values()
Object.values(object).forEach(value => { });

// Object.entries()
Object.entries(object).forEach([key, value] => { });

Examples:

Example 1: for...in Loop

const scores = {
  math: 95,
  science: 87,
  english: 92,
  history: 89
};
for (let subject in scores) {
  console.log(`${subject}: ${scores[subject]}`);
}
// Output: math: 95, science: 87, english: 92, history: 89

Example 2: Object.keys() Method

const inventory = {
  laptops: 15,
  mice: 45,
  keyboards: 23,
  monitors: 8
};
const itemNames = Object.keys(inventory);
console.log(itemNames); // ["laptops", "mice", "keyboards", "monitors"]
itemNames.forEach(item => {
  console.log(`We have ${inventory[item]} ${item}`);
});

Example 3: Object.entries() Method

const weather = {
  temperature: 72,
  humidity: 65,
  windSpeed: 12,
  pressure: 1013
};
Object.entries(weather).forEach(([metric, value]) => {
  console.log(`${metric}: ${value}`);
});
// Output: temperature: 72, humidity: 65, windSpeed: 12, pressure: 1013

---

Arrays as Objects

In JavaScript, arrays are actually a special type of object with numeric indices as keys. This means arrays inherit object properties and methods while having additional array-specific functionality. Understanding this relationship helps explain why arrays can have both numeric indices and named properties. Arrays maintain their length property and array methods while still being objects underneath.

Syntax:

const arr = [1, 2, 3]; // Array with numeric indices
arr.customProperty = "value"; // Adding object property
console.log(typeof arr); // "object"

Examples:

Example 1: Array with Object Properties

const fruits = ["apple", "banana", "orange"];
fruits.origin = "local farm";
fruits.organic = true;
fruits.season = "summer";
console.log(fruits); // ["apple", "banana", "orange", origin: "local farm", organic: true, season: "summer"]
console.log(fruits.length); // 3 (only counts indexed elements)
console.log(fruits.origin); // "local farm"

Example 2: Array Object Key Iteration

const colors = ["red", "green", "blue"];
colors.favorite = "purple";
colors.total = 4;

for (let key in colors) {
  console.log(`${key}: ${colors[key]}`);
}
// Output: 0: red, 1: green, 2: blue, favorite: purple, total: 4

console.log(Object.keys(colors)); // ["0", "1", "2", "favorite", "total"]

Example 3: Array Constructor as Object

const numbers = new Array(3);
numbers[0] = 10;
numbers[1] = 20;
numbers[2] = 30;
numbers.description = "sample numbers";
numbers.createdBy = "system";

console.log(numbers instanceof Array); // true
console.log(numbers instanceof Object); // true
console.log(typeof numbers); // "object"
console.log(numbers.description); // "sample numbers"

---

Computed Properties

Computed properties allow you to dynamically set object property names using expressions enclosed in square brackets. This feature enables you to create object properties whose names are determined at runtime based on variables, function calls, or expressions. Computed properties are particularly useful when building objects programmatically or when property names come from external sources.

Syntax:

const dynamicKey = "propertyName";
const obj = {
  [dynamicKey]: value,
  [expression]: value
};

Examples:

Example 1: Dynamic Property Names

const prefix = "user";
const suffix = "Data";
const userId = 123;

const userObject = {
  [prefix + suffix]: "John Doe",
  [`${prefix}Id`]: userId,
  [`${prefix}Active`]: true
};
console.log(userObject); // { userData: "John Doe", userId: 123, userActive: true }

Example 2: Function-based Property Names

function getPropertyName(type) {
  return `${type}Count`;
}

const statistics = {
  [getPropertyName("visitor")]: 1250,
  [getPropertyName("page")]: 45,
  [getPropertyName("error")]: 3
};
console.log(statistics); // { visitorCount: 1250, pageCount: 45, errorCount: 3 }

Example 3: Expression-based Properties

const settings = {
  [`theme_${new Date().getFullYear()}`]: "modern",
  [`config_${Math.random().toString(36).substr(2, 9)}`]: "production",
  [`version_${process.env.NODE_ENV || "development"}`]: "1.0.0"
};
console.log(Object.keys(settings)); // Keys will be like ["theme_2024", "config_abc123def", "version_development"]

---

Spread Operator in Objects

The spread operator (...) allows you to copy properties from one or more objects into a new object. It creates a shallow copy of object properties and is useful for merging objects, cloning objects, and creating new objects with additional properties. When properties with the same name exist in multiple objects, the last one takes precedence.

Syntax:

const newObject = { ...object1, ...object2, newProperty: value };

Examples:

Example 1: Object Merging

const basicInfo = {
  name: "David",
  age: 30
};
const contactInfo = {
  email: "david@example.com",
  phone: "555-1234"
};
const preferences = {
  theme: "dark",
  notifications: true
};
const completeProfile = { ...basicInfo, ...contactInfo, ...preferences };
console.log(completeProfile); 
// { name: "David", age: 30, email: "david@example.com", phone: "555-1234", theme: "dark", notifications: true }

Example 2: Object Cloning with Modifications

const originalProduct = {
  id: 1,
  name: "Laptop",
  price: 999,
  category: "Electronics"
};
const discountedProduct = {
  ...originalProduct,
  price: 799,
  onSale: true,
  discount: "20% off"
};
console.log(discountedProduct); 
// { id: 1, name: "Laptop", price: 799, category: "Electronics", onSale: true, discount: "20% off" }

Example 3: Overriding Properties

const defaultSettings = {
  volume: 50,
  brightness: 75,
  autoSave: true,
  theme: "light"
};
const userSettings = {
  volume: 80,
  theme: "dark"
};
const finalSettings = { ...defaultSettings, ...userSettings, lastUpdated: new Date() };
console.log(finalSettings); 
// { volume: 80, brightness: 75, autoSave: true, theme: "dark", lastUpdated: [current date] }

---

Object Destructuring

Object destructuring is a JavaScript feature that allows you to extract properties from objects and assign them to variables in a single statement. It provides a clean and readable way to unpack object properties, set default values, rename variables, and work with nested objects. Destructuring is particularly useful when working with function parameters and API responses.

Syntax:

const { property1, property2, property3 } = object;
const { property: newName, property2 = defaultValue } = object;

Examples:

Example 1: Basic Destructuring

const student = {
  name: "Lisa",
  grade: "A",
  subject: "Mathematics",
  score: 95,
  passed: true
};
const { name, grade, score } = student;
console.log(name); // "Lisa"
console.log(grade); // "A"
console.log(score); // 95

Example 2: Destructuring with Default Values and Renaming

const apiResponse = {
  status: "success",
  data: {
    userId: 456,
    username: "jane_doe"
  },
  timestamp: "2024-01-15"
};
const { 
  status, 
  message = "No message provided", 
  data: responseData,
  timestamp: createdAt 
} = apiResponse;
console.log(status); // "success"
console.log(message); // "No message provided"
console.log(responseData); // { userId: 456, username: "jane_doe" }
console.log(createdAt); // "2024-01-15"

Example 3: Nested Object Destructuring

const order = {
  orderId: "ORD-12345",
  customer: {
    name: "Robert Smith",
    email: "robert@example.com",
    address: {
      street: "456 Oak Ave",
      city: "Chicago",
      zipCode: "60601"
    }
  },
  items: ["laptop", "mouse"]
};
const { 
  orderId, 
  customer: { 
    name: customerName, 
    address: { city, zipCode } 
  } 
} = order;
console.log(orderId); // "ORD-12345"
console.log(customerName); // "Robert Smith"
console.log(city); // "Chicago"
console.log(zipCode); // "60601"

---

Objects Inside Arrays

Objects inside arrays are extremely common in JavaScript applications, especially when dealing with data from APIs, databases, or user interfaces. This pattern allows you to store collections of related data where each item has multiple properties. You can access, modify, and manipulate these objects using array methods combined with object property access.

Syntax:

const arrayOfObjects = [
  { property1: value1, property2: value2 },
  { property1: value3, property2: value4 },
  { property1: value5, property2: value6 }
];

Examples:

Example 1: Employee Database

const employees = [
  { id: 1, name: "John Smith", department: "Engineering", salary: 85000 },
  { id: 2, name: "Sarah Johnson", department: "Marketing", salary: 72000 },
  { id: 3, name: "Mike Wilson", department: "Sales", salary: 68000 }
];

employees.forEach(employee => {
  console.log(`${employee.name} works in ${employee.department}`);
});
// Output: John Smith works in Engineering, Sarah Johnson works in Marketing, Mike Wilson works in Sales

const engineeringEmployees = employees.filter(emp => emp.department === "Engineering");
console.log(engineeringEmployees); // [{ id: 1, name: "John Smith", department: "Engineering", salary: 85000 }]

Example 2: Product Catalog

const products = [
  { id: 101, name: "Smartphone", price: 699, category: "Electronics", inStock: true },
  { id: 102, name: "Headphones", price: 199, category: "Electronics", inStock: false },
  { id: 103, name: "Book", price: 15, category: "Education", inStock: true }
];

const totalValue = products.reduce((sum, product) => sum + product.price, 0);
console.log(`Total catalog value: $${totalValue}`); // Total catalog value: $913

const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts.length); // 2

Example 3: User Posts with Nested Data

const posts = [
  {
    id: 1,
    title: "First Post",
    author: { name: "Alice", id: 101 },
    tags: ["javascript", "programming"],
    likes: 25
  },
  {
    id: 2,
    title: "Second Post",
    author: { name: "Bob", id: 102 },
    tags: ["web development", "css"],
    likes: 18
  }
];

posts.forEach(post => {
  console.log(`"${post.title}" by ${post.author.name} - ${post.likes} likes`);
});
// Output: "First Post" by Alice - 25 likes, "Second Post" by Bob - 18 likes

const allTags = posts.flatMap(post => post.tags);
console.log(allTags); // ["javascript", "programming", "web development", "css"]

---

Object Methods

Object methods are functions that are stored as object properties. They allow objects to have behavior in addition to data, making objects more powerful and enabling object-oriented programming patterns. Methods can access other properties of the same object using the this keyword. Object methods are essential for creating interactive and functional objects.

Syntax:

const object = {
  property: value,
  methodName: function() {
    // method code
  },
  // ES6 shorthand
  shorthandMethod() {
    // method code
  }
};

Examples:

Example 1: Calculator Object

const calculator = {
  result: 0,
  add: function(num) {
    this.result += num;
    return this;
  },
  subtract: function(num) {
    this.result -= num;
    return this;
  },
  multiply: function(num) {
    this.result *= num;
    return this;
  },
  getValue: function() {
    return this.result;
  },
  reset: function() {
    this.result = 0;
    return this;
  }
};

calculator.add(10).multiply(2).subtract(5);
console.log(calculator.getValue()); // 15
calculator.reset();
console.log(calculator.getValue()); // 0

Example 2: Bank Account Object

const bankAccount = {
  accountNumber: "ACC-12345",
  balance: 1000,
  deposit(amount) {
    if (amount > 0) {
      this.balance += amount;
      console.log(`Deposited $${amount}. New balance: $${this.balance}`);
    }
  },
  withdraw(amount) {
    if (amount > 0 && amount <= this.balance) {
      this.balance -= amount;
      console.log(`Withdrew $${amount}. New balance: $${this.balance}`);
    } else {
      console.log("Insufficient funds or invalid amount");
    }
  },
  getBalance() {
    return this.balance;
  }
};

bankAccount.deposit(500); // Deposited $500. New balance: $1500
bankAccount.withdraw(200); // Withdrew $200. New balance: $1300
console.log(bankAccount.getBalance()); // 1300

Example 3: Shopping Cart Object

const shoppingCart = {
  items: [],
  addItem(product) {
    this.items.push(product);
    console.log(`Added ${product.name} to cart`);
  },
  removeItem(productId) {
    this.items = this.items.filter(item => item.id !== productId);
    console.log(`Removed item with ID ${productId} from cart`);
  },
  getTotal() {
    return this.items.reduce((total, item) => total + item.price, 0);
  },
  getItemCount() {
    return this.items.length;
  },
  clear() {
    this.items = [];
    console.log("Cart cleared");
  }
};

shoppingCart.addItem({ id: 1, name: "Laptop", price: 999 });
shoppingCart.addItem({ id: 2, name: "Mouse", price: 25 });
console.log(`Total: $${shoppingCart.getTotal()}`); // Total: $1024
console.log(`Items: ${shoppingCart.getItemCount()}`); // Items: 2

---

The 'this' Keyword

The this keyword in JavaScript refers to the object that is currently executing the function. In object methods, this typically refers to the object that owns the method. The value of this can change depending on how a function is called, making it a powerful but sometimes confusing feature. Understanding this is crucial for working with object methods and object-oriented programming.

Syntax:

const object = {
  property: value,
  method: function() {
    console.log(this.property); // 'this' refers to the object
  }
};

Examples:

Example 1: Basic 'this' Usage

const person = {
  firstName: "Emma",
  lastName: "Johnson",
  age: 28,
  getFullName: function() {
    return `${this.firstName} ${this.lastName}`;
  },
  introduce: function() {
    return `Hi, I'm ${this.getFullName()} and I'm ${this.age} years old.`;
  },
  haveBirthday: function() {
    this.age++;
    console.log(`Happy birthday! I'm now ${this.age} years old.`);
  }
};

console.log(person.getFullName()); // "Emma Johnson"
console.log(person.introduce()); // "Hi, I'm Emma Johnson and I'm 28 years old."
person.haveBirthday(); // "Happy birthday! I'm now 29 years old."

Example 2: 'this' in Different Contexts

const car = {
  brand: "Tesla",
  model: "Model 3",
  speed: 0,
  accelerate: function() {
    this.speed += 10;
    console.log(`${this.brand} ${this.model} is now going ${this.speed} mph`);
  },
  getInfo: function() {
    return `This is a ${this.brand} ${this.model}`;
  }
};

car.accelerate(); // "Tesla Model 3 is now going 10 mph"
console.log(car.getInfo()); // "This is a Tesla Model 3"

// 'this' context changes when method is assigned to variable
const getCarInfo = car.getInfo;
console.log(getCarInfo()); // "This is a undefined undefined" (this refers to global object)

Example 3: Arrow Functions and 'this'

const team = {
  name: "Development Team",
  members: ["Alice", "Bob", "Charlie"],
  // Regular function - 'this' refers to team object
  showTeamRegular: function() {
    console.log(`Team: ${this.name}`);
    this.members.forEach(function(member) {
      // 'this' context is lost here in regular function
      console.log(`Member: ${member}`);
    });
  },
  // Arrow function preserves 'this' context
  showTeamArrow: function() {
    console.log(`Team: ${this.name}`);
    this.members.forEach((member) => {
      // 'this' still refers to team object
      console.log(`${this.name} member: ${member}`);
    });
  }
};

team.showTeamRegular(); // Team name shown, but not in forEach
team.showTeamArrow(); // Team name shown consistently

---

Object.freeze() and Object.seal()

Object.freeze() and Object.seal() are methods that control the mutability of objects. Object.freeze() makes an object completely immutable - no properties can be added, removed, or modified. Object.seal() prevents adding or removing properties but allows modification of existing properties. These methods are useful for creating constants and protecting object integrity in applications.

Syntax:

Object.freeze(object); // Makes object completely immutable
Object.seal(object);   // Prevents adding/removing properties
Object.isFrozen(object); // Check if object is frozen
Object.isSealed(object); // Check if object is sealed

Examples:

Example 1: Object.freeze() Usage

const config = {
  apiUrl: "https://api.example.com",
  version: "1.0.0",
  environment: "production"
};

Object.freeze(config);

// These operations will fail silently (or throw error in strict mode)
config.apiUrl = "https://different-api.com"; // No effect
config.newProperty = "new value"; // No effect
delete config.version; // No effect

console.log(config.apiUrl); // "https://api.example.com" (unchanged)
console.log(Object.isFrozen(config)); // true

// Creating a new object if changes are needed
const newConfig = { ...config, environment: "development" };
console.log(newConfig.environment); // "development"

Example 2: Object.seal() Usage

const userPreferences = {
  theme: "dark",
  language: "english",
  notifications: true
};

Object.seal(userPreferences);

// These modifications are allowed
userPreferences.theme = "light"; // Works
userPreferences.language = "spanish"; // Works
userPreferences.notifications = false; // Works

// These operations will fail
userPreferences.newSetting = "value"; // No effect
delete userPreferences.theme; // No effect

console.log(userPreferences.theme); // "light" (changed)
console.log(Object.isSealed(userPreferences)); // true
console.log(Object.keys(userPreferences)); // ["theme", "language", "notifications"]

Example 3: Comparing Freeze vs Seal

const frozenObj = {
  name: "Frozen Object",
  value: 100,
  items: ["a", "b", "c"]
};

const sealedObj = {
  name: "Sealed Object",
  value: 200,
  items: ["x", "y", "z"]
};

Object.freeze(frozenObj);
Object.seal(sealedObj);

// Frozen object - no changes allowed
frozenObj.value = 999; // No effect
frozenObj.newProp = "new"; // No effect
frozenObj.items.push("d"); // This works! (array is not frozen)

// Sealed object - property values can change
sealedObj.value = 999; // Works
sealedObj.newProp = "new"; // No effect
sealedObj.items.push("w"); // Works

console.log(frozenObj.value); // 100 (unchanged)
console.log(sealedObj.value); // 999 (changed)
console.log(frozenObj.items); // ["a", "b", "c", "d"] (array modified)
console.log(sealedObj.items); // ["x", "y", "z", "w"] (array modified)

// Status checks
console.log(`Frozen: ${Object.isFrozen(frozenObj)}, Sealed: ${Object.isSealed(frozenObj)}`); // true, true
console.log(`Frozen: ${Object.isFrozen(sealedObj)}, Sealed: ${Object.isSealed(sealedObj)}`); // false, true

---

Conclusion

JavaScript objects are fundamental building blocks that enable developers to create complex, interactive applications. From basic key-value storage to advanced patterns like object composition and immutability, objects provide the foundation for organizing and manipulating data effectively.

Key takeaways from this comprehensive guide:

• Objects are reference types that store data as key-value pairs

• Multiple creation methods exist (literal, constructor, Object.create())

• Property access can be done via dot notation or bracket notation

• Objects support dynamic property addition, modification, and deletion

• Nested objects enable complex data structures

• Traversal methods provide flexible ways to iterate through object properties

• Object methods add behavior and functionality to data

• The 'this' keyword enables context-aware method execution

• Object.freeze() and Object.seal() provide immutability controls

Understanding these concepts thoroughly will significantly improve your JavaScript programming skills and enable you to build more robust, maintainable applications. Objects are not just data containers but powerful tools for modeling real-world entities and creating organized, functional code structures.