Gyaan

Objects

beginner objects properties Object.keys Object.freeze

Objects are everywhere in JavaScript. They’re collections of key-value pairs — we use them to group related data and functionality together.

Creating Objects

Object Literal (most common)

const user = {
  name: "Manish",
  age: 25,
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

Constructor Function

function User(name, age) {
  this.name = name;
  this.age = age;
}
const user = new User("Manish", 25);

Object.create()

Creates a new object with a specified prototype:

const proto = { greet() { console.log(`Hi, I'm ${this.name}`); } };
const user = Object.create(proto);
user.name = "Manish";
user.greet(); // "Hi, I'm Manish"

Accessing Properties

Two ways — dot notation and bracket notation:

const user = { name: "Manish", "fav-color": "blue" };

// Dot notation — clean and simple
console.log(user.name); // "Manish"

// Bracket notation — required for special characters and dynamic keys
console.log(user["fav-color"]); // "blue"

const key = "name";
console.log(user[key]); // "Manish" — dynamic access

Use dot notation by default. Use brackets when the key has special characters, starts with a number, or comes from a variable.

Useful Object Methods

Object.keys(), Object.values(), Object.entries()

const user = { name: "Manish", age: 25, city: "Pune" };

Object.keys(user);    // ["name", "age", "city"]
Object.values(user);  // ["Manish", 25, "Pune"]
Object.entries(user);  // [["name", "Manish"], ["age", 25], ["city", "Pune"]]

// Handy for looping
for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

Object.freeze() vs Object.seal()

Both restrict modifications, but in different ways:

  • Object.freeze() — Can’t add, remove, or modify any properties. Fully locked.
  • Object.seal() — Can’t add or remove properties, but CAN modify existing ones.
const frozen = Object.freeze({ name: "Manish", age: 25 });
frozen.name = "Rahul"; // silently fails (or throws in strict mode)
frozen.city = "Pune";  // silently fails
console.log(frozen);   // { name: "Manish", age: 25 }

const sealed = Object.seal({ name: "Manish", age: 25 });
sealed.name = "Rahul"; // works! existing property can be modified
sealed.city = "Pune";  // fails — can't add new property
console.log(sealed);   // { name: "Rahul", age: 25 }

Note: Both are shallow — if a property is an object, the nested object can still be modified.

Object.assign() for Merging

Copies properties from source objects into a target object:

const defaults = { theme: "dark", lang: "en" };
const userPrefs = { theme: "light" };

const settings = Object.assign({}, defaults, userPrefs);
console.log(settings); // { theme: "light", lang: "en" }

// Modern alternative: spread operator
const settings2 = { ...defaults, ...userPrefs };
console.log(settings2); // { theme: "light", lang: "en" }

Later sources override earlier ones for the same key.

Computed Property Names

We can use expressions as object keys by wrapping them in brackets:

const field = "email";
const user = {
  name: "Manish",
  [field]: "manish@example.com",          // "email": "manish@example.com"
  [`${field}Verified`]: true               // "emailVerified": true
};

Property Shorthand

When the variable name matches the key name, we can skip the colon:

const name = "Manish";
const age = 25;

// Without shorthand
const user = { name: name, age: age };

// With shorthand — same thing
const user2 = { name, age };

In simple language, objects are just bags of key-value pairs. We create them with {}, access properties with dot or bracket notation, and use built-in methods like Object.keys(), Object.freeze(), and Object.assign() to work with them. They’re the foundation of almost everything in JavaScript.

References