 **JavaScript** is a prototype-based language. This means that inheritance is handled via prototypes, not classical classes (although ES6 classes are just syntactic sugar over prototypes).

**Prototypal inheritance** is a feature in JavaScript where objects can inherit properties and methods from other objects. Each object has an internal link to another object called its **prototype**. This prototype object can also have a prototype, forming a chain known as the **prototype chain**.

When you try to access a property or method on an object, JavaScript looks for it on the object itself. If it's not found, the search continues up the prototype chain until it finds the property or reaches the end of the chain (null)

**The Prototype Chain**

```js
const base = { isAlive: true };

const animal = Object.create(base);
animal.eats = true;

const dog = Object.create(animal);
dog.barks = true;

//When you access a property on dog, JavaScript walks up the chain:

dog.barks      //  Found on dog itself
dog.eats       //  Inherited from animal
dog.isAlive    // ✅Inherited from base


```

**Everything in JavaScript is an Object**

Almost everything in JavaScript is derived from an object — including arrays and functions.


```js
typeof []        // "object"
typeof function(){}  // "function" (but it's a callable object)
typeof {}        // "object"
```

**What are __ proto __, [[Prototype]] and .prototype**

**1. [[Prototype]] (Internal Slot)**

Every object in JavaScript **has an internal** slot called **[[Prototype]]**. It **points to another object** that it inherits from (or **null** if it's the end of the chain). You can think of this as the actual **inheritance link** between objects. **[[Prototype]]** is not directly accessible, but it’s visible via **__ proto __** or **Object.getPrototypeOf()**.

**2. __ proto __**
A **legacy getter/setter** for **[[Prototype]]** , mainly for convenience. It is **not recommended** for production code, but useful for learning and inspection.

```js
const obj = {};
const anotherObj = {}; 

console.log(obj.__proto__);    // Outputs: Object.prototype
console.log(Object.getPrototypeOf(obj));  // Same output, modern equivalent

const newProto = { hello: "world" };

// Old way to set prototype (not recommended anymore)
anotherObj.__proto__ = newProto;

// Modern way to set prototype
Object.setPrototypeOf(obj, newProto);

console.log(anotherObj.hello);  // Outputs: "world"
console.log(obj.hello);         // Outputs: "world"

```

**3. .prototype: The Blueprint for Instances**
The .prototype **exists only on constructor functions** (like Function, Array, or your custom constructors). It is the **object that will be assigned as the [[Prototype]]** of instances created by that constructor using new.

```js
function Person(name) {
  this.name = name;
}

Person.prototype.sayHi = function () {
  console.log(`Hi, I'm ${this.name}`);
};

const alice = new Person("Marko");

console.log(alice.__proto__ === Person.prototype); // true
alice.sayHi(); // "Hi, I'm Marko"

```

**In JavaScript, all objects ultimately inherit from Object.prototype. This means Object is the base object in the prototype chain.**

```js
const obj = {};
console.log(obj.__proto__ === Object.prototype);  // true
console.log(Object.prototype.__proto__);  // null

const arr = [1, 2, 3];

console.log(arr.__proto__ === Array.prototype);         // true
console.log(Array.prototype.__proto__ === Object.prototype); //true
console.log(Object.prototype.__proto__);                // null

function example() {}

console.log(example.__proto__ === Function.prototype);         // true
console.log(Function.prototype.__proto__ === Object.prototype);  // true
console.log(Object.prototype.__proto__);   // null
```


Prototypal Inheritance

JavaScript uses prototypal inheritance to build objects, share behavior, and enable code reuse

Javascript

JavaScript Internals

JavaScript's object-oriented behavior is built on the **prototype chain**. When an object is created via a constructor function, all instances inherit shared methods and properties from the constructor’s **.prototype**.

```js
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function () {
  console.log(`${this.name} makes a noise.`);
};

const dog = new Animal("Rex");
dog.speak(); // Rex makes a noise.

```

Behind the scenes:
- dog. __ proto __ points to Animal.prototype
- That’s how dog can access speak() even though it’s not directly on the dog object

When you use the new keyword, JavaScript performs these steps:

1. Creates a new empty object
2. Sets its internal [[Prototype]] (i.e., __proto__) to the constructor's .prototype
3. Calls the constructor function with this bound to the new object
4. Returns the new object

```js
const rex = new Animal("Rex");

//equivalent to:

const rex = {};
rex.__proto__ = Animal.prototype;
Animal.call(rex, "Rex");
```

The class syntax introduced in ES6 provides a cleaner, more familiar structure for OOP, but it's just syntactic sugar—the underlying prototype-based inheritance model remains unchanged.

```js
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}
```

This modern syntax feels more like traditional OOP, but under the hood:

- It still creates a constructor function
- Methods are still placed on the prototype
- Inheritance still uses the prototype chain


OOP in Javascript: Classes, prototypes and constructors

JavaScript’s object-oriented model. How class syntax simplifies, but doesn't replace, prototype-based inheritance. What happens under the hood with prototype, __proto__, and new.

OOP in JavaScript

**Object-Oriented Programming** (OOP) is a programming paradigm centered around objects that contain both state (properties) and behavior (methods). The four pillars of OOP are:

- **Encapsulation** (hiding internal state)
- **Abstraction** (simplifying complexity)
- **Inheritance** (reusing code)
- **Polymorphism** (interchangeable behaviors)

In ES6, JavaScript introduced the class keyword, which provides a cleaner syntax for creating constructor functions and working with prototypes. Behind the scenes, class is just syntactic sugar over JavaScript’s prototype system.

```js
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

const dog = new Animal("Rex");
dog.speak(); // Rex makes a noise.

```

**Encapsulation** means keeping internal state hidden from outside interference. JavaScript supports this via **public and private fields**:

```js
class Car {
  constructor(brand) {
    this.brand = brand; // public by default
  }
}

// Create an instance
const myCar = new Car("Mercedes");

// Access the public property
console.log(myCar.brand); // Mercedes

```

```js
class Car {
  #mileage = 0;

  drive(km) {
    this.#mileage += km;
    console.log(`Drove ${km}km, total: ${this.#mileage}`);
  }
}

const car = new Car();
car.drive(50);           // Drove 50km, total: 50
console.log(car.#mileage); // SyntaxError: Private field

```

**Inheritance** allows a class to extend another class, inheriting its properties and methods.

```js
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Rex");
dog.speak(); // Rex makes a sound. (inherited from Animal)
dog.bark();  // Rex barks.        (defined in Dog)

```

**Polymorphism** means different classes can be used interchangeably if they share the same interface (i.e., method names).

```js
class Bird {
  speak() {
    console.log("Chirp!");
  }
}

class Cat {
  speak() {
    console.log("Meow!");
  }
}

function animalTalk(animal) {
  animal.speak(); // Works for both Bird and Cat
}

animalTalk(new Bird()); // Chirp!
animalTalk(new Cat());  // Meow!

```

**Abstraction** isn’t directly enforced in JS, but you can use private fields/methods and well-designed APIs to expose only what matters.

```js
class BankAccount {
  #balance = 0;

  deposit(amount) {
    if (amount > 0) this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

```



Object-Oriented Programming in JavaScript

The four pillars of OOP: Encapsulation,  Abstraction,  Inheritance,  Polymorphism 