Objects

JavaScript's key-value store — creating, accessing, modifying, and the methods for working with object data.

What it is, in plain English: An object is a collection of named values — key-value pairs. You look up a value by its name (key) rather than its position. Objects are how JavaScript represents structured data: a user has a name, an age, and an email — those three facts live together in one object. Almost everything in JavaScript is an object, which makes this the single most important data structure to understand.

Storing named information in objects

Arrays are great for ordered lists. But what about a person? A person has a name, an age, an email address — information that belongs together but doesn't have a natural order. That's what an object is for: a collection of named values.

Creating an object

// Curly braces, key: value pairs, commas between them
const user = {
  name: "Alice",
  age: 30,
  email: "alice@example.com",
  isActive: true
};

// The keys are the names. The values are the data.
// Keys don't need quotes unless they contain spaces or special characters.

Accessing properties — two ways

const user = { name: "Alice", age: 30 };

// Dot notation — use this most of the time
console.log(user.name);    // "Alice"
console.log(user.age);     // 30

// Bracket notation — use when the key is in a variable, or has spaces
const key = "name";
console.log(user[key]);    // "Alice" — key comes from a variable

const weirdObj = { "first name": "Bob" };
console.log(weirdObj["first name"]);  // "Bob" — spaces need brackets

Adding, updating, and deleting properties

const profile = { name: "Alice" };

profile.age = 30;             // add a new property
profile.name = "Alice Smith"; // update an existing property
delete profile.age;           // remove a property

console.log(profile);         // { name: "Alice Smith" }

Checking if a property exists

const user = { name: "Alice", age: 30 };

"name" in user            // true
"email" in user           // false
user.email !== undefined  // false (same idea, less reliable)

// Safe access with optional chaining:
console.log(user?.address?.city);  // undefined (no error)

Object.keys, Object.values, Object.entries

The three methods for iterating over an object's data:

const scores = { alice: 95, bob: 87, charlie: 72 };

Object.keys(scores)    // ["alice", "bob", "charlie"] — just the keys
Object.values(scores)  // [95, 87, 72]                — just the values
Object.entries(scores) // [["alice",95],["bob",87],["charlie",72]] — pairs

// Loop over key-value pairs:
for (const [name, score] of Object.entries(scores)) {
  console.log(`${name}: ${score}`);
}
// alice: 95
// bob: 87
// charlie: 72

Destructuring — unpack values into variables

const user = { name: "Alice", age: 30, city: "Mumbai" };

// Unpack specific properties:
const { name, city } = user;
console.log(name);  // "Alice"
console.log(city);  // "Mumbai"

// Rename while destructuring:
const { name: userName, age: userAge } = user;
console.log(userName);  // "Alice"

// Default values (used if property doesn't exist):
const { country = "India" } = user;
console.log(country);  // "India" — user has no country, default used

// In function parameters — very common pattern:
function greet({ name, city }) {
  console.log(`${name} lives in ${city}`);
}
greet(user);  // "Alice lives in Mumbai"

Spread — copy or merge objects

const defaults = { theme: "dark", lang: "en", fontSize: 14 };
const userPrefs = { lang: "hi", fontSize: 16 };

// Merge: later properties win over earlier ones
const settings = { ...defaults, ...userPrefs };
console.log(settings);
// { theme: "dark", lang: "hi", fontSize: 16 }

// Shallow copy:
const copy = { ...defaults };
copy.theme = "light";
console.log(defaults.theme);  // "dark" — original unaffected

Methods — functions inside an object

const counter = {
  count: 0,

  // Method shorthand (modern syntax):
  increment() {
    this.count += 1;    // 'this' refers to the counter object
  },
  reset() {
    this.count = 0;
  },
  value() {
    return this.count;
  }
};

counter.increment();
counter.increment();
counter.increment();
console.log(counter.value());  // 3
counter.reset();
console.log(counter.value());  // 0

Try It Yourself

// Create an object with curly braces
const person = {
  name: "Alice",
  age: 30,
  city: "Mumbai",
  isAdmin: false
};

// Access properties — two ways
console.log(person.name);       // "Alice"  — dot notation
console.log(person["age"]);     // 30       — bracket notation

// Add, update, delete properties
person.email = "alice@example.com";   // add new property
person.age = 31;                      // update existing
delete person.isAdmin;                // remove a property
console.log(person);

// Methods — functions that live inside an object
const calculator = {
  value: 0,
  add(n)      { this.value += n; return this; },
  subtract(n) { this.value -= n; return this; },
  result()    { return this.value; }
};
console.log(calculator.add(10).add(5).subtract(3).result()); // 12

// Object.keys / values / entries
const scores = { alice: 95, bob: 87, charlie: 72 };
console.log(Object.keys(scores));    // ["alice", "bob", "charlie"]
console.log(Object.values(scores));  // [95, 87, 72]
console.log(Object.entries(scores)); // [["alice",95],["bob",87],["charlie",72]]

// Destructuring — unpack into variables
const { name, age } = person;
console.log(`${name} is ${age}`);   // "Alice is 31"

Computed properties, property shorthand, Object methods, and JSON

Property shorthand

const name = "Alice";
const age  = 30;

// Old way:
const user1 = { name: name, age: age };

// Shorthand (when variable name matches key name):
const user2 = { name, age };  // same thing
console.log(user2);  // { name: "Alice", age: 30 }

Computed property names

const field = "email";
const user = {
  name: "Alice",
  [field]: "alice@example.com",  // computed — key comes from the variable
  [`${field}_verified`]: true
};
console.log(user.email);           // "alice@example.com"
console.log(user.email_verified);  // true

Object.assign and Object.freeze

// Object.assign — merge properties into a target object
const target = { a: 1 };
Object.assign(target, { b: 2 }, { c: 3 });
console.log(target);  // { a: 1, b: 2, c: 3 }

// Object.freeze — make an object immutable (shallow)
const config = Object.freeze({ host: "localhost", port: 3000 });
config.port = 8080;  // silently fails (or throws in strict mode)
console.log(config.port);  // 3000 — unchanged

JSON — serialising and parsing objects

const user = { name: "Alice", age: 30, scores: [95, 87] };

// Object → JSON string (for sending over network, saving to file)
const json = JSON.stringify(user);
console.log(json);
// '{"name":"Alice","age":30,"scores":[95,87]}'

// Pretty-print for debugging:
console.log(JSON.stringify(user, null, 2));

// JSON string → Object (when receiving data)
const parsed = JSON.parse(json);
console.log(parsed.name);  // "Alice"

// JSON limitations: undefined, functions, and Symbols are dropped:
JSON.stringify({ a: 1, b: undefined, c: () => {} })
// '{"a":1}' — b and c are gone

Object.fromEntries — the reverse of Object.entries

// Transform object values using entries + fromEntries:
const prices = { apple: 1.5, banana: 0.75, cherry: 3.0 };
const discounted = Object.fromEntries(
  Object.entries(prices).map(([key, val]) => [key, val * 0.9])
);
console.log(discounted);
// { apple: 1.35, banana: 0.675, cherry: 2.7 }

Property descriptors, prototypes, and the object internal model

Property descriptors

// Every property has a descriptor with 4 attributes:
const obj = { name: "Alice" };
console.log(Object.getOwnPropertyDescriptor(obj, "name"));
// { value: "Alice", writable: true, enumerable: true, configurable: true }

// Define a non-writable, non-enumerable property:
Object.defineProperty(obj, "id", {
  value: 42,
  writable: false,    // can't be changed
  enumerable: false,  // won't show in for...in or Object.keys
  configurable: false // descriptor itself can't be changed
});
obj.id = 99;         // silently fails (strict: TypeError)
console.log(Object.keys(obj));  // ["name"] — id is hidden

The prototype chain

Every object has an internal [[Prototype]] slot. When you access a property that doesn't exist on the object, JavaScript walks up the prototype chain until it finds it or reaches null.

const animal = { breathes: true, describe() { return "I am an animal"; } };
const dog    = Object.create(animal);  // dog's [[Prototype]] = animal
dog.sound = "woof";

console.log(dog.sound);     // "woof"  — own property
console.log(dog.breathes);  // true    — inherited from animal
console.log(dog.describe()); // "I am an animal" — inherited method

// The chain: dog → animal → Object.prototype → null

Object.create vs class syntax

ES6 class syntax is syntactic sugar over prototypal inheritance. The prototype chain is the same; class just looks more familiar to OOP developers:

// Under the hood, class Dog {} creates Dog.prototype and sets
// instances' [[Prototype]] to Dog.prototype. Same as:
function Dog(name) { this.name = name; }
Dog.prototype.bark = function() { return `${this.name} says woof`; };
const d = new Dog("Rex");
console.log(d.bark());  // "Rex says woof"

Proxy and Reflect

// Proxy intercepts object operations:
const handler = {
  get(target, key) {
    return key in target ? target[key] : `Property '${key}' not found`;
  },
  set(target, key, value) {
    if (typeof value !== "number") throw new TypeError("Must be a number");
    target[key] = value;
    return true;
  }
};

const safe = new Proxy({}, handler);
safe.score = 95;
console.log(safe.score);    // 95
console.log(safe.missing);  // "Property 'missing' not found"
// safe.name = "Alice";     // TypeError: Must be a number

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.