DEV Community: Md Imran Hossen Akash

JavaScript’s Map is Better Than Object 🤔❓

Md Imran Hossen Akash — Mon, 14 Jul 2025 12:06:20 +0000

When managing key-value pairs in JavaScript, you might default to using a plain Object. But the Map object, introduced in ES6, often outshines Object in flexibility and functionality. Here’s why you should consider Map for your next project ⬇️:

1️⃣ Unlike Object, which converts keys to strings, Map allows any value as a key-objects, functions, numbers, or even undefined. This makes Map ideal for complex data structures.
Example:

const map = new Map();
const objKey = { id: 1 };
map.set(objKey, "User Data");
console.log(map.get(objKey)); // "User Data"
const obj = {};
obj[objKey] = "User Data";
console.log(obj[objKey]); // "User Data" (but key collision risk)

2️⃣ Map has a built-in .size property to easily check the number of entries, while Object requires Object.keys(obj).length, which is less convenient and slower for large datasets.
Example:

const map = new Map([["a", 1], ["b", 2]]);
console.log(map.size); // 2
const obj = { a: 1, b: 2 };
console.log(Object.keys(obj).length); // 2 (more verbose)

3️⃣ Object keys are prone to collisions since they’re coerced to strings. Map avoids this by preserving the exact key reference, ensuring reliable key-value mappings.
Example:

const obj = {};
obj["1"] = "String One";
obj[1] = "Number One"; // Overwrites because 1 becomes "1"
console.log(obj["1"]); // "Number One"
const map = new Map();
map.set("1", "String One");
map.set(1, "Number One");
console.log(map.get("1")); // "String One"
console.log(map.get(1)); // "Number One"

4️⃣ Map offers built-in methods like .forEach, .keys(), .values(), and .entries() for seamless iteration. With Object, you need extra steps to iterate over keys or values.
Example:

const map = new Map([["name", "Alice"], ["age", 30]]);
map.forEach((value, key) => console.log(`${key}: ${value}`));
// Output: name: Alice, age: 30

5️⃣ Adding or removing key-value pairs in a Map is optimized for frequent updates. With Object, operations like delete or property checks can be less efficient, especially with large datasets.
Example:

const map = new Map();
map.set("key", "value");
map.delete("key"); // Fast and clean
const obj = { key: "value" };
delete obj.key; // Works, but less optimized for frequent changes

6️⃣ Object inherits properties from Object.prototype, which can cause unexpected behavior (e.g., toString). Map is free from prototype pollution, keeping your data clean.
Example:

const obj = { toString: "Custom" };
console.log(obj.toString); // "Custom" (overrides prototype)
const map = new Map([["toString", "Custom"]]);
console.log(map.get("toString")); // "Custom" (no conflict)

When to Use Map❓
Choose Map when you need flexible keys, frequent updates, or clean iteration. Stick with Object for simple, static data or when JSON compatibility is key. Both have their place, but Map shines in dynamic, complex scenarios.

Share your thoughts below 💬!

Hidden Gem TypeScript Concepts to Supercharge Your Code

Md Imran Hossen Akash — Tue, 08 Jul 2025 03:36:25 +0000

TypeScript is packed with features that make coding more robust and enjoyable. While many focus on types and interfaces, here are some lesser-known TypeScript concepts that can transform how you write code. Let’s dive into these hidden gems ⬇️!

1. never Type 💎

The never type represents values that never occur, like functions that throw errors or never return. It’s great for exhaustive checks in unions.
Example:

function fail(message: string): never {
 throw new Error(message);
}

type Shape = "circle" | "square";
function getShape(shape: Shape) {
 switch (shape) {
 case "circle": return "Round";
 case "square": return "Square";
 default: const _exhaustiveCheck: never = shape;
 }
}

2. unknown Type 💎

Unlike any, the unknown type is a safer alternative for values with unknown types. You must narrow it before using, ensuring type safety.
Example:

function processData(data: unknown) {
 if (typeof data === "string") {
 console.log(data.toUpperCase());
 }
}

3. Index Signatures 💎

Index signatures allow you to define types for objects with dynamic keys, perfect for scenarios like dictionaries or API responses.
Example:

interface Dictionary {

}
const scores: Dictionary = { math: 95, science: 88 };
console.log(scores["math"]);

4. as const Assertion 💎

The as const assertion makes literals and objects read-only and narrows them to their exact values, enabling precise type inference.
Example:

const colors = ["red", "blue", "green"] as const;
type Color = typeof colors[number]; // "red" | "blue" | "green"
let favorite: Color = "red"; // Valid
favorite = "yellow"; // Error

5. Keyof Type Operator 💎

The keyof operator extracts the keys of a type as a union of string literals, ideal for type-safe property access.
Example:

interface User {
 name: string;
 age: number;
}
type UserKeys = keyof User; // "name" | "age"
function getProperty(user: User, key: UserKeys) {
 return user[key];
}

6. Type Inference with typeof 💎

TypeScript’s typeof operator lets you extract types from values, making it easier to reuse existing structures without manual type definitions.
Example:

const config = { apiKey: "abc123", timeout: 5000 };
type ConfigType = typeof config; // { apiKey: string; timeout: number }
const newConfig: ConfigType = { apiKey: "xyz789", timeout: 3000 }; // Valid

Why These Matter 🤔
These concepts add precision and flexibility to your TypeScript projects, helping you handle edge cases, dynamic data, and complex logic with confidence. They’re especially useful for building scalable apps or working with unpredictable inputs.
Try these out in the TypeScript Playground or your next project. Which TypeScript feature has surprised you lately, or which of these are you eager to explore? Let’s geek out in the comments! 🚀

⚡Practical TypeScript Concepts to Enhance Your Code⚡

Md Imran Hossen Akash — Mon, 07 Jul 2025 06:02:25 +0000

TypeScript’s versatility makes it a must-have for modern developers. Beyond the basics, here are some practical TypeScript concepts that can streamline your workflow and make your code more robust. Let’s explore!

Type Assertions 🌟
Type assertions let you tell TypeScript you know more about a value’s type than it can infer. Use them wisely to bypass type errors when you’re certain of the type.
Example:
let input = document.getElementById("myInput") as HTMLInputElement; input.value = "Hello";
Non-null Assertion Operator 🌟
The non-null assertion operator (!) tells TypeScript a value is definitely not null or undefined, reducing unnecessary checks when you’re confident.
Example:

let userName: string | null = "Alice";
console.log(userName!.toUpperCase());

Discriminated Unions 🌟 Discriminated unions use a common property (the discriminant) to narrow types in a union, making complex type logic safer and more readable. Example:

interface Circle { kind: "circle"; radius: number }
interface Square { kind: "square"; side: number }
type Shape = Circle | Square;

function getArea(shape: Shape) {
 switch (shape.kind) {
 case "circle": return Math.PI * shape.radius ** 2;
 case "square": return shape.side ** 2;
 }
}

Type Guards 🌟 Type guards are functions or checks that narrow a type within a specific scope, improving type safety in dynamic scenarios. Example:

function isString(value: unknown): value is string {
 return typeof value === "string";
}

function process(value: unknown) {
 if (isString(value)) {
 console.log(value.toUpperCase());
 }
}

Module Augmentation 🌟 Module augmentation lets you extend existing modules (like third-party libraries) without modifying their source, adding custom types or functionality. Example:

declare module "express" {
 interface Request {
 userId?: string;
 }
}

Literal Types 🌟 Literal types restrict a value to specific literals (e.g., "success" or 42), enabling precise type definitions for constants or states. Example:

type Status = "success" | "error" | "loading";
let currentStatus: Status = "success";
currentStatus = "pending";

Why These Concepts Rock⬇️
These features make TypeScript more flexible and expressive, helping you handle real-world scenarios like third-party integrations, dynamic data, or strict state management. They’re practical tools for writing cleaner, safer code.
Try It Out!. Play with these concepts in the TypeScript Playground or your next project. What’s a TypeScript feature you’ve found super handy, or which of these are you excited to use? Share your thoughts below!💬