<?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: YoucefRabia</title>
    <description>The latest articles on DEV Community by YoucefRabia (@mantasxa).</description>
    <link>https://dev.to/mantasxa</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.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1476842%2F2036f353-680b-42b5-b1e5-286214b6c7ef.png</url>
      <title>DEV Community: YoucefRabia</title>
      <link>https://dev.to/mantasxa</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/mantasxa"/>
    <language>en</language>
    <item>
      <title>I Built JSON.stringify and JSON.parse From Scratch in Vanilla JS — Here Are 5 Things That Broke My Brain</title>
      <dc:creator>YoucefRabia</dc:creator>
      <pubDate>Tue, 11 Aug 2026 11:52:30 +0000</pubDate>
      <link>https://dev.to/mantasxa/i-built-jsonstringify-and-jsonparse-from-scratch-in-vanilla-js-here-are-5-things-that-broke-my-jeb</link>
      <guid>https://dev.to/mantasxa/i-built-jsonstringify-and-jsonparse-from-scratch-in-vanilla-js-here-are-5-things-that-broke-my-jeb</guid>
      <description>&lt;p&gt;I hadn't coded in a year. I was a CRUD app maker, dropped out of software engineering, and spent the last few years studying something completely different. I came back to JS and bought some courses. Too slow. Too basic. I wanted to understand the tools I use every day, not just use them.&lt;/p&gt;

&lt;p&gt;So I picked the most boring, most essential tool in JavaScript: &lt;code&gt;JSON.stringify&lt;/code&gt; and &lt;code&gt;JSON.parse&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The rule:&lt;/strong&gt; If I can't build it, I don't understand it.&lt;/p&gt;




&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;A complete JSON engine in vanilla JavaScript:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Tokenizer&lt;/strong&gt; — reads raw JSON text character by character and produces tokens&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Parser&lt;/strong&gt; — recursive descent parser that turns tokens into JS values&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Serializer&lt;/strong&gt; — turns JS values back into JSON text&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Test suite&lt;/strong&gt; — 107 tests covering every edge case I could find&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Published to npm: &lt;code&gt;@rabia_youcef/vanilla-json&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Repo: &lt;a href="https://github.com/MantasEdine/vanilla-json" rel="noopener noreferrer"&gt;github.com/MantasEdine/vanilla-json&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  5 Things That Broke My Brain
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. &lt;code&gt;typeof null === "object"&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;The most famous bug in JavaScript. If your parser checks &lt;code&gt;typeof input === "object"&lt;/code&gt; before checking &lt;code&gt;input === null&lt;/code&gt;, you will crash trying to call &lt;code&gt;Object.keys(null)&lt;/code&gt;. Every single time.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. &lt;code&gt;JSON.stringify(NaN)&lt;/code&gt; returns &lt;code&gt;"null"&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;Not &lt;code&gt;"NaN"&lt;/code&gt;. Not &lt;code&gt;undefined&lt;/code&gt;. The string &lt;code&gt;"null"&lt;/code&gt;. Because the JSON spec says so.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. &lt;code&gt;undefined&lt;/code&gt; behaves differently in arrays vs objects
&lt;/h3&gt;

&lt;p&gt;In an array: &lt;code&gt;[1, undefined, 3]&lt;/code&gt; → &lt;code&gt;"[1,null,3]"&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;In an object: &lt;code&gt;{a: 1, b: undefined}&lt;/code&gt; → &lt;code&gt;{"a":1}&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;The key just &lt;strong&gt;vanishes&lt;/strong&gt;. The spec treats them differently and you have to handle both paths.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. One &lt;code&gt;\"&lt;/code&gt; inside a string destroys your tokenizer
&lt;/h3&gt;

&lt;p&gt;If your string reader stops at the first &lt;code&gt;"&lt;/code&gt; it sees, &lt;code&gt;"say \"hello\""&lt;/code&gt; will break. You have to handle escaped quotes or your parser dies on any real JSON.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. &lt;code&gt;0&lt;/code&gt; and &lt;code&gt;-0&lt;/code&gt; are different in IEEE 754
&lt;/h3&gt;

&lt;p&gt;But &lt;code&gt;JSON.stringify(-0)&lt;/code&gt; returns &lt;code&gt;"0"&lt;/code&gt;. JavaScript pretends they're the same for JSON purposes. I only found this because I was testing every number edge case I could think of.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why This Project Is Perfect for Learning
&lt;/h2&gt;

&lt;p&gt;You don't need frameworks. You don't need libraries. You need:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;typeof&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;A &lt;code&gt;for&lt;/code&gt; loop&lt;/li&gt;
&lt;li&gt;A &lt;code&gt;switch&lt;/code&gt; statement&lt;/li&gt;
&lt;li&gt;&lt;code&gt;Array.isArray&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;Object.keys&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That's it. And you will touch recursion, closures, type coercion, memory management (&lt;code&gt;WeakSet&lt;/code&gt; for circular refs), and the event loop (if you build the playground).&lt;/p&gt;




&lt;h2&gt;
  
  
  The Tutorial
&lt;/h2&gt;

&lt;p&gt;I wrote the whole thing up as a step-by-step tutorial while I was building it. From "what is a token" to "why does circular reference detection need a WeakSet."&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Read it here:&lt;/strong&gt; &lt;a href="https://vanille-json-docs.netlify.app/" rel="noopener noreferrer"&gt;vanille-json-docs.netlify.app&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you're tired of surface-level JavaScript tutorials and want to understand how the engine actually works, this is for you.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>json</category>
      <category>tutorial</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
