Objects & classes in Javascript
Created @October 29, 2025 12:48 PM
Objects & Classes in JavaScript — Easy
Study Notes
💡 1. What is an Object?
An object is a collection of key:value pairs.
Keys are strings (or symbols); values can be any type (number, string, array,
function, etc.).
Objects group related data and behavior.
✨ Example
const person = {
name: "Janakiram",
age: 21,
greet: function() { [Link]("Hi, I'm " + [Link]); }
// shorthand method: greet() { ... }
};
🔍 Accessing Properties
[Link]([Link]); // Dot notation
[Link](person["age"]); // Bracket notation
const key = "name";
[Link](person[key]); // Dynamic access
Objects & classes in Javascript 1
➕ Add / Update / Delete
[Link] = "Chennai"; // Add
[Link] = 22; // Update
delete [Link]; // Delete
⚙️ 2. The this Keyword
this refers to the object that called the method.
In arrow functions, this is lexically bound (taken from outer scope).
const a = {
name: "A",
show() { [Link]([Link]); }
};
const b = { name: "B", show: [Link] };
[Link](); // A
[Link](); // B
⚠️ Don’t use arrow functions for object methods if they depend on this.
🧬 3. Prototype-Based Inheritance
Every object links to a prototype object ( [[Prototype]] ).
If a property isn’t found, JS looks up the prototype chain.
const proto = { greet() { [Link]("hi"); } };
const obj = [Link](proto);
[Link](); // via prototype
Objects & classes in Javascript 2
🏗️ 4. Constructor Functions & new
function Person(name, age) {
[Link] = name;
[Link] = age;
}
[Link] = function() {
[Link]("Hi, I'm " + [Link]);
};
const p = new Person("Janakiram", 21);
[Link]();
new creates a new object, binds this to it, and links it to the constructor’s
prototype.
🏫 5. ES6 class Syntax (Modern)
class Person {
constructor(name, age) {
[Link] = name;
[Link] = age;
}
say() {
[Link](`Hi, I'm ${[Link]}`);
}
static createGuest() {
return new Person("Guest", 0);
}
}
Objects & classes in Javascript 3
const p = new Person("Janakiram", 21);
[Link]();
[Link]();
👨💼 Inheritance
class Employee extends Person {
constructor(name, age, role) {
super(name, age);
[Link] = role;
}
info() { [Link](`${[Link]} is a ${[Link]}`); }
}
🔒 Private Fields & Methods
class Counter {
#count = 0;
increment() { this.#count++; }
get value() { return this.#count; }
}
🧩 6. Getters & Setters
const user = {
first: "Janaki",
last: "Ram",
get fullName() { return `${[Link]} ${[Link]}`; },
Objects & classes in Javascript 4
set fullName(v) { [[Link], [Link]] = [Link](" "); }
};
[Link] = "Bala K";
[Link]([Link]); // Bala K
🧰 7. Useful Object Helpers
Function Purpose
[Link](obj) Array of keys
[Link](obj) Array of values
[Link](obj) Array of [key, value]
[Link](target, source) Copy properties
[Link](proto) Create with prototype
[Link](obj) Prevent modifications
[Link](obj) Prevent add/delete
[Link]() Configure property details
⚡ 8. Property Descriptors
const o = {};
[Link](o, "x", {
value: 42,
writable: false,
enumerable: false,
configurable: false
});
💭 9. Best Practices
Objects & classes in Javascript 5
Use classes for structured, reusable blueprints.
Use factory functions for simple object creation.
Avoid mutating shared prototypes.
Prefer const for objects (prevents reassignment).
Define shared methods on prototypes to save memory.
⚡ 10. Memory Tip
Methods shared across instances (on prototype) use less memory than
redefining them in constructors.
🎯 Destructuring in JavaScript
Destructuring allows unpacking values from arrays or objects into variables.
🧮 1. Array Destructuring
const arr = [1, 2, 3];
const [a, b, c] = arr;
const [x, , z] = arr; // Skip elements
const [p = 10, q = 20] = [5]; // Default values
const [head, ...tail] = [1,2,3,4]; // Rest
✅ Use cases:
Swap variables: [a, b] = [b, a]
Return multiple values: return [val1, val2]
🧱 2. Object Destructuring
Objects & classes in Javascript 6
const obj = { name: "J", age: 21, city: "Chennai" };
const { name, age } = obj;
const { name: fullName, city: town } = obj;
const { country = "India" } = obj;
const { name, ...rest } = obj;
📝 Notes:
Order does not matter.
Missing properties → undefined unless default is set.
🪆 3. Nested Destructuring
const data = { id: 1, user: { name: "A", contact: { phone: 123 } } };
const { user: { name, contact: { phone } } } = data;
✅ To avoid errors:
const { user: { name } = {} } = data;
🧰 4. Destructuring in Function Parameters
function greet({ name, age = 0 }) {
[Link](`Hi ${name}, age ${age}`);
}
greet({ name: "J" });
function printCoords([x, y]) {
[Link](x, y);
}
Objects & classes in Javascript 7
printCoords([1,2]);
⚡ 5. Spread + Destructuring
const a = [1,2,3];
const b = [0, ...a, 4];
const obj1 = { x:1, y:2 };
const obj2 = { ...obj1, z:3, y:10 };
🧩 Example Implementations
🪶 Object Method Using this
const book = {
title: "JS Guide",
author: "A",
details() {
[Link](`${[Link]} by ${[Link]}`);
}
};
[Link]();
🐕 Class with Inheritance & Private Field
class Animal {
constructor(name) { [Link] = name; }
speak() { [Link](`${[Link]} makes a sound`); }
}
Objects & classes in Javascript 8
class Dog extends Animal {
#secret = "bones";
speak() { [Link](`${[Link]} barks`); }
getSecret() { return this.#secret; }
}
const d = new Dog("Rex");
[Link]();
[Link]([Link]());
🧠 Destructuring Examples
const nums = [10, 20, 30];
const [one, two, three] = nums;
const user = { id: 1, name: "J", roles: ["admin", "user"] };
const { name, roles: [firstRole] } = user;
function signup({ username, email, role = "guest" }) {
[Link](username, email, role);
}
signup({ username: "jan", email: "a@[Link]" });
🚫 Common Pitfalls
1. Arrow this issue — arrow functions inherit outer this .
2. Destructuring undefined — check for parent existence.
3. Overwriting with spread — { ...a, ...b } overwrites same keys.
4. Using var — avoid it; prefer let or const .
Objects & classes in Javascript 9
5. Hardcoding object names in methods — use this for reusability.
⚡ Quick Cheat Sheet
Concept Syntax / Example
Object literal { key: value }
Access props [Link] or obj["key"]
Method shorthand say() {}
this Refers to calling object
Prototype [Link](obj)
Class class A { constructor(){} }
Inherit class B extends A { super(); }
Array destructure [a,b] = arr
Object destructure {x,y} = obj
Rename {x: newX}
Default {a=1} or [a=1]
Spread {...obj} or [...arr]
🧠 Practice Exercises
1. Fix a method to correctly use this and reuse across objects.
2. Create Person and Employee classes, add static method fromData() .
3. Destructure config = { host: 'h', port: 80, options: { secure: false } } to get host and secure = true
if missing.
4. Merge a and b without mutating a .
Objects & classes in Javascript 10
