JavaScript Objects
Create, Access, Modify & Master Object Operations

Introduction to JavaScript Objects

In JavaScript, objects are everywhere. From storing user data to building APIs or handling events—objects hold key-value pairs that power the language. If you're aiming to build interactive websites or master frameworks like React or Node.js, understanding objects is non-negotiable.

What is a JavaScript Object?

A JavaScript object is a collection of properties, where each property is a key-value pair. Think of it as a dictionary or real-world entity, like a car or a person.

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

{ brand: "Toyota", model: "Corolla", year: 2021 }

Creating Objects

1. Using Object Literals

const user = {
  name: "Alice",
  age: 25,
  isMember: true
};

2. Using the Object Constructor

const user = new Object();
user.name = "Bob";
user.age = 30;

3. Using a Function Constructor

function User(name, age) {
  this.name = name;
  this.age = age;
}
const user1 = new User("Charlie", 28);

Accessing Object Properties

You can access object properties in two ways:

console.log(user.name); // Dot notation
console.log(user["age"]); // Bracket notation

Modifying and Adding Properties

user.age = 26;       // Modify
user.city = "Paris"; // Add

{ name: "Alice", age: 26, isMember: true, city: "Paris" }

Deleting Properties

delete user.city;

Nested Objects

const person = {
  name: "David",
  contact: {
    email: "david@example.com",
    phone: "1234567890"
  }
};
console.log(person.contact.email);

"david@example.com"

Object Methods

Objects can contain functions as values called methods.

const calculator = {
  add: function(x, y) {
    return x + y;
  }
};
console.log(calculator.add(5, 3));

8

this Keyword

The this keyword refers to the object from which the method was called.

const profile = {
  username: "techie",
  showUsername: function() {
    return this.username;
  }
};
console.log(profile.showUsername());

"techie"

Looping Through Objects

Using for...in loop

for (let key in user) {
  console.log(key + ": " + user[key]);
}

Built-in Object Methods

• Object.keys(obj) – returns all property names
• Object.values(obj) – returns all values
• Object.entries(obj) – returns an array of [key, value] pairs

console.log(Object.keys(user));
console.log(Object.values(user));
console.log(Object.entries(user));

Checking for Property Existence

"userId" in user; // false
user.hasOwnProperty("age"); // true

Object Destructuring

const { name, age } = user;
console.log(name, age);

"Alice", 26

Cloning and Merging Objects

1. Using Object.assign()

const original = { a: 1 };
const clone = Object.assign({}, original);

2. Using Spread Operator

const newClone = { ...original };

Freezing and Sealing Objects

• Object.freeze(obj) – Prevents adding/removing/modifying properties
• Object.seal(obj) – Prevents adding/removing but allows modifying existing

Object.freeze(user);
user.name = "Eve"; // Won’t work
console.log(user.name);

"Alice"

Summary

JavaScript objects are powerful and versatile. They serve as the foundation for JSON, API calls, configurations, and complex data models. Mastering object manipulation is key to advancing in any JS-based role or framework.

What's Next?

In the upcoming modules, you’ll dive into arrays, which are object-like structures perfect for ordered data. Once you pair them with objects, your JavaScript fluency takes a huge leap forward.