Full Stack Camp

6) ES6 Classes (Modern, cleaner syntax)
Now we use ES6 classes which are syntax sugar over prototypes. The behavior is the same; the code is cleaner.

6.1 Basic class with constructor and methods

class Person {
     constructor(name, age) {
         this.name = name; // instance property
        this.age = age; } // methods go on the prototype (shared)

     greet() { console.log(Hi, I'm ${this.name} and I'm ${this.age}.); } }

const p = new Person("Betelhem", 21); p.greet();

Under the hood, greet is still placed on Person.prototype.

6.2 Inheritance with extends and super
We can make a new class that inherits from another.

class Student extends Person { constructor(name, age, major) { super(name, age); // call Person constructor this.major = major; } study() { console.log(${this.name} is studying ${this.major}.); } }
const st = new Student("Samuel", 20, "Math");
st.greet(); // inherited
st.study(); // own method

6.3 Getters, setters, and static methods (handy basics)
➤setters and getters allow controlled access properties. For example , using set we can prevent the user from entering a number for names.

class BankAccount { constructor(owner, balance = 0) { this.owner = owner; this._balance = balance; // convention: underscore = "internal" } // Getter (access like a property) get balance() { return this._balance; } // Setter (validate on assignment) set balance(value) { if (value < 0) { console.log("Balance cannot be negative."); return; } this._balance = value; } deposit(amount) { this._balance += amount; } withdraw(amount) { if (amount > this._balance) { console.log("Insufficient funds!"); return; } this._balance -= amount; } // Static method (belongs to the class, not instances) static compare(a, b) { return a.balance - b.balance; } } const a1 = new BankAccount("Hanna", 1000); const a2 = new BankAccount("Abel", 500); a1.deposit(200); console.log(a1.balance); // getter a1.balance = 50; // setter console.log(BankAccount.compare(a1, a2)); // static

➥getter/setter make property-style reads/writes that run code under the hood.
➥static methods are utilities on the class itself (not on instances).

7) this inside classes and methods (quick reminder)
➥In class methods and prototype methods, this refers to the instance that called the method.
➥Avoid using arrow functions for prototype methods when you need dynamic this. Arrow functions capture this from the outer scope, which can surprise you.

class Demo { constructor(name) { this.name = name; } sayName() { // good console.log(this.name); } sayNameArrow = () => { // fine for fields, butthis is lexically bound console.log(this.name); } }

8) Real‑World Mini Example :Library with Books (composition + classes)

class Book { constructor(title, author, pages) { this.title = title; this.author = author; this.pages = pages; this.read = false; } markRead() { this.read = true; } } class Library { constructor(name) { this.name = name; this.collection = []; // array of Book instances } addBook(book) { this.collection.push(book); } listUnread() { return this.collection.filter(b => !b.read); } } const b1 = new Book("Javascript Essentials", "Sara", 220); const b2 = new Book("CSS Mastery", "Almaz", 180); const lib = new Library("Addis Tech Library"); lib.addBook(b1); lib.addBook(b2); b1.markRead(); console.log(lib.listUnread().map(b => b.title));

9) Common Pitfalls (and fixes)
➤Forgetting new with constructor functions:
➤Defining methods inside the constructor (duplicates for each instance). Prefer prototypes or class methods.
➤Arrow functions as class/prototype methods when you expect dynamic this. Use regular methods unless you need lexical binding.
➤Forgetting to reset constructor after Object.create in old‑style inheritance:

84 viewsedited 11:02