**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 

Javascript

OOP in JavaScript

#### New Binding (Constructor Functions):
When a function is invoked with the new keyword, JavaScript creates a new object and sets this to point to that object.
```js
function Person(name) {
  this.name = name;
}

const person1 = new Person("Marko");
console.log(person1.name); // Marko
```

#### Implicit Binding:
When a function is called as a method of an object, this refers to the object that owns the method — the one to the left of the dot.
```js
const person = {
  name: "Marko",
  hi() {
    console.log("Hi, " + this.name);
  }
};

person.hi(); // Hi, Marko
```


#### Explicit Binding:
You can manually set the value of this using .call(), .apply(), or .bind().
```js
function greet() {
  console.log("Hi, " + this.name);
}

const person = { name: "Marko" };

greet.call(person);  // Hi, Marko
greet.apply(person); // Hi, Marko

const boundGreet = greet.bind(person);
boundGreet();        // Hi, Marko

```

#### Arrow Functions: Lexical this
Arrow functions don’t bind their own this. Instead, they inherit this from the surrounding lexical context (the scope in which they were defined).
```js
const person = {
  name: "Marko",
  greet() {
    const arrow = () => {
      console.log("Arrow:", this.name); //  Inherits from greet() → "Marko"
    };

    function regular() {
      console.log("Regular:", this.name); //  `this` is undefined or global
    }

    arrow();
    regular();
  }
};

person.greet();


```

This in Javascript: The four Binding Rules

The four main binding rules: implicit, explicit, new, default and arrow functions

this in JavaScript: The Binding Rules

## What is a single-threaded language?

A **shingle-threaded** language is one that can execute only **one task at a time**. It executes the tasks one after the other, and each task has to finish before the next task starts. There is only one call stack, no parallel execution like in multhithreaded languages such as Java and C++

## How works the Call Stack in a single-threaded language?

The **Javascript call stack** works on a **"last in, first out"**. Only one function runs at a time. When a function finishes, it's removed of the stack. If something takes too long to finish, it blocks the stack, which means nothing else can run until it's done. For more information about how the call stack works, you can see my [post](http://localhost:3000/blog/article/call-stack-and-memory-heap) about the call stack.

## How can we prevent long running tasks from blocking our code?

There are several approaches to **prevent long-running tasks from blocking our code**. Some of these include using **asynchronous programming** techniques, such as Web API's callbacks, promises, async/await or **web workers**.

Web workers don't block our code because they run on a **separate thread** in the browser.

Asynchronous programming doesn't block our code because it uses the **event loop**,

## How does the event loop work?

1. The event loop starts by executing the code that is on the call stack. When it encounters asynchronous operations, it sends them to the Web Api, which is responsible to place them in the right queue. once the stack is empty (all synchronous tasks are completed), it checks the queues (callback queue, microtask queue )  to decide what will execute next. 
2.  Microtask queue has higher priority than the callback queue. The event loop will process all microtasks such as (promises resolutions, .then . catch) before moving to the callback queue.
4.  After microtask queue is emptied, the event loop will start procesing the calback queue (callbacks from web Api such as setTimeout, setInterval, event listeners)
5.  Will repeat this cycle over and over again

## Example:

```js
console.log('1: Start');

setTimeout(() => {
  console.log('2: setTimeout callback');
}, 0);

Promise.resolve().then(() => {
  console.log('3: Promise resolved');
});

console.log('4: End');

```

## The output will be:

1. Start
2. End
3. Promise resolved
4. setTimeout callback



The Single-Threaded Nature of Javascript

Understand how Javascript, being single-threaded, handles asynchronous operations using the call stack and event loop

Hi, I'mValentin-Marko.

Recently Published

Object-Oriented Programming in JavaScript

This in Javascript: The four Binding Rules

The Single-Threaded Nature of Javascript