Forem: Mahmudul Fahim

🗺️ JavaScript Map, Set, WeakMap & WeakSet — The Complete Guide

Mahmudul Fahim — Sun, 08 Feb 2026 20:03:36 +0000

If you’re serious about modern JavaScript, you must understand
Map, Set, WeakMap, and WeakSet.

They solve real problems that Object and Array couldn’t — especially around performance, memory, and data safety.

🟦 Map()
✅ What is Map?

Map is a built-in JavaScript data structure that stores key–value pairs, just like objects, but way more powerful.

const user = new Map([
  ['name', 'md fahim'],
  ['age', 22],
  [99, true],
]);

🤔 Why does Map exist?

Objects had limitations:

❌ Keys were mostly strings
❌ Order wasn’t guaranteed (older JS)
❌ No easy way to know the size

Map fixes all of that.

🔑 Core Map Methods

// Add or update
user.set('country', 'Bangladesh');
user.set('age', 23);

// Get value
user.get('name'); // 'md fahim'
user.get(99);     // true

// Check existence
user.has('email'); // false

// Delete key
user.delete(99);

// Clear all
user.clear();

// Size
user.size;

🔁 Looping Through a Map
✅ for...of (BEST)

for (const [key, value] of user) {
  console.log(key, value);
}

keys()

for (const key of user.keys()) {
  console.log(key);
}

values()

for (const value of user.values()) {
  console.log(value);
}

entries() (default)

for (const [key, value] of user.entries()) {
  console.log(key, value);
}

forEach()

user.forEach((value, key) => {
  console.log(key, value);
});

⚠️ Order is (value, key) — opposite of Object

🧠 Important Rule: Keys Are Compared by Reference

const obj = { id: 1 };

const map = new Map();
map.set(obj, 'data');

map.get({ id: 1 }); // ❌ undefined
map.get(obj);       // ✅ 'data'

❌ Common Map Mistakes
❌ Dot notation

user.name // ❌

✅ Correct

user.get('name');

❌ This won’t work

user.keys().forEach(); // ❌

✅ Do this

for (const key of user.keys()) {}

🔄 Convert Between Map & Object
Map → Object

const obj = Object.fromEntries(user);

Object → Map

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

Map → Array

console.log([...map]);
console.log(Array.from(map));

🟩 Set()
✅ What is Set?

A Set stores unique values only.

const numbers = new Set([1, 2, 3, 3, 4]);
console.log(numbers); // {1,2,3,4}

🔑 Core Set Methods

set.add(1);
set.has(1);     // true
set.delete(1);
set.clear();
set.size;

🔁 Looping a Set
for...of (BEST)

for (const value of set) {
  console.log(value);
}

forEach()

set.forEach(value => {
  console.log(value);
});

values() / keys()

set.values();
set.keys(); // same as values

🧠 How Set Checks Uniqueness
Primitive values

new Set([1, 1, '1']); // {1, '1'}

Objects (REFERENCE-based)

const a = { x: 1 };
const b = { x: 1 };

const set = new Set([a, b]);
console.log(set.size); // 2

❌ Common Set Mistakes

set[0]; // ❌ undefined

✔ Sets are not indexed

🔥 Real-Life Use Cases
Remove duplicates

[...new Set([1,2,2,3])];

Fast permission check

const roles = new Set(['admin', 'editor']);
roles.has('admin');

🟨 WeakMap()
🧠 Mental Model

“This data belongs to the object.
If the object dies, the data should die too.”

Rules

✔ Keys must be objects
✔ Weakly referenced
✔ Auto garbage collection
❌ No iteration

Example: Private Data

const privateData = new WeakMap();

class User {
  constructor(name, password) {
    privateData.set(this, { password });
    this.name = name;
  }

  checkPassword(pass) {
    return privateData.get(this).password === pass;
  }
}

🧹 Garbage Collection Magic

let user = { id: 1 };
const wm = new WeakMap();

wm.set(user, 'secret');
user = null; // auto cleanup

🟪 WeakSet()
🧠 Mental Model

“I just want to know if I’ve seen this object before.”

Rules

✔ Objects only
✔ No duplicates
✔ Auto cleanup
❌ No iteration

Example: Tracking Objects

const visited = new WeakSet();

function process(obj) {
  if (visited.has(obj)) return;
  visited.add(obj);
  console.log('Processing...');
}

Mastering the Fetch API with Real‑Life JavaScript Examples

Mahmudul Fahim — Sun, 18 Jan 2026 18:37:38 +0000

If you’re learning JavaScript seriously, the Fetch API is not optional — it’s a core skill for real-world frontend development.

In this post, I’ll walk you through everything I practised in one single playground, including:

GET, POST, PUT, PATCH, DELETE

Handling JSON responses

Using URLSearchParams

Creating reusable requests with new Request()

Aborting requests with AbortController

Simulating file downloads

All examples use the free fake API: https://jsonplaceholder.typicode.com

1️⃣ Creating a User (POST Request)

async function createUser(userData) {
const api_url = 'https://jsonplaceholder.typicode.com/users';


const res = await fetch(api_url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(userData),
});


const data = await res.json();
console.log(data);
}


createUser({
id: crypto.randomUUID(),
name: 'Md Fahim',
email: 'mdfahim@gmail.com',
});

🔹 Real‑life use: Signup forms, admin dashboards, and adding new records.

⚠️ JSONPlaceholder does NOT save data — it only simulates a response.

2️⃣ Fetch Users With Related Data (URLSearchParams)

async function fetchUsersWithPosts() {
const api_url = 'https://jsonplaceholder.typicode.com/users';


const queryParams = { _embed: 'posts' };
const queryString = new URLSearchParams(queryParams).toString();


const res = await fetch(`${api_url}?${queryString}`);
const data = await res.json();
console.log(data);
}


fetchUsersWithPosts();

🧠 What is URLSearchParams?

It converts an object into a valid query string:

{ _embed: 'posts' } → _embed=posts

🔹 Real‑life use: Filtering, pagination, sorting, embedding relations.

3️⃣ Updating Data (PUT vs PATCH)
PUT (Replace Entire Object)

async function putUser(data) {
const res = await fetch('https://jsonplaceholder.typicode.com/users/1', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});


console.log(await res.json());
}

PATCH (Partial Update – Recommended)

async function patchUser(data) {
const res = await fetch(`https://jsonplaceholder.typicode.com/users/${data.id}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});


console.log(await res.json());
}


patchUser({ id: 3, name: 'Alex Smith' });

🔹 Real‑life use: Updating profile info, settings, preferences.

4️⃣ Deleting a User (DELETE)

async function deleteUser(userId) {
const res = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`, {
method: 'DELETE',
});


console.log(await res.json()); // {}
}


deleteUser(5);

✅ Empty object {} is NORMAL for DELETE responses.

5️⃣ Reusable Requests with new Request()

async function adminDashboard(request) {
const res = await fetch(request);
const data = await res.json();
console.log(data);
}

Create Request

const addUser = new Request('https://jsonplaceholder.typicode.com/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'Hamza Chy', email: 'hamza@gmail.com' }),
});


adminDashboard(addUser);

Update Request

const updateUser = new Request('https://jsonplaceholder.typicode.com/users/11', {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'Hamza Chowdhury' }),
});


adminDashboard(updateUser);

Delete Request

const deleteUser11 = new Request('https://jsonplaceholder.typicode.com/users/11', {
method: 'DELETE',
});


adminDashboard(deleteUser11);

🔹 Why use new Request()?

Cleaner architecture

Reusable requests

Middleware‑style patterns

Better for large apps

6️⃣ Aborting Requests with AbortController



async function downloadFile() {
controller = new AbortController();


const res = await fetch('./download/file.txt', {
signal: controller.signal,
});


const blob = await res.blob();
const url = URL.createObjectURL(blob);


const a = document.createElement('a');
a.href = url;
a.download = 'file.txt';
a.click();


URL.revokeObjectURL(url);
}


function abortDownload() {
controller.abort('User cancelled download');
}

🔹 Real‑life use:

Cancel search requests

Stop downloads

Prevent race conditions

🚀 Chrome DevTools Guide for Developers

Mahmudul Fahim — Sat, 23 Aug 2025 12:33:45 +0000

Chrome DevTools is a powerful set of tools built into the Chrome browser that helps developers debug, analyze, and optimize web applications. Here’s a guide to its most essential panels and features.

📌 1. Console

The Console is your playground for debugging JavaScript.

console.log() → Print values for debugging.

console.error() → Show error messages.

console.warn() → Highlight warnings.

console.table() → Display data in a clean table.

Live JavaScript execution: run commands directly in the console.

👉 Tip: Use shortcuts like $_ (last evaluated result) and $0 (currently selected DOM element).

📌 2. Elements

The Elements panel lets you inspect and modify the DOM and CSS in real time.

Inspect HTML elements (Right click → Inspect).

Edit attributes, styles, and test design changes instantly.

See box model details (margin, padding, border).

Hover elements to highlight them visually on the page.

👉 Tip: Use the device toolbar (📱 icon) to test responsive design.

📌 3. Sources

The Sources panel is your in-browser code editor and debugger.

Browse loaded JavaScript, CSS, and images.

Set breakpoints to pause code execution.

Step through code line by line.

Watch expressions and inspect call stacks.

👉 Tip: You can add Workspaces to directly map and edit your local project files.

📌 4. Workspace

Workspaces allow you to connect local project files to Chrome DevTools.

Save changes made in DevTools directly to your project.

Create custom snippets for reusable debugging code.

Sync your development workflow without leaving the browser.

📌 5. Network

The Network tab helps you analyze requests and responses.

Monitor API requests (XHR/fetch).

Check status codes, headers, and payloads.

Measure loading times and bottlenecks.

Simulate slow 3G/4G networks for performance testing.

👉 Tip: Right-click → Copy as cURL to replicate API calls.

📌 6. Performance

The Performance panel lets you profile runtime and page load.

Record and analyze page performance.

See scripting, rendering, and painting timelines.

Identify layout shifts and long tasks.

Optimize JavaScript execution and rendering.

👉 Tip: Use Lighthouse (Audits tab) for automated performance, accessibility, and SEO insights.

🎯 Conclusion

Mastering Chrome DevTools makes you a 10x developer — debugging faster, optimizing smarter, and building with confidence. Start small (console + elements) and grow into advanced tools (network, performance).

💡 Remember: The best developers don’t just code — they inspect, test, and optimize.

JS includes(), slice(), concat(), trim(), split() string methods.

Mahmudul Fahim — Fri, 11 Apr 2025 21:12:03 +0000

includes():

method returns true if a string contains a specified string. Otherwise, it returns false. The includes() method is case-sensitive.

let text = "Hello world, welcome to the universe.";
text.includes('world') // true

slice():

extracts a part of a string. return the extracted part in a new string. doesn’t change the original string. The start and end parameters specify the part of the string to be extracted. position index starts with 0. A negative number is selected from the end.

let txt = 'Hello world';
txt.slice(0, 5) // 'Hello'
txt.slice(7,10) // 'orl'
txt.slice(-1) // 'd'

concat():

method is used to combine two or more strings into one single new string. It does not modify the original strings. It returns a new string containing the text of the joined strings.

const str1 = 'Hello';
const str2 = 'World';

console.log(str1.concat(' ', str2)) // Hello World

trim():

method removes whitespace from both ends of a string.

const txt = '    hello world    ';
txt.trim() // 'hello world'

split():

method divides a string into an array of substrings based on a specified separator (like space, comma, etc.)

Returns a new Array.
Doesn’t change the original array.

const txt = 'Hello World';
txt.split('') // ['H', 'e', 'l', 'l', ' ', 'W', 'o', 'l', 'd']
txt.split(' ') // ['Hello', 'World']
txt.split('o') // ['Hell', ' W', 'rld']
const txt2 = 'apple, banana, orange';
txt2.split(',', 2); // ['apple', 'banana']

JS Object.freeze(), Object.seal() methods

Mahmudul Fahim — Wed, 02 Apr 2025 20:06:13 +0000

Object.freeze()

is a method that prevents modifications to an object. Once an object is frozen.

✅ You cannot add new properties.
✅ You cannot modify existing properties.
✅ You cannot delete properties.

const user = {
  name: "Alice",
  age: 25
};

Object.freeze(user);

user.age = 30;  // ❌ Won't change
user.city = "New York"; // ❌ Won't add
delete user.name; // ❌ Won't delete

console.log(user); 

// output: { name: "Alice", age: 25 }

👉 It only works on the first level. It does not freeze nested objects.

Object.seal()

is a method that prevents adding or deleting properties from an object but allows modification of existing properties.

const user = {
  name: "Alice",
  age: 25
};

Object.seal(user);

user.age = 30;  // ✅ Allowed (modification works)
user.city = "New York"; // ❌ Not allowed (new property won't be added)
delete user.name; // ❌ Not allowed (deletion won't work)

console.log(user); 

// output: { name: "Alice", age: 30 }

📌 Summary:

Feature Object.seal() | Object.freeze()
Modify properties = ✅ Yes ❌ No
Add new properties = ❌ No ❌ No
Delete properties = ❌ No ❌ No

JS Object.assign(), Object.create(). Object.defineProperties() Methods.

Mahmudul Fahim — Thu, 27 Mar 2025 20:25:12 +0000

Object.assign() -

The Object.assign() method copies properties from one or more source objects to a target object.

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

console.log(obj1, obj2)

// output: 1, 3, 4

Object.create() -

creates an object from an existing object. is a method in JavaScript that creates a new object, setting the prototype of the new object to an existing object. This allows the new object to inherit properties and methods from the prototype object.

const person = {
    greet: function(){
        console.log(`Hello my name is ${this.name}`);
    }
}

const john = Object.create(person);
john.name = 'John';
john.greet()

// Hello my name is John

Object.create() -

is a JavaScript method that allows you to define multiple properties on an object at once. You can specify each property's characteristics, such as whether it's writable, enumerable, or configurable.

const user = {};

Object.defineProperties(user, {
firstName: {
    value: 'John',
    writable: true, // Can be modified
    enumerable: true, // Will appear in loops
    configurable: true, // Can be deleted or change
    },
    age: {
    Value: 30,
    writable: false, // Cannot be modified
    enumerable: true, // Will appear in loops
    configurable: false, // Cannot be deleted or changed
    },
})

user.firstName = 'Alex' // output: Alex
user.age = 23 // output 30

Redid my Javascript projects

Mahmudul Fahim — Fri, 21 Feb 2025 19:29:18 +0000

I just finished polishing up some of my JavaScript projects and cleaned up the code. Would love your feedback :)
Live site: https://mdfahim18.github.io/all-raw-js-projects/

suggest me a react portfolio project

Mahmudul Fahim — Mon, 01 Jan 2024 16:12:06 +0000

I want to create a React portfolio project where I can add all my projects. Which will be very beautiful and unique. Suggest this kind of project with site link if you know. Thank you