JS Objects

Explore advanced object concepts like prototypes, property descriptors, and inheritance patterns.

On this page

Object Definitions

Objects store key-value pairs and are the foundation of many JavaScript patterns. In advanced usage, you will often work with property descriptors, prototypes, and controlled access (get/set).

// Object literal
const user = { name: "Ozan", age: 30 };

// Object constructor
const cfg = new Object();
cfg.theme = "light";

// Object.create (prototype-based creation)
const base = { kind: "base" };
const child = Object.create(base);
child.kind = "child";

console.log(child.kind);
console.log(child.__proto__ === base); // true (debug only)

Modern tip: prefer object literals for most cases. Use Object.create() when you want precise prototype control.

Object this

this depends on how a function is called. In object methods, this usually points to the object before the dot.

const account = {
  owner: "Ozan",
  balance: 100,
  deposit(amount) {
    this.balance += amount;
    return this.balance;
  }
};

console.log(account.deposit(50)); // 150

Be careful when extracting methods (you may lose this). Use bind() if needed.

"use strict";

const obj = {
  value: 10,
  show() { console.log(this.value); }
};

const fn = obj.show;
// fn(); // TypeError in strict mode (this is undefined)

const safe = obj.show.bind(obj);
safe(); // 10

Object Destructuring

Destructuring extracts properties into variables. It is used constantly in modern code.

const user2 = { name: "Jane", age: 28, city: "Istanbul" };

// rename + default value
const { name: n, age, country = "TR" } = user2;

console.log(n, age, country);

Nested destructuring:

const data = { profile: { email: "a@b.com" } };
const { profile: { email } } = data;

console.log(email);

Modern tip: combine with optional chaining to avoid crashes.

const maybe = {};
const city = maybe.profile?.city ?? "Unknown";
console.log(city);

Object Prototypes

JavaScript uses prototype-based inheritance. Objects can inherit properties from a prototype.

const animal = {
  speak() {
    return "sound";
  }
};

const dog = Object.create(animal);
dog.speak = function () { return "woof"; };

console.log(dog.speak());

Constructor functions and prototypes:

function User(name) {
  this.name = name;
}

User.prototype.sayHi = function () {
  return "Hi, " + this.name;
};

const u = new User("Ali");
console.log(u.sayHi());

Modern note: class is syntax sugar over prototypes. Understanding prototypes helps with debugging and reading older code.

Object Iterations

Objects are not directly iterable with for...of, but you can iterate over keys/values/entries.

const obj3 = { a: 1, b: 2, c: 3 };

for (const key in obj3) {
  console.log(key, obj3[key]);
}

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

for (const [k, v] of Object.entries(obj3)) {
  console.log(k, v);
}

Modern tip: use hasOwn() or Object.hasOwn() where available to avoid prototype pollution issues.

Object Management

Common management tasks: cloning, merging, and checking properties.

const a = { x: 1, y: 2 };
const b = { y: 99, z: 3 };

// Merge (later properties overwrite earlier)
const merged = { ...a, ...b };
console.log(merged); // {x:1, y:99, z:3}

Shallow vs deep copy:

const original = { a: 1, nested: { b: 2 } };

// Shallow copy
const shallow = { ...original };
shallow.nested.b = 999;
console.log(original.nested.b); // 999 (same reference)

// Deep copy (modern)
const deep = structuredClone(original);
deep.nested.b = 123;
console.log(original.nested.b); // 999 (unchanged by deep)

Object Get / Set

Getters and setters create computed properties and controlled access to values.

const person = {
  firstName: "Jane",
  lastName: "Doe",

  get fullName() {
    return this.firstName + " " + this.lastName;
  },

  set fullName(value) {
    const parts = value.split(" ");
    this.firstName = parts[0] || "";
    this.lastName = parts[1] || "";
  }
};

console.log(person.fullName);
person.fullName = "Ali Veli";
console.log(person.firstName, person.lastName);

You can also define getters/setters with property descriptors.

Object Protection

JavaScript provides ways to protect objects from changes.

Object.preventExtensions() prevents adding new properties.
Object.seal() prevents adding/removing properties (but allows changing values).
Object.freeze() prevents adding/removing/changing properties (shallow freeze).

const settings = { theme: "light" };

Object.freeze(settings);
// settings.theme = "dark"; // fails (silent or error in strict mode)
console.log(settings.theme);

Important: freeze() is shallow. Nested objects can still change unless you deep-freeze.