When you run code in Javascript it operates within an **Execution Context**. The execution Context is responsible for keeping track of what is going on: figuring out **which variables and functions are accesible** at a given point in time, determining the **value of this**, applying **hoisting rules** and setting up the **scope chain**.

## Types of Execution Context
 
1. Global Execution Context:
     - Is Created when Javascript engine starts executing the code
     - It sets up the global this (In the browser refers to the window object)
     -  There's only one global context
 
2. Function Execution Context:
     -  Created every time a function is invoked
     -  Each functuion has its own execution context (separate from the global context)
     -  A new execution context is created for each call, even if it's the same function  

## Phases of Execution Context:

1. **Creation Phase**:
    - Creation of the **Variable Environment**
    - Creation of The **Lexical Environment**
    - Establishing the **Scope Chain**
    - Determination of **this Binding**
    - **Hoisting**

2. **Execution Phase**
   - This phase runs the code line by line: Variables are assignet to their actual values, function are executed (if they are called)
    


## Lexical environment and Scope Chain:

Using the **lexical environment** javascript knows where a piece of code was **declared** (this is known as lexical scoping).
Each execution context's lexical environment gets **linked to its outer environment**, forming the **scope chain**. 
Javascript uses the scope chain to determine the variable accessibility (it starts from the current context and works its way to the global context)


         
 ```js
const globalVariable = "Global Variable";

function a() {
  return globalVariable; // 'a' accesses variable from the global lexical environment
}

function b() {
  connst bVariable = "Inside b function variable";

  function c() {
    return bVariable+ " and " + globalVariable; // 'c' accesses variable from 'b's lexical environment
  }

  return c();
}

console.log(a()); // Outputs: Global Variable
console.log(b()); // Outputs: "Inside b function variable and Global Variable"

```

**Explanation**:  a accesses a variable declared in the **global lexical environment** , c accesses a variable declared in the **lexical environment of b and global lexical environment**. The scope chain links c's environment to b's then to global

**Types Of Scopes:**

1. Global Scope:
A variable declared **outside all functions or blocks** is in the **global scope** and accessible anywhere in your code.
```js
const globalVariable = "I'm in global scope";

function showGlobal() {
  console.log(globalVariable); // Accessible here
}

showGlobal(); // Output: I'm in global scope
```
2. Function Scope: 
A variable declared **inside a function** using var, let, or const is only accessible ** within that function**.
```js
function functionScopeExample() {
  const a = "Function Scope";
  console.log(a); // Works here
}

functionScopeExample();

console.log(a); // Error: a is not defined

```

3. Block scope: 
 Variables declared inside a block (e.g., an if, for, or {} block) using let or const are only accessible within that block. Variables declared with var aren't block scoped they are function scoped.
 
 ```js
{
  let blockLet = "I'm a block-scoped let variable";
  const blockConst = "I'm a block-scoped const variable";
  var blockVar = "I'm declared with var inside a block";
  console.log(blockLet);   // Accessible here
  console.log(blockConst); // Accessible here
}

console.log(blockLet);   //  Error: blockLet is not defined
console.log(blockConst); //  Error: blockConst is not defined
console.log(blockVar); //  Still accessible here — var is not block-scoped



```
 
## Variable environment:

   During the creation phase of an execution context, the variable enviroment  is responsable for creating memory space   for all the variables and functions declared in that scope applying hoisting. Hoisting allows certain declarations to be accesed before their line of code is actually reached.  

 Example:
 
 ```js

function one(){
var variable;
}

function two(){
var variable = true;
one(); // new Execution Context
}

var variable = false

two();

// Execution Contexts:
// one --> 'variable' is undefined in the 'one' functions local scope
//two() -->'variable' is true in the two functions local scope
//global() --> 'variable' is false in the global scope

// Each execution context has its own **Variable Environment**, the same variable can exist in all three without conflict.
```

## Hoisting

Hoisting is the behaviour of "moving" the variables or function declarations to the top of their respective environments during the creation phase. Variables declared with **var** are **partially** **hoisted**, **functions are fully hoisted**, variables declared with **let and const**  are **hoisted but not initialized** (They reimain in a Temporal Dead Zone and accessing them before declaration causes a RefrenceError) . 

Example2:
```js
console.log(partialyHoisted);
console.log(fullyHoisted);

var partialyHoisted = "partialyHoisted";

function fullyHoisted(){
   console.log("Fully Hoisted");
}

// Logs: 
// undefined
// "Fully hoisted"
```

## This binding

**What is  _this_  ?**

**This** is the object that the function is a property of

Example:

```js

function example() {
  console.log(this); // Global object
}



const user = {
  name: "Marko",
  example() {
    console.log(this);
  }
};

user.example(); 

// {
//   name: "Marko",
//   example: ƒ example()
//  }

```

JavaScript Execution Context, Scope, Hoisting, this keyword

How Javascript creates and manages execution context

Javascript

JavaScript Execution Context, Scope, Hoisting, and this

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

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

JavaScript Internals

When you run Javascript code it's processed by a javascript engine. At a high level, the engine performs two key tasks:

-    **Manages Execution(Call Stack)**: it determines what piece of code to run and when
-    **Manages Memory(Memory Heap):** It allocates memory for variables and objects, and cleans up memory that is no longer needed.
 
## What is the Call Stack?
 
The **Call Stack** is a data structure where the JavaScript engine keeps track of where your code is during execution. Every time a function is called, it gets **pushed** onto the stack. Once a function finishes executing, it’s **popped** off the stack. When the stack is empty, it indicates that the engine has finished executing the script. You can think of the call stack like a stack of plates where you can only remove the plate on top (first in,last out). Newer function calls are placed on top, while older ones stay lower until they’re done. If functions keep calling each other endlessly (like a recursive function without an exit condition), a **"Stack Overflow"** error occurs because the stack grows too large for the engine to manage.

## How the Call Stack Works? (Example) 

```js
function secondFunction() {
  console.log('End of the stack');
}

function firstFunction() {
  secondFunction();
}

firstFunction();

```

## Execution step by step:

1.  firstFunction() is called → pushed onto the stack.
2.  Inside firstFunction, secondFunction() is called → pushed onto the stack.
3.  Inside secondFunction, console.log('End of the stack') is called → pushed onto the stack.
4.  console.log('End of the stack') executes and returns → popped off the stack.
5.  secondFunction() finishes → popped off the stack.
6.  sayHi() finishes → popped off the stack.

## What is the Memory Heap?

The **Memory Heap** is a large region of memory where objects, functions, and variables are stored. Whenever you create objects, arrays, or even functions, they are allocated in the memory heap (primitive constants are stored in the call stack or in the global execution context -ex: window in the browser-).

## Example of Memory Allocation:

```js

const person = {
  name: 'Marko',
  gender: 'male'
};
```

When this code runs:

- The object  **{name: 'Marko', gender: 'male'}** is stored in the heap.
- The variable **person** holds a reference (a pointer) to that location in memory.

## Example of Call Stack and Memory Heap usage:


```js

function createProfile(name, gender) {
  return {
    name: name,
    gender: gender
  };
}

const userProfile = createProfile('Marko', 'male');

console.log(userProfile);

```

## What happens:

- **createProfile('Marko', 'male')** is called → pushed onto the **call stack**.
- a new object is created in the **memory heap** (the function is still on the stack)
- **createProfile** returns a reference to the object -> poped of the **call stack**
- reference is stored in the **userProfile** variable
- **console.log(userProfile)**  logs the object, accessing it via the reference.


## How the Call Stack and Memory Heap Interact

- The **call stack** manages where you are in the code and what function is currently running (keeps track of function calls)
- The **memory** heap manages where your data lives in memory (stores actual data during function calls)


Call Stack and Memory Heap

How Javascript manages execution and memory, focusing on the call stack and memory heap.

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

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

 **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 has two main categories of data types:

**Primitive Types** : are immutable and passed by value: **number**, **string**, **boolean**, **undefined**, **null**, **symbol** and **bigint** .

**Non-Primitive Types**: **Objects** (including **arrays** and **functions**) are non-primitive types. In JavaScript, these are passed by reference


**Primitives can behave like objects temporarily because JavaScript wraps them in object "wrappers"**. For example true.toString() works because Javascript temporarily wraps **true** in a **Boolean** object, allowing access to its methods. Internally, **true.toString()** behaves like **Boolean(true).toString()** using the standard built-in object **Boolean**. You can see more about standar build-in objects here: [MDN Web Docs: Standard Built-in Objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)



**Functions and arrays are technically objects** (special kind of objects), even though **typeof** returns '**function**' for functions and we can demonstrate this with examples showing:

1. They can have properties assigned to them.
2. They inherit from Object.
3. They behave like objects in key ways

Example1: Arrays are Objects

```js
let arr = [1, 2, 3];

// We can add a custom property to the array
arr.customProperty = "Custom property";
console.log(arr.customProperty) // "Custom property"

// Proving Inheritance
console.log(arr instanceof Object);     // true

// Behaves like an object in key ways
arr["anotherCustomProperty"] = "another custom property";
console.log(arr.anotherCustomProperty); //  "another custom property"
```

Example2: Functions are Objects

```js
function example() {
  console.log("Example");
}
// We can add a custom property 
example.customProperty = "Custom property";
console.log(example.customProperty) // "Custom property"

// Proving Inheritance
console.log(example instanceof Object);     // true

// Behaves like an object in key ways
example["anotherCustomProperty"] = "another custom property";
console.log(example.anotherCustomProperty); //  "another custom property"
```

**Primitive Types** :

 These are immutable: once created, their value cannot be changed.
-  When assigning a primitive to a variable, the **value is stored directly** in memory.
-  Assigning one primitive variable to another **copies the value**, not the reference.
-  Modifying the new variable does **not affect** the original.

```js
let a = 5;
let b = a;
b++;
console.log(a); // 5
console.log(b); // 6
```


**Non-Primitive Types** :

**Objects** (including arrays and functions) are **mutable** and stored by reference in memory.
- Assigning an object to another variable copies the **reference**, not the object.
- Changing one variable’s properties affects the other.

```js
let obj1 = { name: "Marko" };
let obj2 = obj1;
obj2.name = "Valentin";
console.log(obj1.password); // "Valentin"

let c = [1, 2, 3];
let d = c;
d.push(4);
console.log(c); // [1, 2, 3, 4]

```
**Cloning Objects** :
To avoid unintended side effects, you may want to clone objects:

**Shallow Clone** :
- Only clones the **top-level** properties.
- Use **Object.assign()** or the spread operato r**(...)**.
- However, if a **nested object** exists, changes will **still affect the original**.

```js
const original = {
  name: "Valentin",
  address: {
    city: "London"
  }
};

// Shallow clone using spread operator
const clone = {...original};

// Modify top-level property
clone.name = "Valentin";

// Modify nested property
clone.address.city = "New York";

console.log(original.name);       // "Marko" (unchanged)
console.log(clone.name);          // "Valentin"

console.log(original.address.city); // "New York" (changed)
console.log(clone.address.city);    // "New York"
```

**Deep Clone** :
- Clones the object **and all nested objects**.
- You can create a deep clone in several ways: using JSON.parse(JSON.stringify(...)) (not recommended due to limitations), writing a manual recursive function, structuredClone() (Modern Browsers/Node), or using a modern library like Lodash with _.cloneDeep.

```js
const original = {
  name: "Valentin",
  address: {
    city: "London"
  }
};

// Deep clone using JSON.stringify() + JSON.parse():
let deepClone = JSON.parse(JSON.stringify(original));

// Modify top-level property
deepClone.name = "Valentin";

// Modify nested property
deepClone.address.city = "New York";

console.log(original.name);       // "Marko" (unchanged)
console.log(deepClone.name);          // "Valentin"

console.log(original.address.city); // "London" (Unchanged)
console.log(deepClone.address.city);    // "New York"
```

Types in Javascript

Javascript data Types: primitives, non-primitives, type cercion, pass by value, pass by reference, shalow and deep copy