Forem: Khafido Ilzam

Execution Context in JavaScript

Khafido Ilzam — Thu, 05 Mar 2026 03:47:24 +0000

Execution context is one of the most fundamental concepts in JavaScript — it's the environment in which JavaScript code is evaluated and executed.

What Is an Execution Context?

Every time JavaScript runs code, it creates an execution context — a wrapper that holds information about the current code being run: what variables are available, what this refers to, and the outer environment it has access to.

There are three types:
Global Execution Context (GEC) — created once when the script first runs
Function Execution Context (FEC) — created every time a function is invoked
Eval Execution Context — created inside eval() calls (rarely used, mostly avoided)

Every execution context goes through two distinct phases:

Phase 1: Creation Phase (Memory / Hoisting Phase)
Before any code runs, the JavaScript engine scans the code and:

Creates the Variable Environment (stores var declarations, initialized to undefined)
Creates the Lexical Environment (stores let/const declarations in the Temporal Dead Zone)
Stores function declarations in memory in their entirety (fully hoisted)
Determines the value of this
Creates a reference to the outer environment (the scope chain)

This is why hoisting happens — variables and functions are placed into memory before code executes line by line.

Phase 2: Execution Phase
The engine runs the code line by line, assigns values, calls functions (which create new FECs), and so on.

The Call Stack

To keep track of all the contexts, including global and functional, the JavaScript engine uses a call stack. A call stack is also known as an 'Execution Context Stack', 'Runtime Stack', or 'Machine Stack'.

JavaScript is single-threaded, so it processes one execution context at a time using a call stack (a LIFO data structure). The GEC sits at the bottom; each function call pushes a new FEC on top; when a function returns, its context is popped off.

Implement OOP using TypeScript

Khafido Ilzam — Mon, 08 Dec 2025 09:02:34 +0000

Let’s learn how to implement all OOP principles in TypeScript.

Classes & Objects
Encapsulation
Abstraction & Interface
Inheritance
Polymorphism

Class and Object

A class is a blueprint, and objects are instances of the class.

Encapsulation

Encapsulation = hide internal data, expose only what is needed.
Use private, protected, and public.

Abstraction

Abstraction = hide complexity and expose only what the user needs.
Use abstract classes or interfaces. Interfaces define shape, and classes can implement them.

You cannot create an object from it, but it can have abstract methods (no body) and normal methods. The child must implement (override) the abstract method.

A class can implement multiple interfaces. But a class can extend only one class

Interfaces do NOT contain implementation. Classes must provide the implementation

Inheritance

A class can inherit methods or data from another class.

Polymorphism

Polymorphism = same method name, different behavior.

Full Example Code:
https://snipsave.com/view-snippet?user=khafidoilzam&snippet_id=Fp13KgLloQpTnToegf

REST vs RESTful API

Khafido Ilzam — Tue, 18 Nov 2025 03:48:57 +0000

The distinction between "REST API" and "RESTful API" lies in their adherence to the principles of Representational State Transfer (REST) architectural style.

REST API: This term generally refers to any API that utilizes HTTP and incorporates some, but not necessarily all, of the principles of REST. It may use clear URLs for resources and standard HTTP methods, such as GET and POST, but it may not strictly adhere to all the constraints defined by the REST architectural style.

RESTful API: This term specifically denotes an API that fully conforms to all the constraints and principles of the REST architectural style.

Key principles of REST:

Client-Server: Separation of concerns between the client and server.
Stateless: Each request from the client to the server must contain all the information needed to understand the request, and the server must not store any client context between requests.
Cacheable: Responses must explicitly or implicitly indicate whether they are cacheable or non-cacheable to prevent clients from reusing stale or inappropriate data.
Uniform Interface: A standardized way for clients to interact with resources, including resource identification, resource manipulation through representations, self-descriptive messages, and Hypermedia as the Engine of Application State (HATEOAS).
Layered System: An architecture composed of hierarchical layers, where each layer can communicate only with its immediate neighbors.
Code on Demand (optional): Servers can temporarily extend or customize client functionality by transferring executable code.

In essence, while all RESTful APIs are a type of REST API, not all REST APIs are truly RESTful. A RESTful API is a specific implementation that rigorously adheres to the full set of REST constraints, ensuring greater consistency, scalability, and maintainability for large-scale web applications.

JavaScript Memory Behavior

Khafido Ilzam — Mon, 17 Nov 2025 08:56:16 +0000

JavaScript uses two main memory spaces to store variables:

Call Stack → where execution happens, stores variable references (pointers)
Memory Heap → where objects, arrays, and functions live

What is the Stack?

Stack is a data structure that obeys the Last In First Out (LIFO) principle. This implies that the last item to enter the stack goes out first.

Imagine a pile of books stacked up on a shelf. The last book ends up being the first to be removed. Data stored inside the stack can still be accessed easily.

What is the Heap?

Reference data are stored inside the heap. When reference data is created, the variable of the data is placed on the stack, but the actual value is placed on the heap.

In JavaScript, different data types have different behaviors and locations in memory. So to reduce the chances of having bugs in your code, you need to understand the concept of mutability and immutability in JavaScript.

But the real difference between var, let, and const is how they are handled inside the Call Stack during creation and access, especially during hoisting.

var, let, and const control whether you can reassign the variable. Mutability controls whether the value itself can be changed. These are two different things.

Mutability

Mutability refers to data types that can be accessed and changed after they've been created and stored in memory. If a data type is mutable, that means that you can change it. Mutability allows you to modify existing values without creating new ones.

const staff = {
    name: "Strengthened",
    age: 43,
    hobbies: ["reading", "Swimming"]
}

const staff2 = staff;
staff2.age = 53;
console.log(staff.age); // 53
console.log(staff2.age); // 53

Reference data does not copy values, but rather pointers.

Changing the age of staff2 updates the age of the staff object. Now you know it is because both point to the same object.

How to Clone Object Properly?

Immutability

Immutability refers to data types that you can't change after creating them, but that you can still access in memory. A value is immutable when altering it is impossible. Primitive data types are immutable, as we discussed above.

let student1 = "Halina";
let student2 = student1;
student1 = "Brookes"

console.log(student1); // Brookes
console.log(student2); // Halina

Source: https://www.freecodecamp.org/news/mutability-vs-immutability-in-javascript/

How to Clone Object Properly?

Khafido Ilzam — Mon, 17 Nov 2025 08:54:21 +0000

You can clone the properties of an object using the Object. assign() method and the spread operator. With these, you can change the properties of the cloned object without changing the properties of the object from which it was cloned.

How the `Object.assign()` method Works

The object.assign() method copies properties from an object (the source) into another object (the target) and returns the modified target object.

Here's the syntax:
Object.assign(target, source)

const staff = {
    name: "Strengthened",
    age: 43,
    hobbies: ["reading", "Swimming"]
}

const staff2 = Object.assign({}, staff);
staff2.age = 53;

console.log(staff.age); // 43
console.log(staff2.age); // 53

How the Spread Operator Works

Here's the syntax of the spread operator:
const newObj = {...obj}

Using the spread operator is quite simple. You need to place three dots ... before the name of the object whose properties you intend to clone:

const staff = {
    name: "Strengthened",
    age: 43,
    hobbies: ["reading", "Swimming"]
}

const staff2 = { ...staff };
staff2.age = 53;

console.log(staff.age); // 43
console.log(staff2.age); // 53

JavaScript Data Types

Khafido Ilzam — Mon, 17 Nov 2025 06:43:56 +0000

Variables hold values, and every value has a specific data type that defines the kind of information it holds. These data types are broadly categorized into two groups: Primitive Data Types and Non-Primitive Data Types.

Data types are categorized into Primitive and Non-Primitive (Reference) types in JavaScript.

Primitive

When you assign a primitive value:

It is stored directly in memory
Copying the value creates a new independent value

They are immutable, meaning you cannot change the value itself—only replace it.

JavaScript has 7 primitive types:

1. Number

All numbers (integer or floating point).

let x = 10;
let y = 11.5;

2. String

Text data.

let name = "Hello World!";

3. Boolean

True or False.

let isOnline = true;

4. Null

Intentional empty value.

let data = null;

5. Undefined

A variable declared but not assigned a value.

let a; // undefined

6. Symbol

Symbol data type is used to create objects that will always be unique. These objects can be created using Symbol constructor.

let sym = Symbol("Hello")
console.log(typeof(sym)); // Symbol
console.log(sym); // Hello

7. BigInt

For very large integers beyond Number’s limit.

let big = 12345678901234567890n;

Non-Primitive (Reference)

This data type is mutable, which means you can change/modify it. Allows you to modify existing values without creating new ones.

Non-primitive values are stored by reference. When you assign an object to another variable, JavaScript copies the reference, not the value.

These are objects—more complex data structures. The main non-primitive types:

Object
Array (actually a special type of object)
Function (also an object)
Date
Map, Set, etc. (still objects)

let obj1 = { age: 27 };
let obj2 = obj1;

obj2.age = 30;

console.log(obj1.age); // 30 (obj1 also changed)

Why? Because both variables point to the same memory address.

JavaScript Declaration Variable

Khafido Ilzam — Mon, 17 Nov 2025 05:35:02 +0000

In JavaScript, variables are declared using one of three keywords: var, let, or const. These keywords differ in their scope, hoisting behavior, and re-assignment rules.

1. `var` – the old way (avoid using it)

Function-scoped → only respects function boundaries.
Can be re-declared.
Can be updated.
Hoisted → moved to the top of the scope, but initialized as undefined.

It can cause weird bugs because it ignores block scope.

var x = 1;
if (true) {
  var x = 2;  // same variable!
}
console.log(x); // 2

2. `let` – recommended for variables that change

Block-scoped → respects { } blocks.
Can be updated, but not re-declared in the same scope.
Also hoisted, but not usable before declared (“temporal dead zone”).

Use let when the value needs to change.

let count = 1;
count = 2; // OK
// let count = 3; // ❌ Error (same scope)

3. `const` – recommended default

Block-scoped
Cannot be updated or re-declared
Best for values that should not change

Objects and arrays can still be modified, but the variable reference cannot change.

const PI = 3.14;
// PI = 4; // ❌ Error

const user = { name: "Khaf" };
user.name = "Fido"; // ✔ OK
// user = {} // ❌ Not allowed

Summary

Feature	var	let	const
Scope	Function	Block	Block
Re-declare	✔ Yes	❌ No	❌ No
Update value	✔ Yes	✔ Yes	❌ No
Hoisted	Yes (weird)	Yes (safer)	Yes (safer)
When to use	Avoid	Value changes	Value doesn't change

How do Interfaces connect with OOP and SOLID?

Khafido Ilzam — Wed, 12 Nov 2025 08:42:30 +0000

First, what’s an Interface again?

An interface defines a contract — a list of methods or properties that a class must implement.
It tells you what should exist, but not how it works.

Now, let’s see how interfaces relate to the 4 pillars of OOP.

Abstraction

Interfaces are a tool to achieve abstraction.

Abstraction means showing only what’s necessary and hiding the details.
An interface only describes behavior (what methods exist) — not how they’re done. So, interface = pure abstraction layer.

Encapsulation

Encapsulation is about hiding internal data and logic, while interfaces define public behavior.

The interface tells others what’s accessible publicly (the methods).
The actual implementation inside the class (private variables, logic) remains encapsulated. The interface exposes what can be done, not how it’s done. Encapsulation keeps the hidden details safe inside.

Inheritance

While inheritance lets a class inherit code and behavior,
Interfaces let a class promise to follow a certain shape or behavior.
You can also extend interfaces — similar to class inheritance.

This allows structured hierarchies without code duplication — similar to inheritance but purely behavioral.

Polymorphism

Interfaces are the foundation of polymorphism.

Polymorphism allows you to treat different objects in the same way if they share a common interface.

Interfaces are the backbone of Abstraction and Polymorphism,
while also supporting Encapsulation and flexible Inheritance.

They define how objects should look — not how they work.

Interfaces are at the core of two SOLID principles (ISP & DSP):

I — Interface Segregation

Clients should not be forced to depend on interfaces they do not use.
In simple terms, don’t make a big “God interface” that includes methods unrelated to certain classes.
Instead, split it into smaller, more specific interfaces.

OOP Connection: Interfaces define abstraction.
ISP ensures that abstraction stays clean and specific.
Each interface represents a single responsibility for behavior.

D - Dependency Inversion Principle (DIP)

High-level modules should not depend on low-level modules. Both should depend on abstractions (interfaces).

Don’t make your main logic depend on specific classes — depend on interfaces instead.

This allows you to swap implementations easily (for example, switching from MySQL to MongoDB) without breaking your main business logic.

OOP Connection: Interface provides abstraction between classes.
DIP enforces that both high-level and low-level modules depend on that abstraction, not on each other directly.
Promotes loose coupling, flexibility, and testability.

What is an Interface?

Khafido Ilzam — Wed, 12 Nov 2025 07:57:32 +0000

In simple terms, an interface is like a contract or blueprint that says,

“If you want to be part of this system, you must have these methods.”

It doesn’t contain any actual code, only the rules — the names of functions or properties that a class must have.

An interface is a contract that defines what methods or properties a class must have,
but leaves the implementation details to the class itself.

Example (TypeScript or Java-style syntax):

interface PaymentProcessor {
  processPayment(amount: number): void;
}

Now, any class that implements this interface must define that method:

class CreditCardPayment implements PaymentProcessor {
  processPayment(amount: number) {
    console.log(`Processing $${amount} via credit card`);
  }
}

class PayPalPayment implements PaymentProcessor {
  processPayment(amount: number) {
    console.log(`Processing $${amount} via PayPal`);
  }
}

SOLID and its relationship with OOP

Khafido Ilzam — Wed, 12 Nov 2025 07:38:25 +0000

SOLID is like the “5 rules” to write good OOP code. Not just working code, but clean and maintainable code.

S — Single Responsibility Principle (SRP)

A class should have only one reason to change. Each class, module, or function should handle only one responsibility. When a class has multiple reasons to change, it becomes fragile and tightly coupled.

O — Open/Closed Principle (OCP)

Software entities should be open for extension, but closed for modification. You should be able to add new functionality without changing existing tested code.

L — Liskov Substitution Principle (LSP)

Objects of a subclass should be replaceable with objects of the superclass without altering the correctness of the program. A child class should fully replace its parent without breaking anything.

I — Interface Segregation Principle (ISP)

Don’t force classes to depend on things they don’t use. It’s better to have many small, specific interfaces than one large, general one.

D — Dependency Inversion Principle (DIP)

High-level modules (business logic) should not depend on low-level modules (e.g., database drivers).
Both should depend on abstractions (interfaces or abstract classes).

SOLID Principle	What it Means	Relation to OOP
S — Single Responsibility	One class = one job only.	Keeps objects focused and simple (Encapsulation).
O — Open/Closed	Open for extension, closed for modification.	Add new features without changing old code (Inheritance & Polymorphism).
L — Liskov Substitution	A child class should fully replace its parent without breaking anything.	Keeps Inheritance safe and logical.
I — Interface Segregation	Specific interfaces rather than one large, general one.	Encourages cleaner Abstraction.
D — Dependency Inversion	Depend on abstractions, not concrete implementations.	Promotes flexible and testable design (Abstraction & Encapsulation).

SOLID is how you design those objects so the system stays clean, scalable, and easy to change.

SRP keeps classes focused and easy to reason about. OCP lets your system grow without breaking what works. LSP ensures inheritance is trustworthy and substitutable. ISP keeps interfaces lean so implementors aren't burdened. DIP decouples layers so you can swap implementations freely — making your code testable, flexible, and future-proof.

OOP (Object-Oriented Programming)

Khafido Ilzam — Wed, 12 Nov 2025 07:04:35 +0000

What is OOP?

Think of OOP like organizing things in your life. OOP is how you organize your code (using objects).

An object is a self-contained unit with:

State — data it holds (properties/fields)
Behavior — things it can do (methods)
Identity — it's a distinct instance, separate from other objects

Example:

A Car object

Has: color, brand, speed

Can do: start(), stop(), accelerate()

And a Vehicle Ownership Document as car identity

So, instead of having a messy program with all logic mixed, OOP groups related data and behavior inside objects — making it organized, reusable, and easy to understand.

Classes & Objects — The Foundation

Before diving into the pillars, you need to understand classes and objects deeply.
A class is a blueprint. An object is a live instance created from that blueprint.

class Car {
  // Properties (state)
  make: string;
  model: string;
  year: number;
  private mileage: number = 0;

  // Constructor — called when creating an instance
  constructor(make: string, model: string, year: number) {
    this.make = make;
    this.model = model;
    this.year = year;
  }

  // Methods (behavior)
  drive(miles: number): void {
    if (miles > 0) this.mileage += miles;
    console.log(`Drove ${miles} miles in the ${this.make} ${this.model}.`);
  }
}

// Creating instances (objects) from the class
const car1 = new Car("Toyota", "Camry", 2022);
const car2 = new Car("Honda", "Civic", 2023);

car1 and car2 are completely independent objects — each has its own state.

4 Pillars of OOP (the mindset behind it)

Encapsulation
Encapsulation is the process of bundling data (properties) and methods (functions) that operate on that data into a single unit of access (a class). Protect internal data and ensure that objects control how their own data is modified.
- Example: When you drive a car, you don’t need to know how the engine works — just press start.
Abstraction
Abstraction means showing only relevant details of an object while hiding its internal implementation. Focus on what an object does, not how it does it. interface and abstract are tools to achieve abstraction.
- Example: Your car’s “transmission” hides all the complicated process engine.
Inheritance
Inheritance allows one class (child/subclass) to inherit properties and methods from another class (parent/superclass), enabling the child class to reuse the code. Use it for genuine "is-a" relationships.
- Example: “SportsCar” can inherit from “Car” but adds more speed.
Polymorphism
Polymorphism (“many forms”) allows different classes to respond to the same method name in their own unique way. You can call the same method name, but each object does it differently.
- Example: playSound() could mean barking for a Dog, or meowing for a Cat.

REST vs RESTful API

Khafido Ilzam — Wed, 05 Nov 2025 08:25:46 +0000

A REST API is an architectural style for an application programming interface that uses Hypertext Transfer Protocol (HTTP) requests to access and use data. That data can be used to GET, PUT, POST and DELETE data types, which refers to reading, updating, creating and deleting operations related to resources.

An API is code that enables two software programs to communicate with one another. The API's design spells out the proper way for a developer to write a program, or client, that uses the API to request services from another application, or the server.

Principles of the REST API. What makes a service RESTful?

The interface must be uniform. This is the most important. All REST APIs must be consistent, providing resource identification in their URIs. They must use standard HTTP methods -- the CRUD operations (GET/POST/PUT, PATCH/DELETE) -- and represent resources in multiple formats, such as XML and JSON.
Client-server separation. The front end of communication -- the client -- and the back end -- the server -- must be independent of one another; the server must provide the resources, while the client hosts the UI.
Multiple layers. Though not required, the architecture allows for multiple layers, including proxies, load balancers and authentication; the client doesn't care if it's actually communicating with the web server.
It must be stateless. Each API call is independent, meaning the server does not track the client's state between requests.
Caching. Responses use HTTP headers to determine whether they are cacheable; this reduces latency and improves performance.
Code return. Though not required, the architecture enables the server to return executable code to the client, such as JavaScript, if it is useful.

For a service to be considered a true RESTful web API, it must be designed and implemented all the principles.

Credit: https://www.techtarget.com/searchapparchitecture/definition/RESTful-API

Forem: Khafido Ilzam

Execution Context in JavaScript

What Is an Execution Context?

The Call Stack

Implement OOP using TypeScript

Class and Object

Encapsulation

Abstraction

Inheritance

Polymorphism

REST vs RESTful API

Key principles of REST:

JavaScript Memory Behavior

What is the Stack?

What is the Heap?

Mutability

Immutability

How to Clone Object Properly?

How the Object.assign() method Works

How the Spread Operator Works

JavaScript Data Types

Primitive

1. Number

2. String

3. Boolean

4. Null

5. Undefined

6. Symbol

7. BigInt

Non-Primitive (Reference)

JavaScript Declaration Variable

1. var – the old way (avoid using it)

2. let – recommended for variables that change

3. const – recommended default

Summary

How do Interfaces connect with OOP and SOLID?

First, what’s an Interface again?

Abstraction

Encapsulation

Inheritance

Polymorphism

Interfaces are at the core of two SOLID principles (ISP & DSP):

I — Interface Segregation

D - Dependency Inversion Principle (DIP)

What is an Interface?

SOLID and its relationship with OOP

S — Single Responsibility Principle (SRP)

O — Open/Closed Principle (OCP)

L — Liskov Substitution Principle (LSP)

I — Interface Segregation Principle (ISP)

D — Dependency Inversion Principle (DIP)

OOP (Object-Oriented Programming)

What is OOP?

Classes & Objects — The Foundation

4 Pillars of OOP (the mindset behind it)

REST vs RESTful API

Principles of the REST API. What makes a service RESTful?

How the `Object.assign()` method Works

1. `var` – the old way (avoid using it)

2. `let` – recommended for variables that change

3. `const` – recommended default