In modern distributed systems, performance is not just an optimization metric; it has a direct impact on business outcomes. Even small delays in response time can reduce user engagement, conversions, and overall trust in a product. When millions of users interact with an application, every database call and every network round trip matters.

One of the most powerful techniques used to improve system performance is caching. Almost every large-scale platform relies on it to reduce latency, lower database pressure, and handle massive traffic efficiently. Without caching, many modern applications would struggle to scale beyond a few thousand users.

But caching is not just about storing data temporarily. At scale, caching is really about controlling timing.

When data is refreshed matters just as much as what data is stored.

In small systems, adding a simple TTL (Time-To-Live) to a cache entry feels sufficient. You store a value, set it to expire in 60 seconds, and refresh it when needed. This approach works fine when traffic is low and user behavior is mostly random.

However, in distributed systems where thousands or millions of users depend on the same data, fixed expiration can create dangerous synchronization patterns. Instead of protecting your backend, the cache can unintentionally trigger a traffic explosion.

In this article, we will go deeper into why basic TTL caching is not enough in distributed systems. We will understand how cache expiry can create traffic spikes, explore advanced strategies used in production systems, and examine the tradeoffs between freshness, latency, and consistency.

What is Caching and Why Does It Matter?

Caching is a technique in which frequently accessed data is stored in a faster storage layer so that subsequent requests can be served more quickly. Instead of repeatedly querying a slower data source such as a database or remote service, the system retrieves the data from a cache, which is typically stored in memory and optimized for rapid access.

The main benefit of caching comes from the speed difference between memory and persistent storage. Accessing data from memory is orders of magnitude faster than retrieving it from disk, and retrieving data from a nearby cache server is significantly faster than querying a remote server. By reducing the number of expensive backend operations, caching improves response times, increases throughput, and enhances overall user experience.

The effectiveness of a caching system is often measured using the cache hit ratio, which represents the proportion of requests served directly from the cache. A higher hit ratio indicates that the system is successfully intercepting requests before they reach the database, thereby reducing backend load and improving performance.

However, caching also introduces complexity. It creates new challenges related to data freshness, consistency, synchronization, and invalidation. In distributed systems, these challenges become more pronounced because multiple servers and users interact with shared data simultaneously.

How Caching Works in a Distributed Architecture

Consider a simple architecture where a client sends requests to an application server, which then retrieves data from a database. Without caching, every request results in a database query. As traffic increases, the database becomes a bottleneck because it must process every incoming request.

When a cache layer is introduced between the application server and the database, the workflow changes. The application first checks whether the requested data exists in the cache. If the data is present, it is returned immediately. If the data is not present, the application retrieves it from the database, returns it to the user, and stores it in the cache for future use.

This approach significantly reduces database load under normal traffic conditions. However, this simple model assumes that requests arrive randomly over time and that cache expiration events do not create coordination problems. In distributed systems with synchronized user behavior, this assumption does not always hold true.

The Core Problem: Synchronized Expiration

To understand why basic TTL caching can become dangerous, consider a popular product page on an e-commerce platform during a flash sale. Suppose the product data is cached with a TTL of 60 seconds, and 100,000 users are actively viewing the page.

For the first 60 seconds, everything operates smoothly. The cache serves responses quickly, and the database remains largely idle. Latency is low, and the system appears stable.

At the exact moment the TTL expires, however, the cache entry becomes invalid. If thousands of users request the same data at that moment, they will all experience a cache miss simultaneously. As a result, they will all trigger database queries to regenerate the same information.

The total number of users has not increased, but the timing of their requests has become synchronized. Instead of spreading the database load evenly over time, the system concentrates it into a very small time window. This phenomenon is commonly referred to as a cache stampede or the thundering herd problem.

The issue here is not high traffic; it is coordinated traffic. Distributed systems are designed to handle scale, but they struggle when many operations occur simultaneously in a synchronized manner.

Why Basic TTL Caching Is Insufficient at Scale

Basic TTL caching is deterministic, meaning that each cache entry expires at a precise and predictable moment. While determinism may seem beneficial, it introduces risk in distributed systems because it creates synchronization points.

When many users depend on the same cache key, the expiration time becomes a trigger event. All requests that arrive after that moment must regenerate the same data, which can overwhelm backend services. In real-world systems, user behavior is often synchronized due to scheduled events, product launches, live streaming events, or flash sales. If cache expiration aligns with these events, the resulting traffic spike can be severe.

In smaller systems, the effect may be negligible. In high-scale environments, even a few milliseconds of synchronized recomputation can cause cascading failures, increased latency, and retry storms.

Advanced Cache Strategies for Distributed Systems

To prevent synchronization failures, production systems use more advanced cache management techniques that distribute load more intelligently.

TTL Jitter

TTL jitter introduces randomness into expiration times. Instead of assigning a fixed TTL of 60 seconds to every cache entry, the system adds a small random variation, such as 60 seconds plus or minus 10 seconds. This ensures that not all entries expire simultaneously.

By spreading expiration events across a time window, TTL jitter transforms a single large spike into smaller, more manageable waves of traffic.

Probability-Based Early Expiration

In probability-based early expiration, the system begins refreshing cache entries before they fully expire. As a cache key approaches its TTL limit, the probability of recomputation gradually increases.

This prevents a sudden spike at the exact expiration moment by distributing refresh operations over time. The main idea is simple: instead of waiting for a deadline, the system prepares for it gradually.

Mutex or Cache Locking

Another powerful technique is cache locking. When a cache entry expires, only one request is allowed to regenerate the data, while others wait for the result. Without locking, thousands of identical database queries could occur simultaneously.

With locking, only a single database query is executed, and its result is shared with all waiting requests. Although this may slightly increase latency for some users, it protects backend systems from overload.

Stale-While-Revalidate (SWR)

Stale-While-Revalidate allows the system to continue serving expired data temporarily while refreshing it in the background. This strategy prioritizes availability and user experience over strict freshness.

It is widely used in CDNs and edge caching systems because it prevents users from experiencing delays during recomputation. Although the data may be slightly outdated for a short period, the system remains stable under heavy load.

Cache Warming

Cache warming involves preloading frequently accessed data into the cache before anticipated traffic spikes. This approach is especially useful for predictable events such as product launches, live sports matches, or streaming releases.

By preparing the cache in advance, the system avoids an initial surge of database queries when traffic increases.

Cache Invalidation and Eviction

Caching introduces additional responsibilities beyond storing data. Cache invalidation ensures that outdated data is removed or updated when changes occur. Invalidation can be time-based, event-driven, or manual. Choosing the appropriate invalidation strategy depends on how frequently the underlying data changes and how critical consistency is for the application.

When cache storage reaches its capacity, eviction policies determine which entries should be removed. Common policies include Least Recently Used (LRU), Least Frequently Used (LFU), and First-In-First-Out (FIFO). Each policy makes different tradeoffs between recency and frequency of access.

Scaling Distributed Caching

Scaling a distributed cache requires careful planning around data partitioning, replication, and fault tolerance. Techniques such as consistent hashing and sharding ensure even data distribution across nodes. Replication ensures availability if a node fails. Monitoring tools are essential to track hit rates, latency, and system health.

Popular distributed caching solutions include Redis, Memcached, Hazelcast, and Apache Ignite, each offering different capabilities for scalability and fault tolerance.

Conclusion

Caching is a foundational component of modern distributed systems. It reduces latency, improves scalability, and protects backend services from excessive load. However, basic TTL caching is insufficient at scale because deterministic expiration creates synchronization points that can lead to traffic spikes and cascading failures.

Advanced strategies such as TTL jitter, probabilistic early expiration, mutex locking, stale-while-revalidate, and cache warming are essential for preventing coordination failures. Ultimately, effective caching is not merely about speed; it is about designing systems that behave predictably under stress.

In distributed systems, the most dangerous problems are rarely caused by insufficient capacity. They are caused by synchronization. A well-designed caching strategy ensures that work is distributed over time, protecting both system stability and user experience.

Want More…?

I write articles on blog.devwithjay.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

We all know that most modern applications are built to handle thousands, sometimes millions of users.

But sometimes systems don't fail because of heavy traffic. They fail because of synchronized traffic.

When many users try to access the same resource at the same time, systems can collapse unexpectedly. This is called the Thundering Herd Problem.

Example:
Imagine a store opening at 9 AM.
At 8:59 AM, 500 people are waiting outside.
The shutter lifts.
Everyone rushes in at once.

The store wasn’t designed for that instant load.

That is exactly how the Thundering Herd Problem behaves in distributed systems.

In this article, we'll understand what this problem is, where it commonly occurs, and why it is dangerous, and finally, we'll discuss techniques to prevent or reduce it.

What is the Thundering Herd Problem?

The Thundering Herd Problem occurs when a large number of clients simultaneously attempt to access the same resource.

It is not just high traffic, but synchronized traffic.

This sudden burst of simultaneous requests can overload servers, databases, or caching layers, causing performance degradation or complete system collapse.

Where Does It Commonly Occur?

The problem appears in:

• Caching systems

• Databases

• Load balancers

• Distributed systems

• Retry mechanisms

The most common scenario is cache expiry.

Real-World Example

Consider a system with the following architecture

Let's assume:

• Cache TTL (Time to Live) = 60 seconds

• 10,000 users are requesting the same data.

For 60 seconds:

• Cache servers responses

• Database remains protected

After 60 seconds:

• Cache entry expires

Now, all 10,000 users:

• Miss the cache

• Hit the database at the same time

The database receives a sudden burst of requests and may not handle it properly.

This is called a cache stampede, which is a common form of the Thundering Herd Problem.

Why Basic TTL Caching is Risky?

Basic TTL caching works like this:

• Store data for a fixed duration.

• After expiry, remove it.

But if many users depend on the same key, fixed expiration becomes dangerous.

If multiple keys expire together:

• Traffic synchronizes

• Backend services get overwhelmed

• Latency increases

• Failures cascade

Basic TTL alone is not enough in distributed systems. Smarter cache control strategies are required.

How Traffic Spikes Overload Systems?

A normal traffic spike increases gradually:

Example:

• IPL streaming traffic increases over time

• Viewers join slowly

• Auto-scaling may handle it

But in a thundering herd scenario:

• All users refresh at the same moment

• Ticket booking opens at the exact time

• Netflix releases a new season at midnight

• Flash sale starts at 12:00 PM sharp

Traffic doesn't grow here; it explodes.

Systems don't get time to adapt.

Why Does It Become Dangerous in Distributed Systems?

Distributed systems amplify the problem. Why?

Because:

• Multiple server instances may try to regenerate the same cache simultaneously

• Retry mechanisms may trigger additional requests

• Failures in one service can cascade to others.

Failure → Retry → More Load → More Failure

This loop can crash entire systems.

Synchronization is the real danger.

Impact on System Components

CPU

• Thread pool exhaustion

• High context switching

• 100% utilization

• Increased response time

When the CPU saturates, the entire application slows down.

Database

This is usually the most affected layer.

• Connection pool exhaustion

• Lock contention

• Slow queries

• Potential crashes

Databases are optimized for steady load. Not for sudden synchronized bursts.

Cache

Instead of protecting the database:

• Multiple regeneration attempts may occur

• Duplicate recomputation increases pressure

• Memory and network usage spike

The cache becomes part of the problem.

Latency

Users experience:

• Slow responses

• Timeouts

• Failed requests

When timeouts occur, retries begin.

Retries amplify the load even further.

Normal Traffic Spike vs Thundering Herd

Techniques to Prevent or Reduct It

Preventing the Thundering Herb Problem requires careful system design.

Request Coalescing

Instead of allowing multiple identical requests to hit the database:

• First request goes to the database

• Other requests wait

• Response is shared

This ensures only one regeneration happens.

Cache Locking / Mutex

When cache expires:

• First thread acquires a lock

• Regenerates data

• Others wait

This prevents parallel database hits.

Staggered Expiry (Adding Jitter)

Instead of:

• TTL = 60 seconds for all entries

Use:

• TTL = 60 ± random(10 seconds)

This spreads out expiry times and prevents synchronization.

Exponential Backoff

Instead of retrying immediately:

Wait:

• 100 ms

• 200 ms

• 400 ms

• 800 ms

This reduces retry storms and gives the system time to recover.

Rate Limiting

Limit incoming requests to protect downstream services.

Techniques:

• Token bucket

• Leaky bucket

It is better to reject some traffic than to crash the entire system.

Why Is This Important for Interviews?

Interviewers use this problem to test:

• Understanding of caching

• Distributed system thinking

• Failure handling

• Retry strategies

• Traffic Behavior Modeling

Mental Model

The problem is not high traffic.

The problem is synchronized traffic.

Systems are built for scale.

They struggle with coordination failure.

Conclusion

The Thundering Herd Problem is one of the most important failure patterns in distributed systems.

It teaches us that:

• Cache expiry timing matters

• Retries can amplify failure

• Synchronization can crash systems

Good system design is not just about handling more users.

It is about predicting behavior under stress and preventing chaos before it begins.

Want More…?

I write articles on blog.devwithjay.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

If you’re serious about blogging, having a custom domain makes a real difference. If makes your blog look professional and gives you ownership.

Hashnode makes this process easy, but many students still get confused, mainly with CNAME records and blog setup.

This article will guide you on how to connect a custom domain name using CNAME and common mistakes I see students making (and how to avoid them).

Prerequisites

• A HashNode account ❕

• A domain name (from providers like Spaceship, GoDaddy, Namecheap)

• Some Patience 😌

Creating Blog

Wrong Approach:

• Creating a new Hashnode article for every article

• Trying to attach a custom domain to each blog

Correct Approach:

• Create one main blog

• Add your custom domain to that blog

• Publish all articles inside that same blog

Steps to create a blog:

1. Go to https://hashnode.com

2. Click on New Blog

   

3. Enter your Blog name (e.g. Learn With Jay)

4. Choose your Blog URL (this will be yourname.hashnode.dev for now)

5. Click Create

This single blog will contain all your articles. Do not create a new blog for every article.

Adding Custom Domain to Hashnode (Using Cloudflare)

In this guide, I’m using Cloudflare becuase:

• It’s free

• It’s fast

• Most developers prefer using it

Step 1: Add Domain in Hashnode

• Steps:

  1. Open your Hashnode Dashboard

  2. Select the blog you just created

  3. Navigate to Domain Tab

  4. Enter your Domain Name (e.g. blog.yourdomain.com)

• Hashnode will now show you CNAME record details.

  

• Hashnode recommends using a subdomain, not the root domain.

  Avoid: yourdomain.com

  Prefer: blog.yourdomain.com

Step 2: Add Domain to Cloudflare

• Steps:

  1. Go to https://dash.cloudflare.com

  2. Click Add a site

  3. Enter your domain name (e.g. yourdomain.com)

  4. Choose the Free plan

  5. Cloudflare will scan existing DNS records (you can continue)

• Once added, Cloudflare will ask you to update nameservers at your domain provider.

Step 3: Update Nameservers at Domain Provider

• Go to your domain provider (Spaceship, GoDaddy, Namecheap):

  1. Open DNS / Nameserver settings

  2. Replace existing nameservers with Cloudflare nameservers

  3. Save changes

• DNS propagation may take some time.

Step 4: Add CNAME Record Mentioned by Hashnode

• In Cloudflare:

  1. Open your domain

  2. Go to DNS → Records

  3. Click Add record

• Fill the values:

  

  • Type: CNAME

  • Name: blog

  • Target: hashnode.network

  • Proxy status: DNS only (important)

  • TTL: Auto

• Save the record.

• Do not add extra spaces or change values.

Step 5: Verify Domain on Hashnode

• Steps:

  1. Go back to Hashnode → Settings → Domain

  2. Click Verify Domain

• If DNS has propagated, you’ll see a success message.

• If not, wait a little and try again.

Step 6: SSL (HTTPS)

• Hashnode automatically provides free SSL.

  • No manual setup needed

  • HTTPS may take a few minutes to activate

• Once done, your blog will open securely.

How Publishing Works After This

Once the domain is connected:

• You will write all articles in the same blog

• URLs will look like:

  https://blog.yourdomain.com/article-title

Conclusion

Connecting a custom domain to Hashnode using CNAME is simple once you understand the flow.

One Blog. One Domain. Unlimited Articles

Want More…?

I write articles on blog.devwithjay.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

When you talk to AI like ChatGPT, it feels like it understands full sentences.

It feels like it reads words the same way humans do.

But that’s not true.

AI does not read words.
AI does not read sentences.

AI reads tokens.

To understand how AI works, tokenization is one of the most important concepts to learn.

Computers Don’t Understand Language

Humans understand language naturally.

When you read:

“My name is Jay.”

You understand the meaning instantly.

A computer cannot do this.

Computers only understand numbers.

So before AI can work with language, text must be converted into a form computers can process.

That process is called tokenization.

What Is Tokenization?

Tokenization means breaking text into small parts called tokens.

AI models like GPT do not predict letters or full sentences.

They predict tokens, one at a time.

A token can be:

• a single letter

• a full word

• or part of a word

There is no fixed rule.

How text is split depends on the tokenizer used by the model.

What Is a Token?

A token is the smallest unit of text that AI understands.

A token can be:

• "My"

• "name"

• "is"

• "Jay"

Or it can be smaller:

• "M", "y"

• "n", "a", "m", "e"

Even spaces and punctuation can become tokens.

Same Sentence, Different Tokens

Let’s take a simple sentence:

My name is Jay.

Different models can break this sentence differently.

Model A (Word-based tokenization)

My
name
is
Jay

Model B (Character / sub-word tokenization)

M
y
(space)
n
a
m
e
(space)
i
s
(space)
J
a
y

Both models see the same sentence.

But the tokens are different.

That is why:

• Token count changes

• Cost changes

• Behavior changes slightly

Why Tokenization Is Important

AI does not think in words.

It thinks in tokens.

When you type a prompt, the model predicts the next token, not the next sentence.

It keeps doing this again and again until a full response is created.

That is how AI “writes”.

How GPT Predicts Text

Let’s say you type:

Once upon a

GPT might predict:

time

Then it predicts:

there

Then:

was

One token at a time.

This continues until the response is complete.

That’s it.

No thinking.
No understanding.
Just prediction.

Why Small Prompt Changes Matter

Because AI works with tokens, even small changes affect the output.

For example:

Explain JavaScript.

vs

Explain JavaScript simply.

These two prompts produce different tokens.

Different tokens → different predictions → different output.

That’s why prompt wording matters so much.

What are Token Limits?

Every AI model has a token limit.

This limit includes:

• Your input

• Previous messages

• The model’s reply

If the total tokens exceed the limit, older messages are removed.

That’s why AI sometimes “forgets” things.

It did not forget.

The tokens just did not fit.

Tokenization Depends on the Model

Each AI model uses its own tokenizer.

For example:

• GPT has its own tokenizer

• Gemini has a different one

• Claude uses another

So the same text can produce different token counts in different models.

There is no universal token system.

Tokenization Happens First

Before AI can do anything useful, tokenization happens.

The basic flow looks like this:

Text
→ Tokens
→ Numbers
→ AI Model
→ Predicted Tokens
→ Text Output

Everything starts with tokens.

Why Freshers Should Learn Tokenization

Understanding tokenization helps you understand:

• Why prompt engineering works

• Why AI pricing is token-based

• Why context is limited

• Why AI answers change with wording

Once you understand tokens, AI stops feeling magical.

It starts feeling logical.

Conclusion

Tokenization is the first step in how AI understands language.

Before a model can answer, explain, or generate anything, it must break text into tokens.
Those tokens decide what the model sees, how much it remembers, and what it predicts next.

Once you understand tokenization, many AI behaviors start making sense:
why prompts matter, why limits exist, and why wording changes results.

AI may feel intelligent, but at its core, it’s simply working with tokens and probabilities.

And that’s exactly where everything begins.

Want More…?

I write articles on blog.devwithjay.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

AI can translate languages, answer questions, recommend movies and even understand emotions in text.

But behind all of this intelligence, there is one concept that makes everything work: Vector Embeddings

You may not hear the term often, but embeddings are the foundation of how AI understands meaning.

They help models like GPT recognize relationships between words, compare ideas, and respond in a way that feels surprisingly human.

Why Do We Need Embeddings?

Humans understand language naturally. A single world like “apple” brings images, taste, color and memories.

But Computers? They only understand numbers.

Earlier methods tried to convert words into numbers using simple techniques, but they had a major flaw:

Old Methods Didn’t Capture Meaning

• “king” and “queen” looked unrelated

• “car” and “vehicle” were treated like strangers

• “bank (river)” and “bank (money)” looked identical

AI needed a better way, a method to represent meaning, not just text.

That method is vector embeddings.

What are Vector Embeddings?

Vector embeddings are numerical representations that capture the meaning of words, sentences or even images.

Instead of storing words as plain text, AI converts them into vectors, long lists of numbers like:

The numbers store:

• context

• relationships

• meaning

• similarity

So AI doesn’t just see the word “king”.
It sees how “king” relates to “queen”, “royal”, “monarch”, “crown”, and so on.

How Embeddings Actually Work?

A good way to understand embeddings is to image a giant map.

Every word is a point on this map.

Words with similar meanings appear close together.
Words with opposite or unrelated meanings appear far apart.

Example:

This is how AI feels meaning.

Embeddings allow AI to reason like this:

• “queen” is close to “king”

• “doctor” is close to “hospital”

• “sun” is close to “light”

• “milk” is close to “cow”

Where Do Embeddings Come From?

Many people think embeddings magically appear, but they are created through Transformer models, the same architecture used in GPT, Gemini, Claude, and more.

A Transformer takes input, processes it, and produces meaningful output.

Transformers were introduced by Google in 2017 in a research paper titled: “Attention is All You Need.”

This paper changed everything in AI.

Transformers learn embeddings by reading massive amounts of text and discovering how words appear together, their context, relationships and patterns.

Working of Transformer

Step 1: Tokenization

• AI Doesn’t read full words It breaks text into token(small units) like:

  • “Hello” → “Hel”, “lo”

  • “Jay” → “J”, “a”, “y”

  • “Running” → “run”, “ning”

• Each token is assigned a number.

• These numbers enter the embedding layer.

Step 2: Input Embedding Layer

• This is where tokens into vector embeddings.

• Each token becomes a coordinate in multi-dimensional space.

• Words with similar meaning end up close together.

Step 3: Positional Encoding

• Embeddings capture meaning, but not order.

• Example:

  • “Dog bites man”

  • “Man bites dog”

Same Words. Different Meaning.

• Positional encoding helps the model understand word order.

Step 4: Self-Attention

This is where Transformer shine.

Self-attention allows the model to understand context:

• “bank” near “river” → water

• “bank” near “loan” → finance

This steps refines the embeddings based on their surroundings.

Step 5: Learned Meaning

• After millions of sentences, the model learns relationships like:

  • Paris → France

  • Tokyo → Japan

  • Apple → Fruit

  • Tiger → Animal

• This knowledge lives inside vector embeddings.

Where are Embeddings Used in Real Life?

Embeddings power almost every AI system we use today.

1. Search Engines

   Search “best movies about space”

   The system uses embeddings to find content with similar meaning, not just matching keywords.

2. ChatGPT

   Your message → embedding

   GPT response → based on embeddings of related ideas.

3. Recommendations

   Netflix, Spotify, YouTube, all use embeddings to understand your taste.

4. Document Similarity

   AI can detect:

   “This paragraph means the same thing as that one”,

   even if the words are totally different.

5. Image Search

   With image embeddings, AI can find:

   • “pictures similar to this one”

   • “objects related to this shape”

Embeddings go far beyond text.

Why Embeddings Feel So Magical?

Embeddings give AI the ability to:

• understand meaning

• detect relationships

• identify similarities

• follow context

• bridge languages

They make AI feel smart, even though, in reality, the model is just a powerful prediction machine.

AI does not think.
It predicts the next best output using patterns it has learned.

Types of Embeddings

1. Word Embeddings

   • Word Embeddings represent the meaning of individual words as vectors.

   • They help the model understand:

     • which words are similar(“happy” and “joyful”)

     • which words are related(“car” and “engine”)

     • which words are opposite(“hot” and “cold”)

   • These embeddings are useful in tasks like:

     • spell-check

     • suggestions while typing

     • simple search systems

     • sentiment analysis

2. Sentence Embeddings

   • Sentence embeddings capture the the overall meaning of an entire sentence, not just individual words.

   • For example:

     • “I’m feeling great today!”

     • “Today, I’m in a very good mood".

Both contain different words but have the same meaning.

Sentence embeddings make this clarity possible.

• These are use in:

  • chatbots

  • document search

  • duplicate question detection(e.g. StackOverflow)

  • summary and Q&A systems

• Sentence embeddings help AI understand context, tone and intention.

3. Document Embeddings

   • Document embeddings represent whole paragraphs, articles, reports, or long texts as single vectors.

   • They help AI:

     • search inside large knowledge bases

     • find related articles

     • retrieve the right information for ChatGPT(RAG systems)

     • group documents by theme

     • detect plagiarism or similarity

   • If you’ve ever used “semantic search” or “AI-powered search”, document embeddings are running behind the scenes.

4. Image Embeddings

   • Image embeddings convert images into numbers based on what the image contains.

   • For example, an AI sees:

     • a dog → “animal, four legs, fur, outdoors”

     • a car → “vehicle, wheels, metal, road”

     • a sunset → “sky, light, orange colors”

   • These embeddings allow AI to:

     • find similar images

     • label images automatically

     • match text with images (like “dog running”)

     • understand what an image represents in visual search

   • Image embeddings are used in systems like Google Photos, Pinterest and modern vision-language models.

The Future of Embeddings

Embeddings are improving rapidly.

The next generation will handle:

• text

• image

• audio

• video

• emotions

• real-world context

All inside a single vector space.

This will allow AI models to understand everything together, not in separate parts.

The more embeddings evolve, the more natural AI will become.

Conclusion

Vector embeddings are the hidden power behind modern AI.
They let machines turn text and images into numbers, not randomly, but meaningfully.

This is how AI understands relationships, compares ideas, and communicates like a human.

Embeddings don’t store words. They store meaning.

And that’s why they are one of the most revolutionary concepts in the world of AI today.

Want More…?

I write articles on blog.devwithjay.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

You’ve probably seen people talking about GPT, ChatGPT, or AI that writes like a human.

But what exactly is GPT? And how can a computer understand what we say or even talk back intelligently?

To understand how GPT works, let’s start with a simple comparison, between how we’ve always told computers what to do, and how AI has completely changed that approach.

Traditional Coding vs AI

In traditional programming, we tell computers exactly what to do.
We use fixed instructions like if, else, or return.

Every step is predefined, meaning the computer follows only the rules we write.
The output is fixed, predictable, and repeatable.

For example:

if(input === "Hi") {
  return "Hello!";
}

No matter how many times you run it, the answer will always be “Hello!”, nothing more, nothing less.

Now comes Artificial Intelligence(AI), especially Generative AI(GenAI).
AI doesn’t follow any hard-coded rules. It doesn’t have prewritten answers.

Instead, it learns patterns from large data and then creates answers dynamically, based on what is has learned.

This means the response is not fixed. It’s generated on the go, depending on the context and prompt.

That’s what makes AI so interesting. It doesn’t just follow instructions, it actually creates results.

What is Generative AI?

Generative AI is a special types of AI that doesn’t just analyze, it creates.

The word Generative means to produce or bring into existence.
So, Generative AI refers to a system capable of generating new content, such as text, images, code, music, or even video.

For example:

• A normal AI might look at an image and say: “This is a cat.”

• A Generative AI, however, can create a brand-new image of a cat, one that never existed before.

That’s the difference between recognizing and creating.

Generative AI doesn’t just interpret data, it uses what is has learned to produce new ideas, words, or visuals, almost like a storyteller or digital artist.

Today, many companies have built similar generative models:

• Google → Gemini

• Anthropic → Claude

• Meta → LLaMA

All of these belong to the same family of Generative AI, systems that can produce human-like text or content.

What is GPT?

GPT stands for Generative Pretrained Transformer, and it’s type of Generative AI model.

• Generative → It can generate new content (text, articles, stories, code, etc.).

• Pretrained → It was trained in advance using a large amount of publicly available data, from books, websites, articles, and more.

• Transformer → It’s a deep learning architecture designed to understand relationships between words and context.

For example, if you say:

“Write me a nice bedtime story.”

GPT won’t pull a prewritten story. Instead, it creates one instantly, word by word, predicting what comes next based on everything it has learned.

The company who build GPT is OpenAI, a research organization focused on developing safe and useful artificial intelligence.

The name “OpenAI” is given with their early mission, to make AI research open, collaborative, and beneficial for everyone.

What is ChatGPT?

When you hear the word ChatGPT, it simply means:

Chat + GPT = Chat interface built on top of GPT.

It’s basically a chat version of the GPT model, where you type a question, and GPT replies in real time, like a conversation.

So, instead of interacting with code or data directly, you just talk naturally, and ChatGPT responds like a human.

It can:

• Answer questions

• Write essays or emails

• Generate Code

• Summarize Articles

• Translate Languages

• Explain complex topics simply

ChatGPT made AI accessible to everyone, not just developers or researchers.

How GPT Actually Works

Let’s say you are starting a sentence with:

“Once upon a…”

GPT instantly guesses the next word, maybe “time.”
Then it predicts the next one, and the next, until you have a complete story.

That’s exactly how GPT works, it’s like a super advanced word predictor that has read almost the entire internet.

But instead of just guessing random words, GPT uses context, grammar, and meaning, allowing it to write responses that sound natural and logical.

Is AI “Smart”?

Despite how impressive it seems, AI isn’t truly intelligent.

It doesn’t think, feel, or understand like humans do.
It’s more like a smart prediction machine, some even call it a “clever box that predicts the next word.”

GPT doesn’t know what it’s saying, it just knows what usually comes next when people write about that topic.

That’s why sometimes AI can make mistakes or hallucinate (generate incorrect information confidently).

So, the idea that “AI will replace humans completely” is a myth.
AI only does what it’s trained and instructed to do, nothing more!

Why GPT Feels So Human

GPT feels natural because it’s incredibly good at understanding context.

When you ask a question, it doesn’t just look at a few words, it reads your entire sentence and infers you intent, tone, and style.

For example, when you say:

“Explain quantum physics like I’m five,”
it knows how to respond playfully and simply.

That’s why GPT can write essays, poems, jokes, and even technical documentation, all while matching your tone perfectly.

The Future of GPT

GPT is evolving rapidly.
Each new version becomes smarter and more efficient than previous, and better at understanding the context.

But the real power of GPT isn’t just in technology, it’s in how humans use it.
Writers use it to brainstorm, teachers use it to explain topics, and developers use it to build faster.

GPT doesn’t replace human creativity, it just amplifies it.

Conclusion

GPT is just language model, a system trained to understand and generate human-like text.
It doesn’t truly understand like we do, but it’s so good at recognizing patterns that it feels almost magical.

From traditional coding to AI-powered creation, we’ve moved from writing rules to teaching machines to learn.

That’s what makes GPT special.
It’s not just following commands anymore, it’s learning how to think in words, how to respond naturally, and how to communicate like us.

Want More…?

I write articles on blog.devwithjay.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

We all know JavaScript as the language of the browser. But have you ever wondered how it became a part of backend development too?

At one point, JavaScript was limited to things like button clicks and animations. But with the introduction of Node.js, everything changed.

In this article, we’ll learn what a server is, how JavaScript runs on it using the V8 engine, what makes Node.js a runtime, and how to write and run our first Node.js program.

What is a Server?

A server is just a remote computer that sends data or services to other computers over the internet. For example, when you visit Google, your request goes to their server, not a physical office.

Here's how the process works:

• Every website is associated with an IP address (for example, 142.250.191.14 for Google)

• When you type a domain name, your computer resolves it to the corresponding IP address

• Your browser sends a request to that IP address

• The server processes the request and sends back the appropriate response

• Your browser renders the received data

Before Node.js, web development needed two separate skill sets. Frontend developers used JavaScript for building user interfaces, while backend developers used different languages like Java, Python, or PHP for server-side work. This created a clear gap between client-side and server-side development.

Node.js changed that. It allowed JavaScript developers to write both frontend and backend code using the same language. This led to full-stack development and popular stacks like MEAN (MongoDB, Express, Angular, Node) and MERN (MongoDB, Express, React, Node).

What is an IP Address?

An IP address (Internet Protocol Address) is a unique number assigned to every device connected to the internet.

It acts like a digital address, helping data find the right destination.

Each section of an IPv4 address is called an octet, and together they form a 32-bit number.

What is the V8 Engine?

While you might assume Node.js is written in JavaScript, it's actually built using C++. This raises an important question: how can a C++ application execute JavaScript code?

What makes this possible is the V8 JavaScript engine, created by Google for the Chrome browser. It’s written in C++ and is designed to run JavaScript quickly and efficiently.

One of its best features is that it can be embedded into any C++ application. Node.js uses this feature to include V8 inside it, allowing JavaScript to run outside the browser.

The process works like this:

1. You write JavaScript code

2. Node.js (a C++ application) receives your code

3. The embedded V8 engine translates your JavaScript into machine code

4. Your computer executes the resulting machine code

ECMAScript and JS Engines

JavaScript engines like V8 (Chrome), SpiderMonkey (Firefox), Chakra (Microsoft), and JavaScriptCore (Safari) all follow a standard called ECMAScript.

ECMAScript is like a rulebook. It defines how JavaScript should behave, so that your code runs the same way across different browsers and environments.

But here’s the catch: engines like V8 only run core JavaScript. They can’t do things like:

• Connect to a database

• Read or write files

• Make server-side API calls

That’s where Node.js comes in.

Node.js uses V8 at its heart, but also gives it extra abilities — like file system access, network requests, and databases. This mix of V8 + extra powers is what makes Node.js a runtime.

How V8 Brings Your Code to Life

V8 itself is written in C++. When you write JavaScript, it doesn’t stay in that form. V8 translates your code into machine code and assembly code, which your computer’s CPU can actually understand.

So, the flow looks like this:

1. You write JavaScript (high-level, human-friendly).

2. V8 converts it into machine instructions (low-level).

3. The CPU executes those instructions.

What is Low-Level Code?

Low-level code is closer to the hardware and gives direct control over system resources.

• Machine Language → The most basic form, just 0s and 1s. The CPU executes it directly.

• Assembly Language → A small step above machine code. Uses short mnemonics (like MOV, ADD) to represent operations, but still maps directly to machine instructions.

Thanks to V8, we don’t need to write machine or assembly code ourselves. We just write JavaScript, and V8 does the heavy lifting behind the scenes.What is a JavaScript Runtime?

What is a JavaScript Runtime?

A JavaScript Runtime is basically two things combined:

• A JavaScript engine (like V8)

• Plus extra features that let it work outside the browser

Inside the browser, your JavaScript can only do things like manipulate the DOM or handle user events. It can’t directly access files on your computer or talk to a database.

Node.js changes that. Along with the V8 engine, it provides built-in modules and libraries such as:

• File system modules (to read and write files)

• Network libraries (to handle HTTP requests)

• Server APIs (to build servers easily)

• Database connectors (to store and retrieve data)

So the formula becomes:

JavaScript Runtime = V8 + Node.js APIs

This combination is what makes Node.js so powerful. It takes the speed of the V8 engine and adds the tools needed for real-world backend applications.

Let’s Write Some Code

Now that we understand what Node.js is and how it works, let’s write and run our first program.

Step 1: Install Node.js

Go to the official Node.js website and download the installer for your operating system:

https://nodejs.org/en

Step 2: Verify Installation

After installation, open your terminal and type:

node -v
npm -v

• node -v shows the installed Node.js version.

• npm -v shows the installed NPM (Node Package Manager) version.

If both return version numbers, Node.js has been installed successfully.

Step 3: Try the Node REPL

Type node in your terminal. This opens the REPL (Read-Evaluate-Print Loop) where you can run JavaScript interactively.

For example:

> let x = 10;
> let y = 15;
> x + y
25

The REPL is useful for quick tests, but writing everything here is not practical. Let’s move to a proper editor.

Step 4: Write Code in VS Code

1. Create a new folder on your computer (for example, my-node-project).

2. Open the folder in Visual Studio Code (VS Code).

3. Create a file named app.js.

4. Write the following code:\

    let name = "My First Node App";
    let a = 5;
    let b = 10;
    let c = a + b;
   
    console.log(name);
    console.log("Sum is:", c);
   

5. Open the terminal in VS Code:

   • On Windows/Linux: Ctrl + Shift + `

   • On macOS: Command + Shift + `

6. Run the program:

    node app.js
   

   Output:

    My First Node App
    Sum is: 15
   

Global Objects in Node.js

In the browser, the global object is window.

In Node.js, the global object is called global.

Example:

console.log(global);

This will show methods like setTimeout, setInterval, and more.

Important note:

console.log(this); // {}

At the top level in Node.js, this does not refer to the global object.

What is globalThis?

To solve these differences across environments, ECMAScript 2020 introduced globalThis.

• In browsers, globalThis refers to window.

• In Node.js, globalThis refers to global.

This gives us one consistent way to access the global object, no matter where our JavaScript code is running.

Conclusion

JavaScript started as a language for browsers, but with Node.js, it expanded to the server side as well.

The V8 engine made it possible to run JavaScript outside the browser, while Node.js added the runtime features needed for real applications.

Now, developers can use a single language for both frontend and backend, making JavaScript truly universal.

From understanding servers and IP addresses to writing your first Node.js program, this is the foundation of JavaScript on the server.

In the next step, you can explore how the Node.js event loop works and how NPM helps manage packages.

Want More…?

I write articles on blog.devwithjay.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

Today, JavaScript runs on servers, desktops, mobile apps, and even smart TVs. But it wasn’t always like this. Before Node.js, JavaScript was just a browser language.

Node.js changed that. It gave JavaScript the power to run outside the browser and opened up a whole new world for developers.

But where did it all begin? Who made it? Why was it created? Let’s explore the story of how Node.js started and made JavaScript more powerful than ever

What is Node.js?

Node.js is a JavaScript runtime environment built on Chrome’s V8 engine (the engine that runs JavaScript in Google Chrome). It allows developers to run JavaScript outside the browser—on servers, desktops, or even IoT devices like smartwatches.

A few things to know about Node.js:

• Built on V8 (Chrome’s JavaScript engine)

• Created in 2009 by Ryan Dahl

• Supports asynchronous (non-blocking) I/O

• Maintained by the OpenJS Foundation

• Lets you build servers, APIs, and more using JavaScript

Why was Node.js Created?

Before Node.js, developers used Apache HTTP Server for creating web servers. Apache was powerful but had a problem—it was blocking.

Blocking means if one user sends a request, the server waits until it’s handled before responding to the next one. This could slow things down when many users accessed a website at the same time.

Ryan Dahl had a simple thought:

“Why can’t we make servers that don’t wait around? What if JavaScript could handle multiple requests at once, without blocking anything?”

He imagined a system that worked like a modern restaurant — where the kitchen handles many orders in parallel instead of one at a time.

That idea led to Node.js.

The Early Days

• In 2009, Ryan Dahl started building Node.js.

• He first experimented with SpiderMonkey, the JavaScript engine used in Firefox.

• But just two days in, he found it limiting.

  

• He switched to Google’s V8 engine, which was faster and compiled JavaScript into machine code.

• That made V8 the perfect choice for a fast and scalable JavaScript runtime.

From Web.js to Node.js

• Ryan originally named the project Web.js, because he built it to serve web pages.

• But as he developed it further, he realized it had much bigger potential, it wasn’t just limited to websites.

• So, he renamed it to Node.js, because it could act as a single “node” in a larger network of tools, services, and apps.

The Role of Joyent

• Ryan was working solo until a company called Joyent noticed his work.

• Joyent offered to fund the project and bring it under their wing.

  

• This helped Node.js grow faster and gain more visibility.

Enter NPM (Node Package Manager)

• In 2010, Node.js got a major boost: npm was launched.

• npm is a package manager that made it easy to install and share reusable code.

• Want to work with dates? Build a web server? Connect to a database? There’s an npm package for it.

• Today, npm is the world’s largest software registry with millions of packages, and it was one of the biggest reasons behind Node.js’s success.

Growing Beyond macOS & Linux

• Node.js was first built for macOS and Linux only.

• But in 2011, with help from Microsoft, Node.js got support for Windows too.

• This made Node.js available to an even larger group of developers and allowed it to run on nearly every platform.

Leadership Changes

• In 2012, Ryan stepped away from the project.

• Maintenance of Node.js was taken over by Isaac Z. Schlueter, who also created npm.

• But over time, updates to Node.js became slower, and some developers in the community felt it wasn’t evolving fast enough.

The io.js Fork

• In 2014, a developer named Fedor forked Node.js and started a new project called io.js.

• It was meant to move faster, with more frequent updates and open community governance.

  

• Many developers joined io.js because they wanted quicker improvements and more transparency.

Reuniting the Community

• The split didn’t last long.

• In September 2015, both teams agreed to merge io.js and Node.js back into a single project.

• This led to the creation of the Node.js Foundation, an independent group responsible for maintaining Node.js going forward.

The OpenJS Foundation

• In 2019, the Node.js Foundation merged with the JS Foundation (which managed other JavaScript projects like jQuery, ESLint, etc.).

• The result was the OpenJS Foundation, a community-driven organization that now oversees Node.js and several other JavaScript projects.

• Today, this foundation ensures Node.js continues to grow in a healthy and open way.

Summary Timeline

Conclusion

Node.js changed how we write JavaScript. It brought JavaScript to the server, allowed developers to write full-stack apps in one language, and made building modern tools and apps much simpler.

Today, it powers tools like Webpack, React CLI, Express, and even backend systems for companies like Netflix, PayPal, and LinkedIn.

Node.js taught the world that JavaScript isn’t just for the browser anymore — it’s for everywhere.

Want More…?

I write articles on blog.devwithjay.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

In JavaScript, Arrays and Sets are both used to store collections of values, but they serve different purposes and have distinct characteristics. While Arrays allow you to store ordered collections and can contain duplicate values, Sets are designed to store unique values and automatically remove duplicates.

In this article, we’ll understand the differences between Arrays and Sets, their performance characteristics, and practical use cases where each is most effective.

What is a Set?

A Set is a special type of collection in JavaScript that stores unique values only. Unlike arrays or objects, a Set doesn’t use keys, and it doesn’t allow duplicate values.

Sets can store values of any type: strings, numbers, objects, or even other Sets. They’re useful when you want to keep a list of items without duplicates, such as a list of unique user IDs, selected tags, or visited pages.

Creating A Set

In JavaScript, a Set can be created using the Set constructor.

1. Creating an Empty Set

    let mySet = new Set();
   

   This creates a Set that doesn’t contain any values.

2. Creating a Set with Initial Values

   You can also create a Set and initialize it with values by passing an array or another iterable to the constructor:

    let mySet = new Set([1, 2, 3, 4, 5]);
   

   This creates a Set with the values 1, 2, 3, 4, 5.

3. Adding Values to a Set

   You can add individual values to a Set using the .add() method:

    let mySet = new Set();
    mySet.add(1);
    mySet.add(2);
    mySet.add(3);
   

Methods & Properties

1. new Set([iterable]) – Creates a Set. If an iterable object (usually an array) is provided, it copies the values from it into the Set.

2. set.add(value) – Adds a value to the Set. It returns the Set itself. If the value already exists in the Set, it does nothing (i.e., Sets only store unique values).

3. set.delete(value) – Removes the specified value from the Set. It returns true if the value existed at the moment of the call, and false otherwise.

4. set.has(value) – Returns true if the specified value exists in the Set, and false otherwise.

5. set.clear() – Removes all elements from the Set.

6. set.size – Returns the number of elements in the Set.

The main feature of a Set is that repeated calls to set.add(value) with the same value don’t add the value again. This ensures that each value appears in a Set only once.

Example:

const set = new Set([1, 2, 2, 3]);
console.log([...set]); // [1, 2, 3]

Chaining Methods

Just like with Maps, you can chain multiple method calls together for cleaner and more concise code when working with Sets.

let userSet = new Set()
  .add('Jay')
  .add(20)
  .add('developer');

Iteration Over Set

You can loop over a Set using either the for...of loop or the forEach() method.

1. Using for...of Loop

    let set = new Set(["oranges", "apples", "bananas"]);
   
    for (let value of set) {
      alert(value);
    }
   

2. Using forEach() Method

   You can also use set.forEach() to iterate over the values in a Set. The callback function passed to forEach() takes three arguments:

    set.forEach((value, valueAgain, set) => {
      alert(value);
    });
   

   • value: The current value of the Set.

   • valueAgain: This is the same value as value. It is included for compatibility with Map, where the callback also receives three arguments.

   • set: The Set object itself.

This might seem odd because the value appears twice, but it’s there for consistency with the Map object, which uses three arguments in its forEach() method.

Additional Methods for Iterating

Like Map, the Set object also supports the following iterator methods:

• set.keys() – Returns an iterable for the values in the Set (same as set.values()).

• set.values() – Same as set.keys() for compatibility with Map.

• set.entries() – Returns an iterable for entries [value, value]. This exists for compatibility with Map.

These methods are useful if you want to work with specific parts of a Set, similar to how they are used in a Map.

Array to Sets

Normally, when you create an array, it can contain duplicate values. But sometimes, you may want to remove duplicates from an array, and this is where Sets come in handy, as they only store unique values.

To convert an array into a Set, you can pass the array directly into the Set constructor.

let array = [1, 2, 3, 3, 4, 5, 5];
let set = new Set(array);

console.log(set); // Set { 1, 2, 3, 4, 5 }

Set to Array

Converting a Set back to an Array is just as easy. You can use the Array.from() method or the spread operator (...) to convert a Set into an array.

Using Array.from():

let set = new Set([1, 2, 3, 4, 5]);
let array = Array.from(set);

console.log(array); // [1, 2, 3, 4, 5]

Using Spread Operator:

let array = [...set];
console.log(array); // [1, 2, 3, 4, 5]

Why Convert Set to Array?

You might want to convert a Set back to an Array in cases where:

• You need to work with array-specific methods like .map(), .filter(), or .reduce().

• You need to pass data to a function that expects an array.

Performance Benefits of Sets

1. Fast Lookups: Sets allow quick checks to see if a value exists. The time to check if an item is in a Set is constant (O(1)), making it faster than arrays or objects, especially when dealing with a large number of values.

2. Unique Values: Sets automatically ensure that all values are unique. You don’t need to manually check for duplicates, which saves time and reduces the complexity of your code.

3. Efficient Memory Usage: Since Sets only store unique values and don’t store duplicate entries, they use memory more efficiently than arrays when managing large collections of data.

4. No Need for Indexing: Unlike arrays, Sets don’t rely on indexing. This can make operations like checking for the presence of an item faster and easier, without the overhead of index management.

5. Order Preservation: Just like Maps, Sets maintain the order of items as they are added. This allows for predictable iteration when looping through the Set.

Practical Applications of Sets

1. Removing Duplicates: Automatically remove duplicates from a list, like user IDs or tags.

2. Tracking Visited Pages: Store URLs of visited pages without repeats.

3. Managing Permissions: Track unique user permissions or actions, like ‘edit’ or ‘view’.

4. Unique Items Collection: Keep a collection of unique items, like feedback or tags.

Real-World Examples

1. Unique Tags on a Blog: On a blog, you might want to track tags that have been used across posts. A Set can store each tag as a unique value, automatically removing duplicates, so you don’t repeat tags.

2. Tracking Visited Websites: If you’re building a browser extension that tracks visited websites, a Set can be used to store each URL only once. When the user visits a new site, you can check if it’s already in the Set before adding it.

3. Membership List: A Set can be used to store unique membership IDs of users in a club or organization. This ensures no duplicate memberships and allows fast checks to see if someone is a member.

Differences Between Arrays and Sets

This comparison highlights the differences between arrays and sets, making it easier to choose the appropriate data structure based on the requirements of your project.

When To Use Sets

Choose Sets when you need:

• A collection of unique values with no duplicates.

• Automatic removal of duplicates when adding new values.

• Fast checks to see if a value exists in the collection.

Conclusion

In conclusion, Arrays are great when you need to keep things in a specific order or when duplicates are okay. On the other hand, Sets are perfect for storing unique items and checking quickly if something is already there, without worrying about duplicates.

By understanding these differences, you can choose the right data structure for your needs and write cleaner, more efficient code.

Want More…?

I write articles on blog.devwithjay.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

In JavaScript, we usually use Objects to store key-value pairs, where the keys are strings or Symbols. Map, however, allow you to use any type of key, like numbers, objects, or functions, and they also remember the order in which the items are added.

In this article, we understand the differences between Objects and Maps, their performance, and practical use cases.

What is a Map?

A Map is a special type of object in JavaScript that stores data in key-value pairs. Similar to an object, but with a few differences. In a Map, the keys can be of any type—not just strings. You can use numbers, objects, or even functions as keys.

Maps also remember the order in which the items were added. This means when you loop through a Map, you get the items in the same order you put them in.

Creating A Map

To create a Map in JavaScript, you use the Map constructor. It allows two main ways to create a Map:

1. Passing an Array to new Map()

   • You can create a Map by passing an array of key-value pairs directly into the constructor.

   • Each key-value pair is represented as an inner array with two elements.

   • Example:

       const user = new Map([
         ['name', 'Jay'],
         ['age', 18],
         ['city', 'Pune']
       ]);
     

2. Creating a Map and Using .set() Method

   • Alternatively, you can create an empty Map and add key-value pairs one by one using the .set() method.

   • Example:

       const user = new Map();
     
       user.set('name', 'Jay');
       user.set('age', 18);
       user.set('city', 'Pune');
     

   • This approach gives you more flexibility, especially when the values are dynamic or coming from different sources.

Methods & Properties

1. new Map() - Creates a new, empty Map.

2. map.set(key, value) - Adds a key-value pair to the Map. If the key already exists, it updates the value.

3. map.get(key) - Returns the value associated with the given key. If the key doesn’t exist, it returns undefined.

4. map.has(key) - Checks if a key exists in the Map. Returns true if found, otherwise false.

5. map.delete(key) - Removes the key-value pair for the given key from the Map.

6. map.clear() - Removes all key-value pairs from the Map.

7. map.size - Returns the total number of key-value pairs in the Map.

How Does Map Compare Keys?

When checking if a key already exists, Map uses an internal algorithm called SameValueZero to compare keys.

This is very similar to the strict equality operator (===), but with one difference:

• In strict equality (===), NaN === NaN is false.

• In SameValueZero, NaN is considered equal to NaN.

This means you can use NaN as a key in a Map, and it will work as expected.

It’s also important to know that this comparison method is built-in and cannot be changed or customized.

Chaining Methods

You can chain multiple methods together for cleaner code:

let userMap = new Map()
  .set('name', 'Jay')
  .set('age', 20)
  .set('role', 'developer');

Iteration Over Map

Map allows several ways to loop through its elements. Since it keeps items in the order they were added, you get predictable results when looping.

1. map.keys() - Returns an iterable of all keys in the Map.

2. map.values() - Returns an iterable of all values in the Map.

3. map.entries() - Returns an iterable of [key, value] pairs. This is also the default when using for...of.

Example:

let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 300],
  ['coriander', 50]
]);

// iterate over keys (vegetables)
for (let vegetable of recipeMap.keys()) {
  alert(vegetable); // cucumber, tomatoes, coriander
}

// iterate over values (amounts)
for (let amount of recipeMap.values()) {
  alert(amount); // 500, 300, 50
}

// iterate over [key, value] entries
for (let entry of recipeMap) { // the same as of recipeMap.entries()
  alert(entry); // cucumber,500 (and so on)
}

Using map.forEach()

The Map object also includes a forEach() method that works just like it does for arrays:

recipeMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 etc
});

Map From Object

Normally, when we create a Map, we pass an array (or any iterable) of key-value pairs to initialize it. For example:

let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);

But, if you already have a plain JavaScript object and want to convert it into a Map, you can use the built-in method Object.entries(obj).

The Object.entries() method returns an array of [key, value] pairs — exactly what Map needs for initialization.

Example:

let obj = {
  name: "Jay",
  age: 20
};

let map = new Map(Object.entries(obj));

Now map behaves like a proper Map object, and you can use all the Map methods:

map.get('name'); // Returns: "Jay"
map.has('age');  // Returns: true

Object From Map

Just like we can create a Map from a plain object using Object.entries(obj), we can also do the reverse—convert a Map back into a plain object.

This is useful when:

• You store data in a Map (for features like non-string keys or maintaining order),

• But need to pass that data to a function or third-party library that only accepts plain JavaScript objects.

The method Object.fromEntries() takes an iterable of key-value pairs and converts it into a plain object.

Example:

let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('watermelon', 4);

// Convert Map to Object
let obj = Object.fromEntries(map.entries());

console.log(obj.orange); // Output: 2

You can also write it more simply by skipping .entries():

let obj = Object.fromEntries(map);

This works because Map is already iterable and returns key-value pairs by default when looped over.

Performance Benefits of Maps

1. Quick Access: Maps allow you to quickly access values using keys, with lookup times being constant (O(1)). This makes them much faster than objects, especially when you’re working with large amounts of data.

2. Flexible Keys: Unlike objects, which only allow strings or symbols as keys, Maps can use any type of data as a key—such as numbers, objects, or even functions. This gives you more flexibility when working with complex data.

3. Maintains Insertion Order: Maps remember the order in which items are added. This ensures that when you loop through the Map, you’ll get the values in the exact order they were inserted, making iteration more predictable.

4. No Prototype Conflicts: Since Maps don’t have a prototype chain (unlike objects), there’s less chance of conflicts with inherited properties. This makes your code cleaner and avoids potential issues.

5. Efficient Memory Use: Maps are designed specifically for storing key-value pairs, which means they use memory more efficiently compared to objects, especially when handling large sets of data.

Practical Applications of Maps

1. Caching Data: Use Maps to store frequently accessed data for quick retrieval, like API responses.

2. Configuration Settings: Store settings or options where each setting has a unique key.

3. Tracking Relationships: Use Maps to link items, such as users and their profiles or products and prices.

4. Data Grouping: Group items by a property, like categorizing books by genre.

Real-World Examples

1. User Profile Data: Imagine a website where each user has a profile. You could use a Map to store user information, where the key is the user’s unique ID, and the value is their profile data (name, age, location, etc.).

2. Inventory System: In an online store, a Map could be used to link product IDs (keys) with product details (values), such as product name, description, and price. This allows for fast lookups when a user searches for a product.

3. Student Grades: A Map can be used in schools to store student names (keys) and their corresponding grades (values). For example, the key “Jay” maps to the grade “A”, and the key “Nikhil” maps to the grade “B”.

Differences Between Objects and Maps

When To Use Maps

Choose Maps when you need:

• Key-value pairs where the keys can be of any type (e.g., strings, numbers, objects).

• Fast and efficient lookups for accessing data.

• Ordered entries that maintain the insertion order.

Conclusion

Maps in JavaScript are great for storing collections of data as key-value pairs. They are useful when you need to associate one item with another, like linking a name to an age. By knowing when and how to use Maps, you can write cleaner and more efficient code.

Want More…?

I write articles on blog.devwithjay.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn