Network Devices Explained Simply

JavaScript Map & Set: Modern Data Structures Explained ╰(°▽°)╯

Mayur Mirgale — Thu, 26 Mar 2026 10:56:30 GMT

In your first few months of learning JavaScript, you rely on two trusty tools for storing data: the Array [] and the Object {}. They are the duct tape and WD-40 of web development.

But as you transition into building professional, scaleable applications, you’ll start hitting their limitations.

Early in my career, I was building a feature to track which DOM elements a user had clicked on to generate an analytics heat map. I tried to use a standard Object, using the HTML elements themselves as the "keys." It failed miserably. Every element I added just overwrote the previous one because JavaScript was converting all my HTML nodes into the exact same string: "[object Object]".

If I had known about Maps and Sets, I would have saved myself two days of debugging.

It’s time to upgrade your toolkit. Let’s look at the modern, specialized data structures introduced in ES6, and exactly when you should use them over traditional Arrays and Objects.

1. The `Set`: The Uniqueness Enforcer

The Problem with Arrays

Arrays are fantastic for ordered lists. But what happens when you need to ensure every item in that list is completely unique?

Imagine you are building an e-commerce filter, and you are extracting "categories" from a list of 1,000 products. If you use an Array, you'll end up with 400 "Electronics" tags and 600 "Clothing" tags. Historically, filtering out those duplicates required writing clunky loops or .reduce() functions.

Enter the `Set`

A Set is a collection of values where each value may occur only once. It is the ultimate bouncer for your data.

If you try to add a duplicate value to a Set, it simply ignores it. No errors, no fuss.

JavaScript

// ❌ The Old Way: Complex Array Filtering
const rawTags = ["react", "node", "react", "css", "node"];
const uniqueTagsOld = rawTags.filter((item, index) => rawTags.indexOf(item) === index);

// ✅ The Senior Way: Using a Set
const uniqueTagsNew = [...new Set(rawTags)]; 
// Output: ["react", "node", "css"]

Notice how we used the Spread operator (...) from our previous article to instantly unpack the Set back into a standard Array!

Difference Between Set and Array

Duplicates: Arrays allow them; Sets strictly forbid them.
Searching: Checking if an item exists in a massive Set using mySet.has(value) is significantly faster than searching an Array with myArray.includes(value).
Access: You cannot access Set items by an index number (e.g., mySet[0] does not work).

When to use a Set: Whenever you need to maintain a unique list of items (user IDs, tag names, active filters) or when you need lightning-fast "does this exist?" lookups.

2. The `Map`: The Ultimate Dictionary

The Problem with Objects

Objects are the default way we store key-value pairs. However, traditional Objects have a massive structural flaw: Object keys must be Strings (or Symbols). If you try to use a number, an array, or another object as a key, JavaScript will silently convert it into a string. This is exactly what caused my analytics bug years ago. Furthermore, finding the "size" of an object is annoying (Object.keys(obj).length), and objects don't always iterate in the exact order you created them.

Enter the `Map`

A Map is a pure, specialized key-value data structure. Its superpower? Absolutely anything can be a key.

You can use an entire user object as a key to store their specific session data, without mutating the original user object!

JavaScript

const userJohn = { name: "John Doe", id: 101 };
const userJane = { name: "Jane Smith", id: 102 };

// 1. Create the Map
const userSessionData = new Map();

// 2. Set data: The KEY is the actual object, the VALUE is the session string
userSessionData.set(userJohn, "Session active: 45 mins");
userSessionData.set(userJane, "Session active: 12 mins");

// 3. Retrieve data using the object reference
console.log(userSessionData.get(userJohn)); 
// Output: "Session active: 45 mins"

// 4. Getting the size is built-in and instant
console.log(userSessionData.size); // Output: 2

Difference Between Map and Object

Key Types: Object keys are Strings/Symbols. Map keys can be anything (Arrays, Functions, Objects, DOM Elements).
Size: Maps have a built-in .size property. Objects require manual calculation.
Iteration: Maps are guaranteed to maintain the exact insertion order of their keys, making them highly predictable to loop over.
Performance: Maps are highly optimized for scenarios involving frequent additions and removals of key-value pairs.

When to use a Map: When your keys are not strings at runtime, when you are frequently adding/removing data (like a caching system), or when you need to attach temporary metadata to an object without permanently altering that object.

The Takeaway: Choose the Right Tool

Arrays and Objects are not bad. They are still the backbone of JSON and web data transfer. You will still use them for 80% of your daily tasks.

But engineering is about knowing exactly which tool fits the specific problem.

Need an ordered list? Use an Array.
Need a list of strictly unique items? Use a Set.
Need a static record of data? Use an Object.
Need a dynamic, high-performance dictionary with complex keys? Use a Map.

Stop forcing Arrays and Objects to do jobs they weren't designed for. Master Map and Set, and watch your data architecture become cleaner, faster, and much less prone to bugs.

Simple Explanation of Networking Devices for Beginners

Mayur Mirgale — Mon, 19 Jan 2026 09:30:45 GMT

As developer we often push code to GitHub ,uses chatgpt or multiple operation on internet .we see a single internet connection support 50 device.

A developer works on application layer But underneath our application layer sits a complex, physical, and highly organized world of hardware is present which consists of component.

These component are Know as Network component. In These article we will breaks down the core network component — Modem, Router, Switch, and Firewall ,Switch vs. Hub: How Local Networks Work, Firewall, Load Balancer.

The High-Level Flow: Internet to Device: Before diving in, here is the path of data from the Internet to your laptop:

Internet → Modem → Router → Switch → Devices / Servers

1. What is a Modem?

Definition: A Modem is a postal service clerk who translates letters from a foreign language into your native language.

- Role: The Modulator-Demodulator (Modem) connects your local network to your Internet Service Provider (ISP).
  - How it Works: The internet reaches your home through analog signals (via phone lines, fiber optic, or coaxial cable). Your computer uses digital (binary) language. The modem converts (demodulates) analog signals from the ISP into digital data, and also converts (modulates) digital data back into analog signals.
  - The Key Point: It connects only one device (or a Router) to the internet.
```
  Computer → [Digital Data]
            ↓
        Modulation
            ↓
     Analog Signal ~~~~~~~
            ↓
       Transmission
            ↓
     Analog Signal ~~~~~~~
            ↓
       Demodulation
            ↓
  Computer → [Digital Data]
```

2. What is a Router?

Definition: A router act as Traffic Police Officer at a busy intersection directing cars (packets) to their specific destinations.

Role: Connects multiple networks together (e.g., your home LAN to the internet WAN) and directs data packets.
How it Works: A router takes the single IP address assigned by your ISP to your modem and shares it with multiple devices in your home/office. It maintains a routing table to determine the best path for data, ensuring your Netflix request doesn't end up on your printer.

Key Features: It manages local IP addresses (DHCP) and usually includes a built-in NAT (Network Address Translation) firewall to protect internal devices.

  Data Packet
  [ Source IP | Destination IP | Data ]
              │
              ▼
          ┌─────────┐
          │ ROUTER  │  → Checks Destination IP
          └─────────┘
              │
       Selects Best Path
              │
              ▼
       Forwards Packet

3. Switch vs. Hub: How Local Networks WorkAnalogy:

Hub: A megaphone. Everyone hears everything, even if it's not for them.
Switch: A receptionist. She knows exactly which person needs which document and hands it directly to them.

Hub (Dumb Repeater)

Receives data and broadcasts it to all connected devices, regardless of who it is for.
Causes high traffic congestion and collisions (half-duplex).
Hardly used today.

Switch (Intelligent Communicator)

Learns the MAC address of every device connected to it and sends data only to the intended device.
Provides dedicated bandwidth to each port (full-duplex).
This is the standard for local networking.
Key takeaway: Use a switch to connect wired devices (desktop, NAS) together in a LAN.

4. What is a Firewall? The Security

Definition: A security guard at a gated community inspecting IDs and allowing only authorized guests in.

Role: Monitors and controls incoming/outgoing network traffic based on security rules.
Why it Matters: Without a firewall, any server or computer is exposed to the entire internet, making it easy for hackers, bots, and malware to gain unauthorized access.

Placement: Usually resides at the edge of the network (between the Modem and Router) or is integrated into the router itself.

  Data Packet
  [ Source IP | Destination IP | Port | Protocol ]
                       │
                       ▼
                  ┌────────┐
                  │Firewall│
                  └────────┘
            ┌──────────┴──────────┐
        Allowed (✔)           Blocked (✖)
          │                         │
          ▼                         ✘
     Internal Network          Dropped

5.What is a ? The Traffic Splitter

Definition: A receptionist in a busy restaurant managing a long line of customers, directing them to the next available table (server).

Role: Distributes incoming network traffic across multiple servers to ensure high availability and reliability.
Why Scalable Systems Need It: Without it, a single server would be overwhelmed by high traffic, leading to downtime. Load balancers ensure no single server bears too much load.

Types:

Layer 4 (Transport): Based on IP address and port (TCP/UDP).

Layer 7 (Application): Based on HTTP content (URL, cookies, headers).

  Client Request
        │
        ▼
   ┌──────────────┐
   │ Load Balancer│ → Chooses least busy / next server
   └──────────────┘
        │
        ▼
   Server Response → Back to Client

6. Real-World Setup: Putting It All Togethe

devices work in a chain:

graph LR
    Internet((Internet)) --> Modem[Modem]
    Modem --> FW[Firewall]
    FW --> Router[Router]
    Router --> LB[Load Balancer]
    LB --> Switch[Switch]
    Switch --> Server1[Server A]
    Switch --> Server2[Server B]
    Switch --> Server3[Server C]

The Scenario: A user requests

Request: User hits the public IP (via Firewall/Load Balancer).
Edge: The Router/Firewall checks if the request is safe.
Distribution: The Load Balancer looks at available servers (A, B, or C).
Delivery: The Switch delivers the request to Server B.
Response: Server B sends data back down the same.