<?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: Sanu Ranjan</title>
    <description>The latest articles on DEV Community by Sanu Ranjan (@sanuranjan).</description>
    <link>https://dev.to/sanuranjan</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%2F4004454%2Fffb35b17-265a-4a59-81f7-799f9eb14f08.png</url>
      <title>DEV Community: Sanu Ranjan</title>
      <link>https://dev.to/sanuranjan</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/sanuranjan"/>
    <language>en</language>
    <item>
      <title>How ChatGPT Understands Your Questions?</title>
      <dc:creator>Sanu Ranjan</dc:creator>
      <pubDate>Wed, 01 Jul 2026 18:28:45 +0000</pubDate>
      <link>https://dev.to/sanuranjan/how-chatgpt-understands-your-questions-1l4h</link>
      <guid>https://dev.to/sanuranjan/how-chatgpt-understands-your-questions-1l4h</guid>
      <description>&lt;p&gt;"My cat cant read this"&lt;/p&gt;

&lt;p&gt;Held my laptop up, my cat stared at the screen for two seconds, then walked off like I'd personally offended her. Zero understanding. Fair enough, she's a cat.&lt;/p&gt;

&lt;p&gt;But here's the thing that actually gets interesting, I can't fully explain how I read either. I'm doing it right now, obviously, but no neuroscientist on the planet can fully explain how my brain turns these squiggles into "oh, a cat joke." That one's still unsolved.&lt;/p&gt;

&lt;p&gt;ChatGPT though, we can actually try to understand, not every step of it start to finish but can have an over all idea, no mystery here. So let's go through it properly, follow one sentence on its entire journey, from raw text to a reply showing up on our screen.&lt;/p&gt;

&lt;p&gt;You type this into ChatGPT:&lt;/p&gt;

&lt;p&gt;"My cat cant read this"&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8kq6nj66i7kds6v7b36c.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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F8kq6nj66i7kds6v7b36c.png" alt=" " width="800" height="384"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;...and it immediately starts judging you(pun intended)&lt;/p&gt;

&lt;p&gt;So how did it know? Let's actually go underneath the chat window, because that's the whole point of this post, not what ChatGPT is, but what it's actually doing to your sentence in the half second before it replies.&lt;/p&gt;

&lt;p&gt;Underneath, it's a model doing exactly one job, look at some text, guess what word comes next. That's genuinely it. There's no separate grammar checker bolted on, no dictionary it's flipping through. Catching your missing apostrophe, understanding what you meant, replying like a smug know it all, all of that comes out of "guess the next word," just done at a scale that's hard to picture. Let's watch it happen on your actual sentence.&lt;/p&gt;

&lt;p&gt;Step 1: Chopping the sentence up (Tokenization)&lt;/p&gt;

&lt;p&gt;Computers can't read English, not even a little. All they work with is numbers. So before anything else happens, your sentence gets cut into small pieces called  tokens , and each piece gets a number.&lt;/p&gt;

&lt;p&gt;My cat cant read this → [My] [cat] [can] [t] [read] [this]&lt;/p&gt;

&lt;p&gt;"cant" gets split weird, into [can] and [t]. That's because "cant" isn't actually a real word, it's missing its apostrophe, so the tokenizer, which only knows the chunks it was trained on(its vocabulary), does its best and breaks it apart. Every token maps to a fixed number, and that mapping doesn't change based on our intended meaning.&lt;/p&gt;

&lt;p&gt;Step 2: Vector Embeddings&lt;/p&gt;

&lt;p&gt;A number alone tells you nothing. 47 doesn't mean anything about "cat". So each token's number gets swapped for something bigger, a long list of numbers called an  embedding , which works like a personality profile for that word. Words with related meaning end up with similar looking profiles. "cat" and "dog" sit close together numerically. "cat" and "computer" don't.&lt;/p&gt;

&lt;p&gt;These profiles aren't invented fresh for our sentence. They're premade. Learned once during training, and just sitting there in a giant table afterward we can visualize it as words positioned in 3d space such that the distance between words represent how closely they are related. When our sentence comes in, the model isn't building a personality for "cat" on the spot, it's pulling "cat"'s profile off the shelf, already fully formed from having seen the word a billion times before during training.&lt;/p&gt;

&lt;p&gt;Step 3: Remembering the order (Positional Encoding)&lt;/p&gt;

&lt;p&gt;Small problem, the next step processes every token at once, together, not one after another. Which is fast, but it also means word order gets lost by default. "My cat cant read this" and "this cant read my cat" would otherwise look the same to it.&lt;/p&gt;

&lt;p&gt;So before that step, each token gets a small stamp added to its profile, basically marking "I was word 1," "I was word 3," and so on, so the order survives even though everything's being processed together.&lt;/p&gt;

&lt;p&gt;Step 4: Where the actual understanding happens (Self Attention)&lt;/p&gt;

&lt;p&gt;Quick reminder before this part, by now every token isn't a word anymore, it's the number profile from Step 2, already stamped with its position from Step 3. That stamp matters here because attention checks every token against every other token all at once, not in order, so without it, the model would have no way to tell "My cat cant read this" apart from "this cant read my cat", same words, same profiles, totally different meaning.&lt;/p&gt;

&lt;p&gt;When "cant" "looks at" every other word, it's doing a direct number comparison, checking how closely its numbers align with "cat"'s, "read"'s, and "My"'s. The closer the alignment, the more of that word's numbers get mixed into "cant". These alignments come from patterns the model picked up during training, but here's the honest part, we can't actually read those numbers and say "this is the grammar bit" or "this is the meaning bit." Nobody can point at them and narrate what each one means in plain English. What we can say is what happens mechanically, closely aligned words get blended in heavily, weakly aligned ones barely at all, and this runs for every token at once, all comparing against each other simultaneously. That's also why it doesn't lose track in long sentences, word 2 and word 200 can compare directly in one step, instead of that information passing hand to hand through every word in between.&lt;/p&gt;

&lt;p&gt;Step 5: A private pass (Feed Forward Layer)&lt;/p&gt;

&lt;p&gt;After the mixing in Step 4, each token's profile is just a blend of other tokens' numbers. This step takes that blend and reworks it through another formula, also learned during training, using only what this one token already has, no borrowing from others this time. As for what this reworking actually captures, same honest answer as before, we can't point at it and say in plain words what it's doing. What we can say is the shape of it, Steps 4 and 5 together repeat many times, stacked on top of each other, and across all those rounds each token's profile gradually shifts from a generic word into a word shaped by this specific sentence. The exact thing each round contributes isn't something anyone can narrate, but the end result is that every token's numbers end up reflecting the whole sentence around it, not just the word on its own.&lt;/p&gt;

&lt;p&gt;Step 6: Actually picking a word (Softmax)&lt;/p&gt;

&lt;p&gt;After all those rounds of Steps 4 and 5, the model has one final set of numbers for the position where the next word should go. Now it has to turn that into an actual word. It compares those numbers against every word in its vocabulary, tens of thousands of them, and produces a raw score for each one, how well each word fits given everything so far. Those raw scores are messy and hard to work with, some could even be negative, so they get run through softmax, which just squashes them all into clean percentages that add up to 100%. Something like "You" at 38%, "That" at 20%, "Well" at 9%, and so on down the list.&lt;/p&gt;

&lt;p&gt;Then it picks a word from that list, usually leaning toward the higher percentages, adds it to the sentence, and runs the entire thing again from the start, tokenizing, embedding, comparing, reworking, all of it, to figure out the next word after that. One word at a time, which is why you watch the reply type itself out instead of appearing all at once. It's not being revealed to you from somewhere, it's being built, live, one word at a time, right in front of you.&lt;/p&gt;

&lt;p&gt;Quick recap since this is the part that trips people up, the token list, the embedding profiles, and all the internal formulas are fixed. Learned once during training, frozen after that. None of it changes while you are chatting, no matter what you type. And to answer the obvious question, no, the model isn't learning from your conversation as you go. Your chats may still be collected and used to help train future versions, depending on the service and your settings, but even then that training happens later, offline, not while you type. It does improve over time, but only when the company trains and releases a newer version, and the version you're talking to right now stays exactly the same its whole life until it's swapped for a new one. What's fresh every single time is the computation itself, your specific words getting run through those frozen numbers in a way that's never happened before, because your exact may sentence have never existed before either.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>JavaScript Closures: How They Actually Work</title>
      <dc:creator>Sanu Ranjan</dc:creator>
      <pubDate>Fri, 26 Jun 2026 21:13:35 +0000</pubDate>
      <link>https://dev.to/sanuranjan/javascript-closures-how-they-actually-work-376g</link>
      <guid>https://dev.to/sanuranjan/javascript-closures-how-they-actually-work-376g</guid>
      <description>&lt;p&gt;&lt;em&gt;A quick note before we start: this post is for beginners trying to understand how closures actually work. I have done my best as per my limited knowledge to explain what happens under the hood, so if I have gotten anything wrong, please correct me in the comments.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;When I was first learning closures, I could recite the definition but still could not explain why they actually work. Information that goes past the definition and into the "why" and "How" is sometimes harder to find than expected. One of my dear friends finally explained it to me in a way that made it click, so I thought I should pass it on for any beginner going through the same thing.&lt;/p&gt;

&lt;p&gt;The definition we have probably heard: an inner function remembers variables from its outer function, even after the outer function has finished running. That is correct, but it is only the surface. The real question is, what is so special here? Why does that memory survive at all? The answer lives in how the JavaScript engine handles memory behind the scenes.&lt;/p&gt;

&lt;p&gt;Here is the example we will use the whole way through:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;innerCounter&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="o"&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;count&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;innerCounter&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;myCounter1&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="nf"&gt;myCounter1&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// 1&lt;/span&gt;
&lt;span class="nf"&gt;myCounter1&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// 2&lt;/span&gt;

&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;myCounter2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nf"&gt;myCounter2&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// 3&lt;/span&gt;
&lt;span class="nf"&gt;myCounter1&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// 3&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I'm using &lt;code&gt;var&lt;/code&gt; here just to make the breakdown easier to visualize.&lt;/p&gt;

&lt;h2&gt;
  
  
  How the Engine Runs the Code
&lt;/h2&gt;

&lt;p&gt;Contrary to the popular belief that JavaScript is just a simple, line-by-line interpreted language, the engine handles the code in distinct steps. There are two phases:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Compilation Phase:&lt;/strong&gt; the engine scans the code and registers all variable declarations and function definitions before anything runs. For each function, it creates a function object in memory, and the function's name points to that object.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Execution Phase:&lt;/strong&gt; the code finally runs, line by line.&lt;/p&gt;

&lt;p&gt;Separately from these, there's garbage collection: the cleanup process that runs in the background. Normally, once a function finishes executing, its local execution scope is freed from memory so it doesn't waste space. With a closure, that cleanup gets blocked. The executed function's local execution scope persists, letting the inner function reach back up the scope chain and grab what it needs.&lt;/p&gt;

&lt;p&gt;Quick recap of the example above: &lt;code&gt;counter&lt;/code&gt; takes a parameter &lt;code&gt;n&lt;/code&gt; (default 0), stores it in &lt;code&gt;count&lt;/code&gt;, and returns an inner function &lt;code&gt;innerCounter&lt;/code&gt; that increments and logs &lt;code&gt;count&lt;/code&gt;. We create &lt;code&gt;myCounter1&lt;/code&gt; from &lt;code&gt;counter()&lt;/code&gt; and &lt;code&gt;myCounter2&lt;/code&gt; from &lt;code&gt;counter(a)&lt;/code&gt;, and the outputs come out as 1, 2, 3, 3. Now let's see how.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Mapping the Global Scope
&lt;/h2&gt;

&lt;p&gt;Before a single line runs, JavaScript sets up the global scope in memory during compilation, registering the names &lt;code&gt;a&lt;/code&gt;, &lt;code&gt;myCounter1&lt;/code&gt;, and &lt;code&gt;myCounter2&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;When it hits the &lt;code&gt;counter&lt;/code&gt; definition, it creates a function object for it in memory, and the name &lt;code&gt;counter&lt;/code&gt; points to that object. Here's the secret sauce: every function gets a hidden internal property (often written &lt;code&gt;[[Scope]]&lt;/code&gt;) that points back to the environment where it was born. For &lt;code&gt;counter&lt;/code&gt;, that points to the global scope.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Creating myCounter1
&lt;/h2&gt;

&lt;p&gt;Now execution starts. It sets &lt;code&gt;a = 2&lt;/code&gt;, then calls &lt;code&gt;counter()&lt;/code&gt; with no argument.&lt;/p&gt;

&lt;p&gt;Invoking the function spins up a brand new local execution context, which points back to wherever its function definition's &lt;code&gt;[[Scope]]&lt;/code&gt; is pointing to. Inside this temporary space, a mini-compilation happens:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;n&lt;/code&gt; defaults to 0.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;count&lt;/code&gt; is registered and initialized to 0.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;innerCounter&lt;/code&gt; function is defined and stored and &lt;code&gt;innerCounter&lt;/code&gt; holds reference to its function definition, and its hidden &lt;code&gt;[[Scope]]&lt;/code&gt; points right back to this local scope.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Finally, &lt;code&gt;counter()&lt;/code&gt; returns &lt;code&gt;innerCounter&lt;/code&gt;, which returns the reference of its function definition and we store it in &lt;code&gt;myCounter1&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Normally the local execution scope of &lt;code&gt;counter()&lt;/code&gt; would now be wiped by the garbage collector. But JavaScript has a golden rule: if an environment can still be reached from the global scope, it can't be garbage collected. Since &lt;code&gt;myCounter1&lt;/code&gt; points to the inner function's definition, and the inner function points back to this local scope &lt;code&gt;counter()&lt;/code&gt;, a bridge remains. The memory survives.&lt;/p&gt;

&lt;h2&gt;
  
  
  Climbing the Scope Chain
&lt;/h2&gt;

&lt;p&gt;Now we call &lt;code&gt;myCounter1()&lt;/code&gt;. A fresh local execution scope is created for the function execution which points back to wherever its &lt;code&gt;[[Scope]]&lt;/code&gt; is pointing to, here it points to &lt;code&gt;counter()&lt;/code&gt;'s local execution scope which is still in memory.&lt;/p&gt;

&lt;p&gt;Then in execution phase for this function it encounters &lt;code&gt;count++&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;First it checks its own local context for &lt;code&gt;count&lt;/code&gt;. Nothing there. So it follows up its scope chain into the preserved parent memory the &lt;code&gt;counter()&lt;/code&gt; execution context, finds &lt;code&gt;count&lt;/code&gt; at 0, increments it to 1 in that parent scope, and logs 1, and then &lt;code&gt;myCounter1()&lt;/code&gt; local execution context is garbage collected.&lt;/p&gt;

&lt;p&gt;The second call &lt;code&gt;myCounter1()&lt;/code&gt; repeats exactly: it looks locally, finds nothing, climbs the chain, finds &lt;code&gt;count&lt;/code&gt; now at 1, increments it to 2, and logs 2.&lt;/p&gt;

&lt;p&gt;We get updated value here all because &lt;code&gt;counter()&lt;/code&gt;'s local execution scope is still not garbage collected.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 3: Total Isolation with myCounter2
&lt;/h2&gt;

&lt;p&gt;What happens when we create &lt;code&gt;myCounter2&lt;/code&gt;?&lt;/p&gt;

&lt;p&gt;Because we invoke &lt;code&gt;counter&lt;/code&gt; fresh, JavaScript generates a completely separate, second local execution context. Here &lt;code&gt;n&lt;/code&gt; receives the value of &lt;code&gt;a&lt;/code&gt; (which is 2), so &lt;code&gt;count&lt;/code&gt; starts at 2.&lt;/p&gt;

&lt;p&gt;Calling &lt;code&gt;myCounter2()&lt;/code&gt; climbs its own scope chain, finds its own &lt;code&gt;count&lt;/code&gt; at 2, increments it, and outputs 3.&lt;/p&gt;

&lt;p&gt;To prove the two environments share nothing, look at the final &lt;code&gt;myCounter1()&lt;/code&gt;. It ignores whatever &lt;code&gt;myCounter2&lt;/code&gt; did, goes right back to its original environment, finds its old value of 2, increments it to 3, and logs 3.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;At the end of the day, that's all a closure is. The outer function's local execution scope escapes garbage collection because the inner function's definition, whose reference is present in the global scope, keeps a live, reachable path back to the outer function's local execution scope via &lt;code&gt;[[Scope]]&lt;/code&gt;. That persistent connection is what keeps the data alive across separate instances.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
