<?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: Kawal Jain</title>
    <description>The latest articles on DEV Community by Kawal Jain (@kawaljain).</description>
    <link>https://dev.to/kawaljain</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%2F2189468%2F3683726c-d5bb-4a70-9e44-cd1d24b57597.jpeg</url>
      <title>DEV Community: Kawal Jain</title>
      <link>https://dev.to/kawaljain</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/kawaljain"/>
    <language>en</language>
    <item>
      <title>Why Most RAG Pipelines Fail in Production</title>
      <dc:creator>Kawal Jain</dc:creator>
      <pubDate>Fri, 29 May 2026 12:47:55 +0000</pubDate>
      <link>https://dev.to/kawaljain/why-most-rag-pipelines-fail-in-production-23ng</link>
      <guid>https://dev.to/kawaljain/why-most-rag-pipelines-fail-in-production-23ng</guid>
      <description>&lt;p&gt;You’ve seen the tutorial. It’s 15 lines of Python using a popular orchestration framework. You load three clean markdown files, initialize an in-memory vector store, pass a query to an LLM, and watch it spit out a flawless answer. It feels like magic.&lt;/p&gt;

&lt;p&gt;Based on this success, you greenlight the production roadmap. You scope out a two-week sprint to ship an enterprise RAG (Retrieval-Augmented Generation) system.&lt;/p&gt;

&lt;p&gt;Then, reality hits.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Demo RAG Dataset:
└── 3 pristine, well-formatted Markdown files written by engineers.

Production RAG Dataset:
└── 6 million scanned PDFs, legacy Sharepoint dumps, 80-column financial tables, 
    broken OCR text with embedded control characters, and duplicate documents 
    spanning seven distinct versions of the same product manual.

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

&lt;/div&gt;



&lt;p&gt;The harsh truth of AI systems engineering is that most RAG tutorials stop right before the ingestion pipeline catches fire . Building a demo RAG system is a weekend project; scaling a production-grade RAG pipeline to handle messy data, strict latency budgets, and unpredictable user behavior is a complex backend infrastructure problem.&lt;/p&gt;

&lt;p&gt;At &lt;strong&gt;VectaStack&lt;/strong&gt;, we spend our time building and debugging production-grade AI infrastructure. Here is an engineering post-mortem of why naive RAG pipelines fail when exposed to the real world, and what it actually takes to build a resilient, retrieval-augmented system.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Illusion of the "Happy Path" Demo
&lt;/h2&gt;

&lt;p&gt;A standard demo RAG system operates under a set of polite assumptions: clean data, low concurrency, predictable user queries, and a toy dataset that completely fits within a developer’s mental model.&lt;/p&gt;

&lt;p&gt;When you transition that system to production, you aren't just changing the scale—you are changing the architecture.&lt;/p&gt;

&lt;p&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  System Context Matrix
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Dimension&lt;/th&gt;
&lt;th&gt;The Demo Environment&lt;/th&gt;
&lt;th&gt;The Production Reality&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Data Ingestion&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Local, static, pre-cleaned &lt;code&gt;.txt&lt;/code&gt; or &lt;code&gt;.md&lt;/code&gt; files.&lt;/td&gt;
&lt;td&gt;Asynchronous streams, Webhooks, S3 buckets, S3 object updates, stale data drift.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Document State&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Static.&lt;/td&gt;
&lt;td&gt;Highly dynamic. Documents are updated, revoked, or appended hourly.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Query Profile&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;"What is the return policy outlined in section 2?"&lt;/td&gt;
&lt;td&gt;"Hey, remember that thing John mentioned last Tuesday about the widget API? Where is that?"&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Concurrency&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;1 User (the developer).&lt;/td&gt;
&lt;td&gt;500 concurrent workers blasting the LLM and vector DB endpoints simultaneously.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Success Metric&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;"It looks correct on my machine."&lt;/td&gt;
&lt;td&gt;Latency p99 &amp;lt; 2s, token cost control, deterministic evaluation metrics.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;When these two worlds collide, your pipeline breaks across five distinct structural fault lines. Let’s dissect them.&lt;/p&gt;




&lt;h2&gt;
  
  
  Failure #1: Naive Chunking and Semantic Fragmentation
&lt;/h2&gt;

&lt;p&gt;Most naive RAG implementations split text using a fixed token length or character count (e.g., chunk every 500 characters with a 50-character overlap). This is the easiest way to write a chunking loop, and it is also the fastest way to destroy your retrieval quality.&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%2Fq3z604kzcmapjn2oxyvv.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%2Fq3z604kzcmapjn2oxyvv.png" alt=" " width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If a user asks, &lt;em&gt;"What was the net profit for Q3?"&lt;/em&gt; , the vector embedding for Chunk 1 contains the context but misses the metric. Chunk 2 contains the metric but loses the context. Because the semantic meaning is fragmented across an arbitrary character boundary, your vector search score drops, and the correct chunk is missed entirely.&lt;/p&gt;

&lt;h3&gt;
  
  
  Real Implementation Scars: The Invisible Data Corruptors
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;The Unicode Trap:&lt;/strong&gt; A hidden production killer is slicing text strictly by raw character or byte arrays without evaluating Unicode characters. Slicing directly through a multi-byte emoji or a special language character creates corrupted byte sequences. This breaks downstream embedding models, resulting in silent generation failures or weird encoding errors.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Table Destruction:&lt;/strong&gt; Real data includes structured metrics. A character-based splitter chops right through text-based markdown or CSV tables, stripping row metrics from their headers and transforming critical financial data into meaningless numbers.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  The Tradeoffs of Overlap
&lt;/h3&gt;

&lt;p&gt;Increasing chunk overlap is the standard band-aid for this issue, but it introduces a steep engineering penalty:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Context Duplication:&lt;/strong&gt; You waste precious LLM context window tokens on redundant text.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Increased Noise:&lt;/strong&gt; The LLM is forced to parse identical sentences multiple times, driving up reasoning latency.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Production Alternative: Hierarchical and Parent-Child Retrieval
&lt;/h3&gt;

&lt;p&gt;Production systems decouple the &lt;strong&gt;unit of retrieval&lt;/strong&gt; from the &lt;strong&gt;unit of generation&lt;/strong&gt;. Instead of indexing the exact text block passed to the LLM, use a &lt;strong&gt;Parent-Child element structure&lt;/strong&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;+-------------------------------------------------------------+
| Parent Document / Section (Large Context: ~2000 tokens)     |
+-------------------------------------------------------------+
       |                     |                     |
       v                     v                     v
[Child Chunk 1]       [Child Chunk 2]       [Child Chunk 3]
(Small Semantic Vector) (Small Semantic Vector) (Small Semantic Vector)

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

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Chunk Small:&lt;/strong&gt; Break your document into highly granular, small child chunks (e.g., 100–200 tokens). These generate crisp, highly focused vector embeddings.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Retrieve Small, Feed Large:&lt;/strong&gt; When a child chunk matches a user query, your database hooks pull the pre-linked &lt;em&gt;Parent&lt;/em&gt; context (e.g., the surrounding 1,500 tokens or the entire structural section) and feed that to the LLM.&lt;/p&gt;

&lt;p&gt;This ensures your vector search targets exact semantic matches without starving the LLM of necessary contextual background.&lt;/p&gt;




&lt;h2&gt;
  
  
  Failure #2: Over-Reliance on Pure Vector Similarity
&lt;/h2&gt;

&lt;p&gt;A common architectural misconception is that dense vector embeddings are a drop-in replacement for traditional search engines. They are not.&lt;/p&gt;

&lt;p&gt;Vector databases excel at capturing high-level conceptual similarity, but they are notoriously terrible at exact keyword matching, serial numbers, product codes, or alphanumeric identifiers.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;⚠️ &lt;strong&gt;Production Example:&lt;/strong&gt; If a technician searches for log error code &lt;code&gt;ERR_9402_SYS&lt;/code&gt;, a pure vector search will likely retrieve chunks containing "system error handling techniques" or "standard logging protocols," rather than the specific document containing that exact error string.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  Real Implementation Scars: The Connection Pool Collapse
&lt;/h3&gt;

&lt;p&gt;When traffic spikes, running un-optimized vector database queries alongside metadata filters can quickly exhaust database connection pools. Unlike relational database indexes, high-dimensional vector index scans (like HNSW) are computationally heavy on RAM and CPU. Without strict timeout configurations, connection pooling, and separate read replicas, complex vector lookups can lock up your primary database workers, causing your core backend services to drop incoming user requests.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Fix: Hybrid Retrieval and Reranking Pipelines
&lt;/h3&gt;

&lt;p&gt;Production-grade RAG demands a hybrid retrieval architecture. You must run two parallel retrieval tracks and combine their outputs:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Dense Retrieval (Vector Search):&lt;/strong&gt; For conceptual, semantic, and conversational queries.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sparse Retrieval (BM25 / Keyword Search):&lt;/strong&gt; For exact strings, unique IDs, part numbers, and specific error codes.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;                        +------------------+
                        |    User Query    |
                        +------------------+
                             /        \
                            /          \
                           v            v
                +------------+        +------------+
                | Vector DB  |        | BM25 Index |
                | (Semantic) |        | (Keyword)  |
                +------------+        +------------+
                           \            /
                            \          /
                             v        v
                       +--------------------+
                       | Reciprocal Rank    |
                       | Fusion (RRF)       |
                       +--------------------+
                                 |
                                 v
                       +--------------------+
                       | Cross-Encoder      |
                       | Reranker Model     |
                       +--------------------+
                                 |
                                 v
                       Top K Crisp Context Chunks

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

&lt;/div&gt;



&lt;p&gt;Once both systems return their top candidates, you normalize their scores using an algorithm like &lt;strong&gt;Reciprocal Rank Fusion (RRF)&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Finally, you pass the top 25–50 combined candidates through a specialized &lt;strong&gt;Cross-Encoder Reranker model&lt;/strong&gt; (like Cohere Rerank or BGE-Reranker). Unlike vector embeddings, which calculate distances independently, a cross-encoder evaluates the exact user query and the retrieved chunk &lt;em&gt;together&lt;/em&gt;, scoring their direct relevance. This filters out the "semantic drift" that plagues raw vector outputs.&lt;/p&gt;




&lt;h2&gt;
  
  
  Failure #3: Missing Observability and "Black Box" Debugging
&lt;/h2&gt;

&lt;p&gt;When a traditional web application crashes, you get a stack trace. You know exactly which line of code threw a &lt;code&gt;NullPointerException&lt;/code&gt; or timed out on a database transaction.&lt;/p&gt;

&lt;p&gt;When a RAG pipeline fails, it fails silently:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;The system returns a confident, beautifully articulated answer that is completely fabricated (&lt;strong&gt;hallucination&lt;/strong&gt;).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The LLM claims it cannot find the answer in the document, even though the document is sitting right inside your database.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Without an explicit AI observability infrastructure, debugging this is an expensive, frustrating guessing game. Was the data improperly chunked during ingestion? Did the vector search miss the relevant chunk? Did the reranker discard it? Or did the LLM simply ignore the context?&lt;/p&gt;

&lt;h3&gt;
  
  
  Real Implementation Scars: Multi-Tenant Tenant Isolation Leaks
&lt;/h3&gt;

&lt;p&gt;In an enterprise multi-tenant system, missing observability becomes a massive security liability. If your engineering team does not explicitly log, trace, and validate namespace metadata filters at the vector retrieval layer, one tenant's search queries can accidentally pull chunks belonging to a different organization. Without strict distributed tracing across your authorization layer and vector index namespaces, verifying that your data boundaries are secure becomes nearly impossible.&lt;/p&gt;

&lt;h3&gt;
  
  
  Implementing Tracing Over Logging
&lt;/h3&gt;

&lt;p&gt;Standard application logs are insufficient for non-deterministic AI pipelines. You need distributed semantic tracing that wraps every component of your AI workflow. Open-source tracing systems like &lt;strong&gt;Langfuse&lt;/strong&gt; or OpenTelemetry-based AI frameworks track the execution graph of a single user request:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;[Request ID: 9f12-4b2a]
└── Ingestion Pipeline
└── User Query Transformation (Latency: 140ms)
└── Hybrid Retrieval (Latency: 220ms)
    ├── Vector Search -&amp;gt; Returned 10 chunks
    └── BM25 Search   -&amp;gt; Returned 10 chunks
└── Reranking Step (Latency: 180ms) -&amp;gt; Filtered 20 down to 3 chunks
└── LLM Generation (Latency: 1100ms, Tokens: 4100 input, 150 output)

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

&lt;/div&gt;



&lt;h3&gt;
  
  
  The Evaluation Loop
&lt;/h3&gt;

&lt;p&gt;You cannot optimize what you do not measure. Production RAG platforms require programmatic, automated evaluation frameworks run against evaluation datasets. Tools like &lt;strong&gt;Ragas&lt;/strong&gt; or &lt;strong&gt;TruLens&lt;/strong&gt; calculate distinct metrics based on the "RAG Triad":&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Faithfulness:&lt;/strong&gt; Is the LLM's answer derived &lt;em&gt;only&lt;/em&gt; from the retrieved context? (Catches hallucinations) .&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Answer Relevance:&lt;/strong&gt; Does the response actually address the user's initial question?.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Context Precision:&lt;/strong&gt; Did the retrieval system prioritize the exact chunks required to answer the query?.&lt;/p&gt;




&lt;h2&gt;
  
  
  Failure #4: Context Pollution and "Lost in the Middle"
&lt;/h2&gt;

&lt;p&gt;There is a tempting, lazy design pattern enabled by massive LLM context windows (e.g., 128k tokens or larger): &lt;em&gt;"Just dump the top 50 retrieved chunks into the prompt and let the model sort it out."&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;This approach causes severe degradation in performance due to a well-documented behavioral trait of large language models known as the &lt;strong&gt;"Lost in the Middle" phenomenon&lt;/strong&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;LLM Attention Allocation across a large context window:

[ High Attention ]  =============================================  (Beginning of Context)
                    |                                           |
[ Low Attention ]   |       The critical chunk you need         |  (Middle of Context)
                    |             is buried here.               |
[ High Attention ]  =============================================  (End of Context)

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

&lt;/div&gt;



&lt;p&gt;Academic research and production benchmarking consistently show that LLMs are highly effective at extracting information located at the very beginning or the very end of their input context. If your high-relevance retrieval chunks are buried in the middle of a massive context block, the model's retrieval accuracy drops drastically.&lt;/p&gt;

&lt;p&gt;Furthermore, packing your prompt with redundant, noisy, or tangential chunks creates &lt;strong&gt;context pollution&lt;/strong&gt;. The LLM begins synthesizing irrelevant details, compromising the accuracy of the final payload, and increasing the probability of semantic drift.&lt;/p&gt;




&lt;h2&gt;
  
  
  Failure #5: Latency, Cost, and Architecture Explosion
&lt;/h2&gt;

&lt;p&gt;Let's look at the financial and operational reality of running an un-optimized RAG pipeline at scale.&lt;/p&gt;

&lt;p&gt;If your system retrieves 20 large chunks per query to ensure high coverage, you might be feeding 8,000 tokens into your LLM per request. At 100,000 queries per month, your input token bills expand exponentially. More importantly, your time-to-first-token (TTFT) and overall round-trip latency scale linearly with context size.&lt;/p&gt;

&lt;p&gt;If your RAG system takes 7 seconds to respond because it's processing massive, redundant context blocks and running heavy cross-encoder rerankers synchronously, your users will abandon it.&lt;/p&gt;

&lt;h3&gt;
  
  
  Scalable Architecture Bottlenecks
&lt;/h3&gt;

&lt;p&gt;To bypass this bottleneck, production-ready systems treat RAG as an asynchronous, decoupled backend pipeline.&lt;/p&gt;

&lt;h3&gt;
  
  
  Strategic System Optimization
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;Semantic Caching:&lt;/strong&gt; Implement a caching layer (e.g., using Redis) before the retrieval step. If a new user query is semantically identical (or highly similar) to a previously answered query, serve the cached response directly without hitting your retrieval or LLM layers. This drops latency to milliseconds and eliminates token costs for common queries.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Asynchronous Processing Pools:&lt;/strong&gt; Ingestion, text extraction, OCR parsing, and embedding generation must be handled out-of-band using robust worker pools and message queues. Never block your primary application thread while a 50-page PDF is being parsed and vectorized.&lt;/p&gt;




&lt;h2&gt;
  
  
  Shift Focus: Systems Engineering Over Prompt Engineering
&lt;/h2&gt;

&lt;p&gt;The industry is moving past the phase of treating AI development as a series of clever text prompts or simplistic wrapper scripts.&lt;/p&gt;

&lt;p&gt;When a RAG pipeline fails in production, it is rarely because the LLM wasn't "smart" enough to understand the prompt. It fails because an engineer treated a complex text-processing, data-routing, and information-retrieval pipeline as a trivial software layer.&lt;/p&gt;

&lt;p&gt;Building a reliable, production-ready RAG architecture requires shifting your focus back to foundational computer science principles:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Deterministic data cleaning and parsing.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Decoupled, asynchronous infrastructure.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Robust observability frameworks.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Hybrid index configurations designed around user access patterns.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;RAG is not a prompt engineering problem. It is a systems engineering problem .&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Treat your retrieval pipeline with the same architectural rigor you apply to your primary relational databases, and your AI infrastructure will survive contact with the real world.&lt;/p&gt;




&lt;h3&gt;
  
  
  Discussion Corner
&lt;/h3&gt;

&lt;p&gt;How are you handling structural chunking and retrieval latency inside your production pipelines? What real-world engineering bottlenecks or data ingestion errors have you encountered? Let’s talk architecture, tradeoffs, and indexing approaches in the comments section below.&lt;/p&gt;




&lt;h3&gt;
  
  
  About VectaStack
&lt;/h3&gt;

&lt;p&gt;Building AI Agents, Automation Platforms, and Enterprise SaaS.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Website: &lt;a href="https://vectastack.com" rel="noopener noreferrer"&gt;https://vectastack.com&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;LinkedIn: &lt;a href="https://linkedin.com/company/vectastack" rel="noopener noreferrer"&gt;https://linkedin.com/company/vectastack&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>ai</category>
      <category>distributedsystems</category>
      <category>rag</category>
      <category>backend</category>
    </item>
    <item>
      <title>Building My Own Markdown Parser: A Developer's Journey 🚀</title>
      <dc:creator>Kawal Jain</dc:creator>
      <pubDate>Sun, 20 Oct 2024 03:38:27 +0000</pubDate>
      <link>https://dev.to/kawaljain/building-my-own-markdown-parser-a-developers-journey-3b26</link>
      <guid>https://dev.to/kawaljain/building-my-own-markdown-parser-a-developers-journey-3b26</guid>
      <description>&lt;p&gt;Hello &lt;strong&gt;Readers&lt;/strong&gt;,&lt;/p&gt;

&lt;p&gt;In this post, I'm going to explain what is Markdown, how Markdown works and why it's so useful. We'll dive into its key features, common uses, and show you how to get started with it.&amp;nbsp;&lt;br&gt;
Markdown has always been a go-to for developers when it comes to writing clean and readable documentation. But have you ever wondered how the text you write in markdown turns into beautifully formatted HTML? 🤔&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Let's explore!&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;
  
  
  What is Markdown&amp;nbsp;?
&lt;/h2&gt;

&lt;p&gt;A &lt;strong&gt;Markdown file&lt;/strong&gt; (with a&amp;nbsp;.md or&amp;nbsp;.markdown extension) is a simple, lightweight format for writing structured text that can easily be converted into HTML or other formats.The core idea behind Markdown is to allow users to write text that is both easy to read in plain form and can be converted into HTML without complex code or tags.&lt;/p&gt;
&lt;h2&gt;
  
  
  Key Features of Markdown:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Plain Text-Based:&lt;/strong&gt; Markdown files are readable in any text editor and don't require special software to view.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Lightweight Syntax:&lt;/strong&gt; With simple symbols like #, *, and &lt;a href=""&gt;&lt;/a&gt;, you can create headings, lists, links, and more.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Extensible:&lt;/strong&gt; Many platforms and tools support custom extensions, so you can add tables, footnotes, or even code blocks.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Common Use&amp;nbsp;Case
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Documentation&lt;/li&gt;
&lt;li&gt;Content Creation&lt;/li&gt;
&lt;li&gt;Note-Taking and Writing&lt;/li&gt;
&lt;li&gt;Technical Communication&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;
  
  
  A Developer's Journey&amp;nbsp;🚀
&lt;/h2&gt;

&lt;p&gt;My journey with Markdown began when I used it to document my projects on &lt;strong&gt;&lt;em&gt;&lt;a href="https://github.com/kawaljain" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;&lt;/em&gt;&lt;/strong&gt;. Its simplicity and versatility amazed me, sparking my curiosity about how such a markup language could be created from scratch.&amp;nbsp;&lt;br&gt;
I embarked on a fun and challenging journey - building my own Markdown parser from scratch! It was a deep dive into parsing and lexing, but also an excellent way to sharpen my understanding of text transformation and regular expressions.&lt;/p&gt;
&lt;h2&gt;
  
  
  Key Challenges:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Handling Edge Cases:&lt;/strong&gt; Markdown is simple, but edge cases like nested lists or inline HTML can make parsing tricky.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Efficient Parsing:&lt;/strong&gt; Ensuring the parser handles both small and large documents efficiently.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Regex Mastery:&lt;/strong&gt; Understanding and leveraging regular expressions to correctly interpret different markdown elements like headings, lists, links, and code blocks.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Project Step
&lt;/h2&gt;

&lt;p&gt;Here are the steps to set up the project, which is developed in React.js. You can find an &lt;em&gt;&lt;strong&gt;&lt;a href="https://markdown.kawaljain.com/" rel="noopener noreferrer"&gt;online demo link&lt;/a&gt;&lt;/strong&gt;&lt;/em&gt; for your reference. Additionally, be sure to check out the GitHub &lt;strong&gt;&lt;em&gt;&lt;a href="https://github.com/kawaljain/markdown-parser/blob/master/README.md" rel="noopener noreferrer"&gt;README&lt;/a&gt;&lt;/em&gt;&lt;/strong&gt; file for detailed instructions and information.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Clone this repository:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git clone https://github.com/kawaljain/markdown-parser.git
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Navigate to the project directory:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd markdown-parser
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Install dependencies::&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now run the following commands assuming you are in markdown-parser directory or simply follow this &lt;em&gt;&lt;strong&gt;&lt;a href="https://github.com/kawaljain/markdown-parser/blob/master/README.md" rel="noopener noreferrer"&gt;documentation&lt;/a&gt;&lt;/strong&gt;&lt;/em&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm run dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The app will run on your localhost. Simply &lt;strong&gt;Ctrl + Click&lt;/strong&gt; the provided link to open it in your browser. And Congrats! You've successfully built your very own Markdown parser!&lt;/p&gt;

&lt;h2&gt;
  
  
  Wrapping up
&lt;/h2&gt;

&lt;p&gt;This project has been a truly rewarding experience! It not only deepened my understanding of Markdown but also enhanced my skills in writing parsers and working with text processing overall. I look forward to applying what I've learned to future projects!&lt;/p&gt;

&lt;h2&gt;
  
  
  Contributions &amp;amp; Feedback!
&lt;/h2&gt;

&lt;p&gt;I'm excited to announce that I'm open-sourcing this project and would love for others to contribute or share feedback on how I can make it even better. Whether you're passionate about markup languages, parsers, or just want to collaborate, your ideas and input are welcome! Stay tuned for the repo link.&lt;/p&gt;

&lt;p&gt;let's build something amazing together! 📂&lt;/p&gt;

&lt;h2&gt;
  
  
  Reference Links
&lt;/h2&gt;

&lt;p&gt;Here are some helpful resources:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://react.dev/" rel="noopener noreferrer"&gt;React Documentation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.markdownguide.org/" rel="noopener noreferrer"&gt;Markdown Documentation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.markdownguide.org/basic-syntax/" rel="noopener noreferrer"&gt;Basic Markdown Syntax Guid&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://markdown.kawaljain.com/" rel="noopener noreferrer"&gt;Online Demo&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/kawaljain/markdown-parser" rel="noopener noreferrer"&gt;Github Repository&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Mission Accomplished: Unraveling the&amp;nbsp;Code!
&lt;/h2&gt;

&lt;p&gt;As I wrap up this journey of creating my own Markdown parser, I'm thrilled with the insights and skills I've gained along the way. This project has not only challenged me but has also deepened my appreciation for the beauty and simplicity of Markdown.&lt;br&gt;
I encourage you to dive into the code, experiment with your own features, and share your ideas. Whether you're a seasoned developer or just starting, there's always something new to learn and explore. Thank you for joining me on this adventure - let's keep pushing the boundaries of what we can create together!&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Thanks for reading&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;Happy coding!&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;If you enjoyed the article and would like to show your support, be sure to:&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Follow me On &lt;strong&gt;&lt;a href="https://dev.to/kawaljain"&gt;&lt;em&gt;Dev&lt;/em&gt;&lt;/a&gt;&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Follow me On &lt;strong&gt;&lt;a href="https://kawaljain.medium.com/" rel="noopener noreferrer"&gt;&lt;em&gt;Medium&lt;/em&gt;&lt;/a&gt;&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Checkout more &lt;strong&gt;&lt;a href="https://kawaljain.com/" rel="noopener noreferrer"&gt;&lt;em&gt;Portfolio&lt;/em&gt;&lt;/a&gt;&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>react</category>
      <category>markdown</category>
      <category>javascript</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Javascript Interview Question Explanation -Asynchronous Behaviour</title>
      <dc:creator>Kawal Jain</dc:creator>
      <pubDate>Tue, 15 Oct 2024 12:40:42 +0000</pubDate>
      <link>https://dev.to/kawaljain/javascript-interview-question-explanation-asynchronous-behaviour-10ma</link>
      <guid>https://dev.to/kawaljain/javascript-interview-question-explanation-asynchronous-behaviour-10ma</guid>
      <description>&lt;h2&gt;
  
  
  Asynchronous Behaviour of JavaScript with setTimeout
&lt;/h2&gt;

&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In this article, we will explore a fascinating piece of JavaScript code that demonstrates the asynchronous nature of the language, particularly how closures and the &lt;code&gt;setTimeout&lt;/code&gt;&amp;nbsp;function work together. If you've ever been puzzled by why your loop outputs unexpected results, you're in the right place!&lt;/p&gt;

&lt;h2&gt;
  
  
  Key Concept
&lt;/h2&gt;

&lt;p&gt;Before diving into the code, Let discuss few concept.&lt;/p&gt;

&lt;h3&gt;
  
  
  Asynchronous Programming: 
&lt;/h3&gt;

&lt;p&gt;JavaScript is single-threaded, meaning it can only execute one piece of code at a time. However, it can handle asynchronous operations, allowing certain tasks to run in the background while the main thread continues executing.&lt;/p&gt;

&lt;h2&gt;
  
  
  SetTimeout
&lt;/h2&gt;

&lt;p&gt;This function is used to execute a piece of code after a specified delay. It takes two parameters: a callback function and a delay in milliseconds.&lt;/p&gt;

&lt;h2&gt;
  
  
  Closures
&lt;/h2&gt;

&lt;p&gt;A closure is a function that retains access to its lexical scope, even when the function is executed outside that scope. This is crucial for understanding how variables are accessed in asynchronous callbacks.&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="k"&gt;for &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;i&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="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&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="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;1000&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;p&gt;Before we dive into the details, take a moment to look at this code snippet. Try to guess what the output will be based on your current understanding. This approach not only helps reinforce your JavaScript skills but also makes the explanation that follows much more meaningful&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Think about how JavaScript will process each line. Once you've made your guess, keep reading to see if you got it right!&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Explanation
&lt;/h2&gt;

&lt;p&gt;Let break down the code step by step:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Loop Execution&lt;/strong&gt; : The loop runs five times, incrementing&amp;nbsp;&lt;code&gt;i&lt;/code&gt;&amp;nbsp;from 0 to 4.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;setTimeout&lt;/strong&gt;: For each value of&amp;nbsp;&lt;code&gt;i&lt;/code&gt;, a&amp;nbsp;&lt;code&gt;setTimeout&lt;/code&gt;&amp;nbsp;is scheduled to log&amp;nbsp;&lt;code&gt;i&lt;/code&gt;&amp;nbsp;after&amp;nbsp;&lt;code&gt;i * 1000&lt;/code&gt;&amp;nbsp;milliseconds.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Closure&lt;/strong&gt;: By the time the&amp;nbsp;&lt;code&gt;setTimeout&lt;/code&gt;&amp;nbsp;callbacks execute, the loop has already completed, and&amp;nbsp;&lt;code&gt;i&lt;/code&gt;&amp;nbsp;has a final value of 5. Therefore, all the callbacks will log&amp;nbsp;&lt;code&gt;5&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  What you might except
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="mi"&gt;0&lt;/span&gt;
&lt;span class="mi"&gt;1&lt;/span&gt;
&lt;span class="mi"&gt;2&lt;/span&gt;
&lt;span class="mi"&gt;3&lt;/span&gt;
&lt;span class="mi"&gt;4&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  What actually Happens
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="mi"&gt;5&lt;/span&gt;
&lt;span class="mi"&gt;5&lt;/span&gt;
&lt;span class="mi"&gt;5&lt;/span&gt;
&lt;span class="mi"&gt;5&lt;/span&gt;
&lt;span class="mi"&gt;5&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;However, this is not the actual output that you would see. The reason for this is a common JavaScript behavior related to the scope of the&amp;nbsp;&lt;code&gt;i&lt;/code&gt;&amp;nbsp;variable.&lt;/p&gt;

&lt;p&gt;In the provided code, the&amp;nbsp;&lt;code&gt;i&lt;/code&gt;&amp;nbsp;variable is declared using&amp;nbsp;&lt;code&gt;var&lt;/code&gt;, which means it has function scope. When the&amp;nbsp;&lt;code&gt;setTimeout()&lt;/code&gt;&amp;nbsp;functions are executed, the loop has already completed, and the value of&amp;nbsp;&lt;code&gt;i&lt;/code&gt;&amp;nbsp;is 5. Therefore, all the&amp;nbsp;&lt;code&gt;setTimeout()&lt;/code&gt;&amp;nbsp;functions will log the value 5 to the console, regardless of the delay.&lt;/p&gt;

&lt;h2&gt;
  
  
  Fixing the Issue
&lt;/h2&gt;

&lt;p&gt;To achieve the expected output of&amp;nbsp;&lt;code&gt;0, 1, 2, 3, 4&lt;/code&gt;,&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;you can use an &lt;code&gt;Immediately Invoked Function Expression (IIFE)&lt;/code&gt;to create a new scope for each iteration.&lt;/li&gt;
&lt;li&gt;We can use &lt;code&gt;let&lt;/code&gt; keyword instead of &lt;code&gt;var&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Solution
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Immediately Invoked Function Expression
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;for &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;i&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="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&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="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;function&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="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;1000&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;})(&lt;/span&gt;&lt;span class="nx"&gt;i&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;p&gt;Now,  each &lt;code&gt;setTimeout&lt;/code&gt; will captures the current value of &lt;code&gt;i&lt;/code&gt;, and output will be:&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="mi"&gt;0&lt;/span&gt;
&lt;span class="mi"&gt;1&lt;/span&gt;
&lt;span class="mi"&gt;2&lt;/span&gt;
&lt;span class="mi"&gt;3&lt;/span&gt;
&lt;span class="mi"&gt;4&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  By Using &lt;code&gt;Let&lt;/code&gt; keyword
&lt;/h3&gt;

&lt;p&gt;The&amp;nbsp;&lt;code&gt;let&lt;/code&gt;&amp;nbsp;keyword creates a block-scoped variable, which means that each iteration of the loop will have its own copy of the&amp;nbsp;&lt;code&gt;i&lt;/code&gt;&amp;nbsp;variable, and the&amp;nbsp;&lt;code&gt;setTimeout()&lt;/code&gt;&amp;nbsp;functions will capture the correct value of&amp;nbsp;&lt;code&gt;i&lt;/code&gt;&amp;nbsp;for each iteration.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Understanding how JavaScript handles asynchronous operations and closures is crucial for writing effective code. The original code snippet serves as a great example of how the&amp;nbsp;&lt;code&gt;setTimeout&lt;/code&gt;&amp;nbsp;function interacts with the loop variable&amp;nbsp;&lt;code&gt;i&lt;/code&gt;. By using an &lt;code&gt;IIFE&lt;/code&gt;, we can ensure that each timeout logs the correct value. So, the next time you encounter a similar situation, remember the power of closures and how they can help you manage asynchronous behaviour in JavaScript&lt;/p&gt;

&lt;h2&gt;
  
  
  Mission Accomplished: Unraveling the&amp;nbsp;Code!
&lt;/h2&gt;

&lt;p&gt;I hope this explanation not only clarified the code but also sparked some curiosity to explore further. JavaScript is full of surprises and powerful tools, and each piece you learn brings you closer to mastering it.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Thanks for reading&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I hope you enjoyed this breakdown! Feel free to share your thoughts, questions, or ideas for future topics in the comments.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Happy Coding&lt;/p&gt;

&lt;p&gt;&lt;em&gt;If you enjoyed the article and would like to show your support, be sure to:&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Follow me&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>coding</category>
      <category>codenewbie</category>
    </item>
    <item>
      <title>Javascript Interview Question Explanation- Object Properties</title>
      <dc:creator>Kawal Jain</dc:creator>
      <pubDate>Wed, 09 Oct 2024 13:47:21 +0000</pubDate>
      <link>https://dev.to/kawaljain/javascript-interview-question-explanation-object-properties-1hof</link>
      <guid>https://dev.to/kawaljain/javascript-interview-question-explanation-object-properties-1hof</guid>
      <description>&lt;p&gt;Hello Reader,&lt;/p&gt;

&lt;p&gt;I am going to explain javascript interview coding question. How javascript compiler works and what it actually produces as output.&lt;br&gt;
I'll break down each part of the output, explain why it appears this way, and connect it back to the specific lines of code responsible&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 = {};
let b = { key: 'b' };
let c = { key: 'c' };

a[b] = 123;
a[c] = 456;

console.log(a[b])
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Before we dive into the details, take a moment to look at this code snippet. Try to guess what the output will be based on your current understanding. This approach not only helps reinforce your JavaScript skills but also makes the explanation that follows much more meaningful&lt;br&gt;
"Think about how JavaScript will process each line. Once you've made your guess, keep reading to see if you got it right!"&lt;/p&gt;

&lt;h2&gt;
  
  
  Explanation of above&amp;nbsp;code
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;For Line-1
&lt;/li&gt;
&lt;/ol&gt;

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

&lt;/div&gt;



&lt;p&gt;Above code, creates an empty object, and assign to the variable 'a'.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;For Line-2
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let b = { key: 'b' };
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This line creates an object with a single property key and the value 'b', and assigns it to the variable 'b'.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;For Line-3
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;let c = { key: 'c' };
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This line creates an object with a single property key and the value 'c', and assign it to the variable 'c'.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;For Line-4
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a[b] = 123;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;a[b] = 123&lt;/strong&gt; This line sets a property of the object &lt;strong&gt;a&lt;/strong&gt; using the object &lt;strong&gt;b&lt;/strong&gt; as the key. In JavaScript, when an object is used as a key in another object, the object is first converted to a string using the &lt;strong&gt;toString()&lt;/strong&gt; method. In this case, the string representation of the object b is &lt;strong&gt;"[object Object]"&lt;/strong&gt;&amp;nbsp;. So, the property &lt;strong&gt;"[object Object]"&lt;/strong&gt; of the object a is set to the value &lt;strong&gt;123&lt;/strong&gt;.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;For Line-5
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a[c] = 456;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Similar to the Previous step, &lt;strong&gt;"c"&lt;/strong&gt; is also a object and converted to string, it becomes &lt;strong&gt;""[object Object]""&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Therefore, the line &lt;strong&gt;a[c] = 456;&lt;/strong&gt; is equivalent to &lt;strong&gt;"a[object Object]"=456&lt;/strong&gt;, which means that object has &lt;strong&gt;"[object Object]"&lt;/strong&gt; property and its value is &lt;strong&gt;456&lt;/strong&gt;.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;For Line-6
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log(a[b])
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output is &lt;strong&gt;456&lt;/strong&gt;. when you try to access the the property &lt;strong&gt;"a[b]"&lt;/strong&gt;, javascript again convert b to string, which is &lt;strong&gt;"[object Object]"&lt;/strong&gt;. Since object has a property with the key &lt;strong&gt;"[object Object]"&lt;/strong&gt; and its value is &lt;strong&gt;456&lt;/strong&gt;. So it will print the output.&lt;/p&gt;




&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;In Summary, the code demonstrate that when an object is used as a key in the another object, the object is first converted to a string representation, which is "[object Object]" by default. This means that the objects b and c are treated as the same key, and the last value assigned to that key is the one that is retrieved.&lt;/p&gt;




&lt;h2&gt;
  
  
  Mission Accomplished: Unraveling the&amp;nbsp;Code!
&lt;/h2&gt;

&lt;p&gt;I hope this explanation not only clarified the code but also sparked some curiosity to explore further. JavaScript is full of surprises and powerful tools, and each piece you learn brings you closer to mastering it.&lt;br&gt;
Thanks for reading, and I hope you enjoyed this breakdown! Feel free to share your thoughts, questions, or ideas for future topics in the comments.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Happy coding!&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>javascript</category>
      <category>coding</category>
      <category>programming</category>
      <category>codenewbie</category>
    </item>
  </channel>
</rss>
