<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Khafido Ilzam</title>
    <description>The latest articles on DEV Community by Khafido Ilzam (@khafido).</description>
    <link>https://dev.to/khafido</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1234658%2F8fc542c7-cdda-44ad-a8e6-0638a65595cd.png</url>
      <title>DEV Community: Khafido Ilzam</title>
      <link>https://dev.to/khafido</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/khafido"/>
    <language>en</language>
    <item>
      <title>Singleton Pattern</title>
      <dc:creator>Khafido Ilzam</dc:creator>
      <pubDate>Mon, 11 May 2026 07:38:49 +0000</pubDate>
      <link>https://dev.to/khafido/singleton-pattern-21f8</link>
      <guid>https://dev.to/khafido/singleton-pattern-21f8</guid>
      <description>&lt;p&gt;In the world of software architecture, we often encounter objects that should only exist once. Whether it’s a configuration manager, a print spooler, or a database connection pool, having multiple instances floating around can lead to unpredictable behavior, resource exhaustion, or data inconsistency.&lt;/p&gt;

&lt;p&gt;This is where the &lt;strong&gt;Singleton Pattern&lt;/strong&gt; comes in. As a senior developer, I view the Singleton as a "utility" pattern—it’s incredibly powerful when used correctly, but it can be a double-edged sword if misapplied.&lt;/p&gt;




&lt;h3&gt;
  
  
  What is a Singleton?
&lt;/h3&gt;

&lt;p&gt;At its core, the Singleton is a creational design pattern that ensures a class has &lt;strong&gt;only one instance&lt;/strong&gt; while providing a &lt;strong&gt;global point of access&lt;/strong&gt; to that instance.&lt;/p&gt;

&lt;p&gt;Think of it like the pilot of a commercial airplane. There might be hundreds of passengers and several flight attendants, but there is only one person (or one specific role) in charge of the flight deck at any given time. You wouldn’t want two different pilots trying to steer the plane in two different directions!&lt;/p&gt;




&lt;h3&gt;
  
  
  Anatomy of a Singleton
&lt;/h3&gt;

&lt;p&gt;To create a Singleton, a class must follow three strict rules:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Private Constructor:&lt;/strong&gt; This prevents other classes from using the &lt;code&gt;new&lt;/code&gt; keyword to create instances.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Static Field:&lt;/strong&gt; A private variable within the class to hold the single instance.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Static Method:&lt;/strong&gt; A public method (usually called &lt;code&gt;getInstance()&lt;/code&gt;) that returns the instance, creating it first if it doesn't already exist.&lt;/li&gt;
&lt;/ol&gt;




&lt;h3&gt;
  
  
  Real-World Example: The Global Logger
&lt;/h3&gt;

&lt;p&gt;Logging is the quintessential use case for a Singleton. You want every part of your application—from the login logic to the payment processing—to send messages to the same log file or console.&lt;/p&gt;

&lt;p&gt;Here is how we implement a robust, thread-safe (in concept) Logger in &lt;strong&gt;TypeScript&lt;/strong&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Logger&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="k"&gt;static&lt;/span&gt; &lt;span class="nx"&gt;instance&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Logger&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;logs&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;

    &lt;span class="c1"&gt;// 1. Private constructor prevents 'new Logger()'&lt;/span&gt;
    &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Logger Initialized.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="c1"&gt;// 2. The static method that controls access&lt;/span&gt;
    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="k"&gt;static&lt;/span&gt; &lt;span class="nf"&gt;getInstance&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="nx"&gt;Logger&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;Logger&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;instance&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;Logger&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;instance&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Logger&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;Logger&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;instance&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="c1"&gt;// A simple business method&lt;/span&gt;
    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;timestamp&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nf"&gt;toISOString&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fullMessage&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`[&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;timestamp&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;] &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;message&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;logs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;fullMessage&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;fullMessage&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="nf"&gt;getLogCount&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;logs&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// --- Usage ---&lt;/span&gt;

&lt;span class="c1"&gt;// const logger = new Logger(); // Error: Constructor of class 'Logger' is private.&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;loggerA&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Logger&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getInstance&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;loggerB&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Logger&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getInstance&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nx"&gt;loggerA&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;User logged in.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;loggerB&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Order processed.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;loggerA&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;loggerB&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// true - both variables point to the exact same memory&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  The Pros: Why We Use It
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Controlled Access:&lt;/strong&gt; You have total control over how and when the instance is accessed.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Reduced Memory Footprint:&lt;/strong&gt; Instead of creating 100 objects for 100 different modules, you keep just one in memory.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lazy Initialization:&lt;/strong&gt; The instance is only created when it’s actually needed. If your app never calls &lt;code&gt;getInstance()&lt;/code&gt;, the object is never born.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Global State Management:&lt;/strong&gt; It provides a synchronized place to store data that needs to be shared across the entire system.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  The Trade-offs: The "Hidden" Costs
&lt;/h3&gt;

&lt;p&gt;Every senior dev will tell you: &lt;strong&gt;Singletons are controversial.&lt;/strong&gt; Here’s why:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;The "Global Variable" Problem:&lt;/strong&gt; Singletons are essentially glorified global variables. They can make code harder to debug because any part of the app can change the state of the Singleton at any time.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Testing Hurdles:&lt;/strong&gt; Since Singletons persist state between tests, they can cause "leaky" tests. If Test A changes the Logger's state, Test B might fail unexpectedly because it’s still using that same modified instance.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Violation of Single Responsibility:&lt;/strong&gt; The class is responsible for two things: its actual job (e.g., logging) and managing its own lifecycle/uniqueness.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Tight Coupling:&lt;/strong&gt; Classes that use the Singleton become tightly coupled to that specific implementation, making it harder to swap out for a different version later.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Final Verdict
&lt;/h3&gt;

&lt;p&gt;The Singleton Pattern is a tool, not a rule.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Use it when&lt;/strong&gt; you have a shared resource that absolutely must be unique to maintain consistency (like a file system driver or a central state store).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Avoid it if&lt;/strong&gt; you’re just using it as a convenient way to access variables from anywhere. In modern development, we often prefer &lt;strong&gt;Dependency Injection&lt;/strong&gt; to pass instances around, which gives us the "one instance" benefit without the testing headaches of a hard-coded Singleton.&lt;/p&gt;

</description>
      <category>designpatterns</category>
      <category>typescript</category>
    </item>
    <item>
      <title>Result Pattern</title>
      <dc:creator>Khafido Ilzam</dc:creator>
      <pubDate>Mon, 11 May 2026 06:54:46 +0000</pubDate>
      <link>https://dev.to/khafido/result-pattern-3de1</link>
      <guid>https://dev.to/khafido/result-pattern-3de1</guid>
      <description>&lt;p&gt;In modern software engineering, how we handle "failure" defines the resilience and readability of our systems. For years, the default mechanism has been &lt;strong&gt;Exceptions&lt;/strong&gt;. However, as systems grow in complexity, many senior architects are shifting toward the &lt;strong&gt;Result Pattern&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The Result Pattern treats errors not as "exceptional" interruptions to the program flow, but as &lt;strong&gt;first-class data&lt;/strong&gt;. It forces the developer to acknowledge the possibility of failure at compile-time, leading to safer, more predictable codebases.&lt;/p&gt;




&lt;h3&gt;
  
  
  What is the Result Pattern?
&lt;/h3&gt;

&lt;p&gt;At its core, the Result Pattern is a design pattern that wraps the output of a function in a container. This container represents one of two states:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Success:&lt;/strong&gt; Contains the expected data.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Failure:&lt;/strong&gt; Contains an error object or message explaining what went wrong.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Instead of a function potentially "exploding" with a thrown exception, it returns a value that says, "I might have worked, or I might have failed—here is the result for you to inspect."&lt;/p&gt;




&lt;h3&gt;
  
  
  The Core Advantages
&lt;/h3&gt;

&lt;h4&gt;
  
  
  1. Explicit Intent
&lt;/h4&gt;

&lt;p&gt;With standard exceptions, a function signature like &lt;code&gt;getUser(id: string): User&lt;/code&gt; is a lie. It doesn't always return a &lt;code&gt;User&lt;/code&gt;; it might throw a &lt;code&gt;404&lt;/code&gt; or a &lt;code&gt;DatabaseError&lt;/code&gt;. The Result Pattern makes this honest: &lt;code&gt;getUser(id: string): Result&amp;lt;User, Error&amp;gt;&lt;/code&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  2. Type Safety &amp;amp; Exhaustive Checking
&lt;/h4&gt;

&lt;p&gt;In languages like TypeScript, the compiler can force you to check if the result is a success before accessing the data. This eliminates the "forgot to catch" bugs that haunt production logs.&lt;/p&gt;

&lt;h4&gt;
  
  
  3. Better Control Flow
&lt;/h4&gt;

&lt;p&gt;Exceptions are essentially &lt;code&gt;goto&lt;/code&gt; statements in disguise—they jump across the call stack, making logic hard to follow. Results keep the execution local and linear.&lt;/p&gt;




&lt;h3&gt;
  
  
  Trade-offs and Considerations
&lt;/h3&gt;

&lt;p&gt;No pattern is a silver bullet. Here is the "senior" perspective on the downsides:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Boilerplate:&lt;/strong&gt; You will find yourself writing more &lt;code&gt;if (result.isFailure)&lt;/code&gt; checks. While this is safer, it can feel verbose compared to a single &lt;code&gt;try-catch&lt;/code&gt; block wrapping ten lines of code.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Learning Curve:&lt;/strong&gt; Team members used to traditional OOP might find the functional nature of Result objects (and the lack of "bubbling" errors) counterintuitive at first.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Performance:&lt;/strong&gt; In highly high-frequency loops, creating a new object for every single operation (even successful ones) can add a negligible but measurable overhead compared to raw values.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Implementation in TypeScript
&lt;/h3&gt;

&lt;p&gt;Here is a robust, production-ready implementation of the Result Pattern.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;Success&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;readonly&lt;/span&gt; &lt;span class="na"&gt;isSuccess&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;readonly&lt;/span&gt; &lt;span class="na"&gt;isFailure&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;readonly&lt;/span&gt; &lt;span class="na"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;Failure&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;E&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;readonly&lt;/span&gt; &lt;span class="na"&gt;isSuccess&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;readonly&lt;/span&gt; &lt;span class="na"&gt;isFailure&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="k"&gt;readonly&lt;/span&gt; &lt;span class="na"&gt;error&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;E&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;type&lt;/span&gt; &lt;span class="nx"&gt;Result&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;E&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Error&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;Success&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="nx"&gt;Failure&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;E&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="cm"&gt;/**
 * Functional helpers to create Result instances
 */&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;ok&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;Success&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;T&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;isSuccess&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;isFailure&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fail&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;E&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;E&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nx"&gt;Failure&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;E&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;isSuccess&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;isFailure&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Real-World Usage Example
&lt;/h4&gt;

&lt;p&gt;Let’s look at a service that fetches a user. Notice how the type system protects us from accessing &lt;code&gt;result.value&lt;/code&gt; until we verify success.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;username&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;findUser&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt; &lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Result&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;users&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;findOne&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;fail&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;User not found in database.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;ok&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// Consuming the Result&lt;/span&gt;
&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;userController&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;findUser&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;userId&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;isFailure&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// TypeScript knows 'error' exists here, but 'value' does not&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Error: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="c1"&gt;// TypeScript now safely allows access to 'value'&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;`Hello, &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;username&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  When to use it?
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Use the Result Pattern when...&lt;/th&gt;
&lt;th&gt;Use Exceptions when...&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;The error is &lt;strong&gt;expected&lt;/strong&gt; (e.g., validation, user not found).&lt;/td&gt;
&lt;td&gt;The error is &lt;strong&gt;catastrophic&lt;/strong&gt; (e.g., out of memory, lost DB connection).&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;You are writing &lt;strong&gt;Domain Logic&lt;/strong&gt;.&lt;/td&gt;
&lt;td&gt;You are in the &lt;strong&gt;Infrastructure&lt;/strong&gt; layer.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;You want to ensure the caller &lt;strong&gt;handles the error&lt;/strong&gt;.&lt;/td&gt;
&lt;td&gt;You want the error to &lt;strong&gt;bubble up&lt;/strong&gt; to a global handler.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h3&gt;
  
  
  Final Verdict
&lt;/h3&gt;

&lt;p&gt;The Result Pattern is about moving from &lt;strong&gt;defensive programming&lt;/strong&gt; (hoping nothing breaks) to &lt;strong&gt;offensive programming&lt;/strong&gt; (designing for failure). By making errors a part of your type system, you create a codebase that is self-documenting and significantly more robust. For any serious TypeScript project, it is a pattern worth adopting.&lt;/p&gt;

</description>
      <category>designpatterns</category>
      <category>typescript</category>
    </item>
    <item>
      <title>Execution Context in JavaScript</title>
      <dc:creator>Khafido Ilzam</dc:creator>
      <pubDate>Thu, 05 Mar 2026 03:47:24 +0000</pubDate>
      <link>https://dev.to/khafido/execution-context-in-javascript-3hop</link>
      <guid>https://dev.to/khafido/execution-context-in-javascript-3hop</guid>
      <description>&lt;p&gt;Execution context is one of the most fundamental concepts in JavaScript — it's the environment in which JavaScript code is evaluated and executed.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Is an Execution Context?
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

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

&lt;p&gt;Every execution context goes through two distinct phases:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Phase 1: Creation Phase (Memory / Hoisting Phase)&lt;/strong&gt;&lt;br&gt;
Before any code runs, the JavaScript engine scans the code and:&lt;/p&gt;

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

&lt;p&gt;This is why hoisting happens — variables and functions are placed into memory before code executes line by line.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Phase 2: Execution Phase&lt;/strong&gt;&lt;br&gt;
The engine runs the code line by line, assigns values, calls functions (which create new FECs), and so on.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Call Stack
&lt;/h2&gt;

&lt;p&gt;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'.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>computerscience</category>
      <category>javascript</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Implement OOP using TypeScript</title>
      <dc:creator>Khafido Ilzam</dc:creator>
      <pubDate>Mon, 08 Dec 2025 09:02:34 +0000</pubDate>
      <link>https://dev.to/khafido/implement-oop-using-typescript-2okm</link>
      <guid>https://dev.to/khafido/implement-oop-using-typescript-2okm</guid>
      <description>&lt;p&gt;Let’s learn how to implement all OOP principles in TypeScript.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Classes &amp;amp; Objects&lt;/li&gt;
&lt;li&gt;Encapsulation&lt;/li&gt;
&lt;li&gt;Abstraction &amp;amp; Interface&lt;/li&gt;
&lt;li&gt;Inheritance&lt;/li&gt;
&lt;li&gt;Polymorphism&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Class and Object
&lt;/h3&gt;

&lt;p&gt;A class is a blueprint, and objects are instances of the class.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuj7qj0w0eph506hf6vxu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuj7qj0w0eph506hf6vxu.png" alt="Class and Object" width="800" height="496"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyakn8nw3emds8goe02zk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyakn8nw3emds8goe02zk.png" alt="Object instance" width="800" height="123"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Encapsulation
&lt;/h3&gt;

&lt;p&gt;Encapsulation = hide internal data, expose only what is needed.&lt;br&gt;
Use &lt;code&gt;private&lt;/code&gt;, &lt;code&gt;protected&lt;/code&gt;, and &lt;code&gt;public&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbzrmjxl1afbwsr00uv3b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbzrmjxl1afbwsr00uv3b.png" alt=" " width="800" height="398"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Abstraction
&lt;/h3&gt;

&lt;p&gt;Abstraction = hide complexity and expose only what the user needs.&lt;br&gt;
Use abstract classes or interfaces. Interfaces define shape, and classes can implement them.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;A class can implement &lt;strong&gt;multiple&lt;/strong&gt; interfaces. But a class can extend &lt;strong&gt;only one&lt;/strong&gt; class&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Interfaces do &lt;strong&gt;NOT&lt;/strong&gt; contain implementation. Classes &lt;strong&gt;must&lt;/strong&gt; provide the implementation&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F630g4785l2a88lx0e5a8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F630g4785l2a88lx0e5a8.png" alt=" " width="800" height="476"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Inheritance
&lt;/h3&gt;

&lt;p&gt;A class can inherit methods or data from another class. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyu6fkq67bo0gx36cyd0k.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyu6fkq67bo0gx36cyd0k.png" alt=" " width="800" height="182"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5erh2ww4g3fc9oyj8w83.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5erh2ww4g3fc9oyj8w83.png" alt=" " width="800" height="123"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Polymorphism
&lt;/h3&gt;

&lt;p&gt;Polymorphism = same method name, different behavior.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqdqbqyhu5yv0twokm82p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqdqbqyhu5yv0twokm82p.png" alt=" " width="800" height="555"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Full Example Code:&lt;br&gt;
 &lt;a href="https://snipsave.com/view-snippet?user=khafidoilzam&amp;amp;snippet_id=Fp13KgLloQpTnToegf" rel="noopener noreferrer"&gt;https://snipsave.com/view-snippet?user=khafidoilzam&amp;amp;snippet_id=Fp13KgLloQpTnToegf&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>beginners</category>
      <category>tutorial</category>
      <category>programming</category>
      <category>typescript</category>
    </item>
    <item>
      <title>REST vs RESTful API</title>
      <dc:creator>Khafido Ilzam</dc:creator>
      <pubDate>Tue, 18 Nov 2025 03:48:57 +0000</pubDate>
      <link>https://dev.to/khafido/rest-vs-restful-api-gm0</link>
      <guid>https://dev.to/khafido/rest-vs-restful-api-gm0</guid>
      <description>&lt;p&gt;The distinction between &lt;strong&gt;"REST API"&lt;/strong&gt; and &lt;strong&gt;"RESTful API"&lt;/strong&gt; lies in their adherence to the principles of &lt;code&gt;Representational State Transfer&lt;/code&gt; (REST) architectural style.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;REST API:&lt;/strong&gt; 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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;RESTful API:&lt;/strong&gt; This term specifically denotes an API that fully conforms to all the constraints and principles of the REST architectural style.&lt;/p&gt;

&lt;h4&gt;
  
  
  Key principles of REST:
&lt;/h4&gt;

&lt;p&gt;&lt;strong&gt;Client-Server:&lt;/strong&gt; Separation of concerns between the client and server.&lt;br&gt;
&lt;strong&gt;Stateless:&lt;/strong&gt; 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.&lt;br&gt;
&lt;strong&gt;Cacheable:&lt;/strong&gt; Responses must explicitly or implicitly indicate whether they are cacheable or non-cacheable to prevent clients from reusing stale or inappropriate data.&lt;br&gt;
&lt;strong&gt;Uniform Interface:&lt;/strong&gt; A standardized way for clients to interact with resources, including resource identification, resource manipulation through representations, self-descriptive messages, and &lt;code&gt;Hypermedia as the Engine of Application State&lt;/code&gt; (HATEOAS).&lt;br&gt;
&lt;strong&gt;Layered System:&lt;/strong&gt; An architecture composed of hierarchical layers, where each layer can communicate only with its immediate neighbors.&lt;br&gt;
&lt;strong&gt;Code on Demand (optional):&lt;/strong&gt; Servers can temporarily extend or customize client functionality by transferring executable code.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

</description>
      <category>api</category>
      <category>backend</category>
      <category>architecture</category>
      <category>webdev</category>
    </item>
    <item>
      <title>JavaScript Memory Behavior</title>
      <dc:creator>Khafido Ilzam</dc:creator>
      <pubDate>Mon, 17 Nov 2025 08:56:16 +0000</pubDate>
      <link>https://dev.to/khafido/javascript-memory-behavior-10n6</link>
      <guid>https://dev.to/khafido/javascript-memory-behavior-10n6</guid>
      <description>&lt;p&gt;JavaScript uses two main memory spaces to store variables:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Call Stack&lt;/strong&gt; → where execution happens, stores variable references (pointers)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Memory Heap&lt;/strong&gt; → where objects, arrays, and functions live&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  What is the Stack?
&lt;/h3&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h3&gt;
  
  
  What is the Heap?
&lt;/h3&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;But the real difference between &lt;code&gt;var&lt;/code&gt;, &lt;code&gt;let&lt;/code&gt;, and &lt;code&gt;const&lt;/code&gt; is how they are handled inside the Call Stack during creation and access, especially during hoisting.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;var&lt;/code&gt;, &lt;code&gt;let&lt;/code&gt;, and &lt;code&gt;const&lt;/code&gt; control whether you can reassign the variable. Mutability controls whether the value itself can be changed. These are two different things.&lt;/p&gt;

&lt;h3&gt;
  
  
  Mutability
&lt;/h3&gt;

&lt;p&gt;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.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;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
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Reference data does not copy values, but rather pointers. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnkmbi5m8przzjtjdc3rp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnkmbi5m8przzjtjdc3rp.png" alt="Mutable Data" width="800" height="405"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Changing the age of &lt;code&gt;staff2&lt;/code&gt; updates the age of the staff object. Now you know it is because both point to the same object.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/khafido/how-to-clone-object-properties-369o"&gt;How to Clone Object Properly?&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Immutability
&lt;/h3&gt;

&lt;p&gt;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.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let student1 = "Halina";
let student2 = student1;
student1 = "Brookes"

console.log(student1); // Brookes
console.log(student2); // Halina
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffhi7r26dx8v2wlpdkhnk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffhi7r26dx8v2wlpdkhnk.png" alt="Immutable Data" width="444" height="408"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Source: &lt;a href="https://www.freecodecamp.org/news/mutability-vs-immutability-in-javascript/" rel="noopener noreferrer"&gt;https://www.freecodecamp.org/news/mutability-vs-immutability-in-javascript/&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>How to Clone Object Properly?</title>
      <dc:creator>Khafido Ilzam</dc:creator>
      <pubDate>Mon, 17 Nov 2025 08:54:21 +0000</pubDate>
      <link>https://dev.to/khafido/how-to-clone-object-properties-369o</link>
      <guid>https://dev.to/khafido/how-to-clone-object-properties-369o</guid>
      <description>&lt;p&gt;You can clone the properties of an object using the &lt;code&gt;Object. assign()&lt;/code&gt; 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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs80p10c6k0qegn250c11.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs80p10c6k0qegn250c11.png" alt="Clone Object Properly" width="800" height="518"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  How the &lt;code&gt;Object.assign()&lt;/code&gt; method Works
&lt;/h3&gt;

&lt;p&gt;The &lt;code&gt;object.assign()&lt;/code&gt; method copies properties from an object (the source) into another object (the target) and returns the modified target object.&lt;/p&gt;

&lt;p&gt;Here's the syntax:&lt;br&gt;
&lt;code&gt;Object.assign(target, source)&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;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
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  How the Spread Operator Works
&lt;/h3&gt;

&lt;p&gt;Here's the syntax of the spread operator:&lt;br&gt;
&lt;code&gt;const newObj = {...obj}&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Using the spread operator is quite simple. You need to place three dots &lt;code&gt;...&lt;/code&gt; before the name of the object whose properties you intend to clone:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;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
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
    </item>
    <item>
      <title>JavaScript Data Types</title>
      <dc:creator>Khafido Ilzam</dc:creator>
      <pubDate>Mon, 17 Nov 2025 06:43:56 +0000</pubDate>
      <link>https://dev.to/khafido/javascript-data-types-46lk</link>
      <guid>https://dev.to/khafido/javascript-data-types-46lk</guid>
      <description>&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;Data types are categorized into &lt;code&gt;Primitive&lt;/code&gt; and &lt;code&gt;Non-Primitive (Reference)&lt;/code&gt; types in JavaScript. &lt;/p&gt;

&lt;h3&gt;
  
  
  Primitive
&lt;/h3&gt;

&lt;p&gt;When you assign a primitive value:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It is stored &lt;strong&gt;directly in memory&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Copying the value creates a &lt;strong&gt;new independent value&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;They are &lt;code&gt;immutable&lt;/code&gt;, meaning you cannot change the value itself—only replace it.&lt;/p&gt;

&lt;p&gt;JavaScript has 7 primitive types:&lt;/p&gt;

&lt;h4&gt;
  
  
  1. Number
&lt;/h4&gt;

&lt;p&gt;All numbers (integer or floating point).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let x = 10;
let y = 11.5;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  2. String
&lt;/h4&gt;

&lt;p&gt;Text data.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let name = "Hello World!";
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  3. Boolean
&lt;/h4&gt;

&lt;p&gt;&lt;code&gt;True&lt;/code&gt; or &lt;code&gt;False&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let isOnline = true;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  4. Null
&lt;/h4&gt;

&lt;p&gt;Intentional &lt;code&gt;empty&lt;/code&gt; value.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let data = null;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  5. Undefined
&lt;/h4&gt;

&lt;p&gt;A variable declared but not assigned a value.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let a; // undefined
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  6. Symbol
&lt;/h4&gt;

&lt;p&gt;Symbol data type is used to create objects that will always be unique. These objects can be created using &lt;code&gt;Symbol&lt;/code&gt; constructor.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let sym = Symbol("Hello")
console.log(typeof(sym)); // Symbol
console.log(sym); // Hello
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  7. BigInt
&lt;/h4&gt;

&lt;p&gt;For very large integers beyond Number’s limit.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let big = 12345678901234567890n;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  Non-Primitive (Reference)
&lt;/h3&gt;

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

&lt;p&gt;Non-primitive values are &lt;code&gt;stored by reference&lt;/code&gt;. When you assign an object to another variable, JavaScript &lt;code&gt;copies the reference, not the value&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;These are objects—more complex data structures. The main non-primitive types:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Object&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Array&lt;/strong&gt; (actually a special type of object)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Function&lt;/strong&gt; (also an object)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Date&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Map, Set, etc.&lt;/strong&gt; (still objects)
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let obj1 = { age: 27 };
let obj2 = obj1;

obj2.age = 30;

console.log(obj1.age); // 30 (obj1 also changed)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Why? Because both variables point to the same memory address.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>JavaScript Declaration Variable</title>
      <dc:creator>Khafido Ilzam</dc:creator>
      <pubDate>Mon, 17 Nov 2025 05:35:02 +0000</pubDate>
      <link>https://dev.to/khafido/javascript-declaration-variable-3c8b</link>
      <guid>https://dev.to/khafido/javascript-declaration-variable-3c8b</guid>
      <description>&lt;p&gt;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.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. &lt;code&gt;var&lt;/code&gt; – the old way (avoid using it)
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Function-scoped&lt;/strong&gt; → only respects function boundaries.&lt;/li&gt;
&lt;li&gt;Can be &lt;strong&gt;re-declared&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Can be &lt;strong&gt;updated&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Hoisted&lt;/strong&gt; → moved to the top of the scope, but initialized as undefined.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It can cause weird bugs because it ignores block scope.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;var x = 1;
if (true) {
  var x = 2;  // same variable!
}
console.log(x); // 2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  2. &lt;code&gt;let&lt;/code&gt; – recommended for variables that change
&lt;/h3&gt;

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

&lt;p&gt;Use let when the value needs to change.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let count = 1;
count = 2; // OK
// let count = 3; // ❌ Error (same scope)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3. &lt;code&gt;const&lt;/code&gt; – recommended default
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Block-scoped&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cannot&lt;/strong&gt; be updated or re-declared&lt;/li&gt;
&lt;li&gt;Best for values that should not change&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Objects and arrays can still be modified, but the variable reference cannot change.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const PI = 3.14;
// PI = 4; // ❌ Error

const user = { name: "Khaf" };
user.name = "Fido"; // ✔ OK
// user = {} // ❌ Not allowed
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  Summary
&lt;/h3&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Feature&lt;/th&gt;
&lt;th&gt;var&lt;/th&gt;
&lt;th&gt;let&lt;/th&gt;
&lt;th&gt;const&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Scope&lt;/td&gt;
&lt;td&gt;Function&lt;/td&gt;
&lt;td&gt;Block&lt;/td&gt;
&lt;td&gt;Block&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Re-declare&lt;/td&gt;
&lt;td&gt;✔ Yes&lt;/td&gt;
&lt;td&gt;❌ No&lt;/td&gt;
&lt;td&gt;❌ No&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Update value&lt;/td&gt;
&lt;td&gt;✔ Yes&lt;/td&gt;
&lt;td&gt;✔ Yes&lt;/td&gt;
&lt;td&gt;❌ No&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Hoisted&lt;/td&gt;
&lt;td&gt;Yes (weird)&lt;/td&gt;
&lt;td&gt;Yes (safer)&lt;/td&gt;
&lt;td&gt;Yes (safer)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;When to use&lt;/td&gt;
&lt;td&gt;Avoid&lt;/td&gt;
&lt;td&gt;Value changes&lt;/td&gt;
&lt;td&gt;Value doesn't change&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

</description>
    </item>
    <item>
      <title>How do Interfaces connect with OOP and SOLID?</title>
      <dc:creator>Khafido Ilzam</dc:creator>
      <pubDate>Wed, 12 Nov 2025 08:42:30 +0000</pubDate>
      <link>https://dev.to/khafido/how-do-interfaces-connect-with-oop-and-solid-2b3a</link>
      <guid>https://dev.to/khafido/how-do-interfaces-connect-with-oop-and-solid-2b3a</guid>
      <description>&lt;h4&gt;
  
  
  First, what’s an Interface again?
&lt;/h4&gt;

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

&lt;p&gt;Now, let’s see how interfaces relate to the 4 pillars of OOP.&lt;/p&gt;

&lt;h3&gt;
  
  
  Abstraction
&lt;/h3&gt;

&lt;p&gt;Interfaces are a tool to achieve abstraction.&lt;/p&gt;

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

&lt;h3&gt;
  
  
  Encapsulation
&lt;/h3&gt;

&lt;p&gt;Encapsulation is about hiding internal data and logic, while interfaces define public behavior.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The interface tells others what’s accessible publicly (the methods).&lt;/li&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Inheritance
&lt;/h3&gt;

&lt;p&gt;While inheritance lets a class inherit code and behavior,&lt;br&gt;
Interfaces let a class promise to follow a certain shape or behavior.&lt;br&gt;
You can also extend interfaces — similar to class inheritance.&lt;/p&gt;

&lt;p&gt;This allows structured hierarchies without code duplication — similar to inheritance but purely behavioral.&lt;/p&gt;

&lt;h3&gt;
  
  
  Polymorphism
&lt;/h3&gt;

&lt;p&gt;Interfaces are the foundation of polymorphism.&lt;/p&gt;

&lt;p&gt;Polymorphism allows you to treat different objects in the same way if they share a common interface.&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;Interfaces are the backbone of Abstraction and Polymorphism,&lt;br&gt;
while also supporting Encapsulation and flexible Inheritance.&lt;/p&gt;

&lt;p&gt;They define how objects should look — not how they work.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Interfaces are at the core of two SOLID principles (ISP &amp;amp; DSP):
&lt;/h3&gt;

&lt;h4&gt;
  
  
  I — Interface Segregation
&lt;/h4&gt;

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

&lt;ul&gt;
&lt;li&gt;OOP Connection: Interfaces define abstraction.&lt;/li&gt;
&lt;li&gt;ISP ensures that abstraction stays clean and specific.&lt;/li&gt;
&lt;li&gt;Each interface represents a single responsibility for behavior.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  D - Dependency Inversion Principle (DIP)
&lt;/h3&gt;

&lt;p&gt;High-level modules should not depend on low-level modules. Both should depend on abstractions (interfaces).&lt;/p&gt;

&lt;p&gt;Don’t make your main logic depend on specific classes — depend on interfaces instead.&lt;/p&gt;

&lt;p&gt;This allows you to swap implementations easily (for example, switching from MySQL to MongoDB) without breaking your main business logic.&lt;/p&gt;

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

</description>
      <category>architecture</category>
      <category>beginners</category>
      <category>softwareengineering</category>
    </item>
    <item>
      <title>What is an Interface?</title>
      <dc:creator>Khafido Ilzam</dc:creator>
      <pubDate>Wed, 12 Nov 2025 07:57:32 +0000</pubDate>
      <link>https://dev.to/khafido/what-is-an-interface-18m1</link>
      <guid>https://dev.to/khafido/what-is-an-interface-18m1</guid>
      <description>&lt;p&gt;In simple terms, an interface is like a contract or blueprint that says,&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“If you want to be part of this system, you must have these methods.”&lt;/p&gt;
&lt;/blockquote&gt;

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

&lt;p&gt;An interface is a contract that defines what methods or properties a class must have,&lt;br&gt;
but leaves the implementation details to the class itself.&lt;/p&gt;

&lt;p&gt;Example (TypeScript or Java-style syntax):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;interface PaymentProcessor {
  processPayment(amount: number): void;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, any class that implements this interface must define that method:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;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`);
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
    </item>
    <item>
      <title>SOLID and its relationship with OOP</title>
      <dc:creator>Khafido Ilzam</dc:creator>
      <pubDate>Wed, 12 Nov 2025 07:38:25 +0000</pubDate>
      <link>https://dev.to/khafido/solid-and-its-relationship-with-oop-jmm</link>
      <guid>https://dev.to/khafido/solid-and-its-relationship-with-oop-jmm</guid>
      <description>&lt;p&gt;&lt;strong&gt;SOLID&lt;/strong&gt; is like the “5 rules” to write good OOP code. Not just working code, but clean and maintainable code.&lt;/p&gt;

&lt;h4&gt;
  
  
  S — Single Responsibility Principle (SRP)
&lt;/h4&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h4&gt;
  
  
  O — Open/Closed Principle (OCP)
&lt;/h4&gt;

&lt;p&gt;Software entities should be open for extension, but closed for modification. You should be able to add new functionality without changing existing tested code.&lt;/p&gt;

&lt;h4&gt;
  
  
  L — Liskov Substitution Principle (LSP)
&lt;/h4&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h4&gt;
  
  
  I — Interface Segregation Principle (ISP)
&lt;/h4&gt;

&lt;p&gt;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.  &lt;/p&gt;

&lt;h4&gt;
  
  
  D — Dependency Inversion Principle (DIP)
&lt;/h4&gt;

&lt;p&gt;High-level modules (business logic) should not depend on low-level modules (e.g., database drivers).&lt;br&gt;
Both should depend on abstractions (interfaces or abstract classes).&lt;/p&gt;

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

&lt;p&gt;&lt;strong&gt;SOLID&lt;/strong&gt; is how you design those objects so the system stays clean, scalable, and easy to change.&lt;/p&gt;

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

</description>
      <category>architecture</category>
      <category>codequality</category>
      <category>programming</category>
      <category>softwareengineering</category>
    </item>
  </channel>
</rss>
