Arun Sambyal’s Post

Recently spent some time revisiting JavaScript fundamentals — especially arrays and objects — and it’s a reminder of how powerful these core methods really are 👇 🔹 map() – transform data const prices = [100, 200, 300] const discounted = prices.map(p => p * 0.9) → [90, 180, 270] 🔹 filter() – pick what you need const users = [{active: true}, {active: false}] const activeUsers = users.filter(u => u.active) 🔹 reduce() – compute totals const cart = [50, 30, 20] const total = cart.reduce((sum, item) => sum + item, 0) → 100 🔹 find() – get first match const products = [{id: 1}, {id: 2}] const item = products.find(p => p.id === 2) 🔹 some() – check if any match const hasExpensive = prices.some(p => p > 250) 🔹 every() – check if all match const allPositive = prices.every(p => p > 0) 🔹 includes() – simple existence check const tags = ["js", "react"] tags.includes("js") // true 🔹 flat() – flatten arrays const nested = [1, [2, 3], [4]] const flatArr = nested.flat() → [1, 2, 3, 4] 🔹 sort() – order data const nums = [3, 1, 2] nums.sort((a, b) => a - b) → [1, 2, 3] 🔹 Object destructuring const user = { name: "Alex", role: "Admin" } const { name, role } = user 🔹 Spread operator const updatedUser = { ...user, role: "Super Admin" } 💡 Takeaways: • Strong fundamentals = cleaner and more readable code • Array methods can replace complex loops • Better understanding = faster debugging Sometimes improving as a developer is just about going deeper into the basics. #JavaScript #WebDevelopment #Coding #Developers

🔑 JavaScript Set Methods – Quick Guide 1. Creation const letters = new Set(["a","b","c"]); // from array const letters = new Set(); // empty letters.add("a"); // add values 2. Core Methods MethodPurposeExampleReturns add(value)Add unique valueletters.add("d")Updated Set delete(value)Remove valueletters.delete("a")Boolean clear()Remove all valuesletters.clear()Empty Set has(value)Check existenceletters.has("b")true/false sizeCount elementsletters.sizeNumber 3. Iteration Methods MethodPurposeExample forEach(callback)Run function for each valueletters.forEach(v => console.log(v)) values()Iterator of valuesfor (const v of letters.values()) {} keys()Same as values() (compatibility with Maps)letters.keys() entries()Iterator of [value, value] pairsletters.entries() 4. Key Notes Unique values only → duplicates ignored. Insertion order preserved. typeof set → "object". set instanceof Set → true. 📝 Exercise Answer Which method checks if a Set contains a specified value? 👉 Correct answer: has() 🎯 Memory Hooks Set = Unique Collection Think: “No duplicates, only distinct members.” add to insert, has to check, delete to remove, clear to reset.

Every JavaScript developer has shipped this bug: async function processStream(response) {  const reader = response.body.getReader()  while (true) {   const { done, value } = await reader.read()   if (done) break   processChunk(value) // ← throws an error  }  reader.releaseLock() // ← never reached. Stream locked forever. } The fix? A try...finally block you have to remember to write every single time. ES2026's using keyword makes this class of bug impossible. 🔒 using readerResource = {  reader: response.body.getReader(),  [Symbol.dispose]() { this.reader.releaseLock() } } // releaseLock() called automatically — even if processChunk throws Add [Symbol.dispose]() to any class, and using guarantees cleanup when scope exits — on return, on break, or on error. For async resources, await using + [Symbol.asyncDispose] handles it: await using redis = new RedisClient(config) // redis.quit() runs automatically when scope exits The proposal also ships: → DisposableStack — manage multiple resources, disposed LIFO → SuppressedError — preserves both errors if cleanup itself throws → Works in for loops — dispose at end of each iteration TypeScript has supported it since 5.2. Chrome 134+, Firefox 134+, Node.js 22+. Babel transpiles it for older targets. I wrote the complete guide for DB connections, transactions, streams, WebSockets, mutexes, perf timers, and DisposableStack patterns. Have you started using this yet? 👇 #JavaScript #ES2026 #WebDev #NodeJS #Programming #100DaysOfBlogging

𝗜 𝘀𝘁𝗮𝗿𝘁𝗲𝗱 𝗹𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗮𝗿𝗿𝗮𝘆 𝗺𝗲𝘁𝗵𝗼𝗱𝘀… 𝗮𝗻𝗱 𝗴𝗼𝘁 𝗰𝗼𝗻𝗳𝘂𝘀𝗲𝗱 𝗳𝗮𝘀𝘁. Sometimes my data changed unexpectedly, sometimes it didn’t. The reason? I didn’t understand shallow copy vs deep copy. 𝗜𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁, 𝗼𝗯𝗷𝗲𝗰𝘁𝘀 𝗮𝗻𝗱 𝗮𝗿𝗿𝗮𝘆𝘀 𝗮𝗿𝗲 𝘀𝘁𝗼𝗿𝗲𝗱 𝗯𝘆 𝗿𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲. 𝗦𝗼 𝘄𝗵𝗲𝗻 𝘆𝗼𝘂 “𝗰𝗼𝗽𝘆” 𝘁𝗵𝗲𝗺, 𝘆𝗼𝘂 𝗺𝗶𝗴𝗵𝘁 𝘀𝘁𝗶𝗹𝗹 𝗯𝗲 𝗽𝗼𝗶𝗻𝘁𝗶𝗻𝗴 𝘁𝗼 𝘁𝗵𝗲 𝘀𝗮𝗺𝗲 𝗱𝗮𝘁𝗮. That’s why methods like slice() and concat() can be tricky—they create shallow copies, not deep ones. If you're learning JS, don’t skip this concept. It makes everything much clearer. I wrote a short blog explaining this with examples—would love your feedback. 𝗟𝗶𝗻𝗸: https://lnkd.in/djWsqePD Senthil Kumar Thangavel DHILEEPAN DHANAPAL MentorBridge #javascript #shallowcopy #deepcopy #arraymethods #es6 #frontend #react #blogging #mentorbridge

JavaScript Proxy — A Hidden Superpower You Should Know Most of us create objects like this: const frameworkName = { name: "Next JS" }; But what if you could intercept and control every operation on this object? That’s exactly what JavaScript Proxy does. Think of it like a gatekeeper sitting in front of your object — it can monitor, modify, or block any interaction. const frameworkName = { name: "Angular" }; const proxyFramework = new Proxy(frameworkName, { get(target, prop) { console.log(`Reading ${prop}`); return target[prop]; }, set(target, prop, value) { console.log(`Updating ${prop} to ${value}`); if (value === "React") { console.log("React is not allowed!"); throw new Error("React is not allowed!"); // Throw an error to prevent the update return false; // Prevent the update } target[prop] = value; return true; } }); proxyFramework.name; // 👉 Reading name proxyFramework.name = "Next"; Why should you care? ✔ Track changes (great for debugging) ✔ Add validation before updating values ✔ Build reactive behavior (like frameworks do) ✔ Control or restrict access to data Real-world use cases: • Form validation without extra libraries • Logging state changes for debugging • Building custom state management • Data sanitization before saving Pro Tip: Frameworks like Vue use Proxy internally to make data reactive. Understanding this can level up your frontend skills. Have you used Proxy in your projects, or are you still sticking with plain objects? #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS #Coding #Programming #LearnToCode

JavaScript in 2026: The Dev Update You Didn't Know You Needed ECMAScript continues to evolve, and this year's updates are particularly noteworthy for JavaScript developers. Here’s a comprehensive overview of what’s new, what’s on the horizon, and why it matters. 1. Temporal API — The Biggest JS Feature in Years (ES2026) Date handling in JavaScript has faced challenges since 1995. With the Temporal API, that’s changing. const now = Temporal.Now.zonedDateTimeISO("Asia/Kolkata"); console.log(now.toLocaleString()); // Correct. Always. 2. using keyword — Automatic Resource Cleanup (ES2026) This feature simplifies resource management in asynchronous functions. async function saveData() {   await using file = new FileHandle("output.txt");   await file.write("hello");   // file auto-closed here, even on error } No more worries about forgetting to close database connections or file handles. The runtime ensures cleanup when the variable goes out of scope, which is a significant improvement for server-side Node.js development. 3. Iterator Helpers — Lazy Evaluation (ES2025) This update enhances efficiency by allowing lazy evaluation without creating extra arrays. // Old way: creates 3 new arrays array.map(x => x*2).filter(x => x>10).slice(0, 3); // New way: zero extra arrays, stops after 3 Iterator.from(array).map(x => x*2).filter(x => x>10).take(3).toArray(); This feature works seamlessly with Sets, Maps, Generators, and any iterable, improving performance and memory usage. Additional updates include: - Array.fromAsync() — Collect async generator results into an array effortlessly - Iterator.concat() — Lazily iterate across multiple pages/sources - Error.isError() — Reliably detect real Error #JavaScript #ECMAScript2026 #WebDevelopment #TypeScript #FrontendDev #NodeJS #Programming #SoftwareEngineering #TechNews #CodingLife

🚀 𝐃𝐚𝐲 6 – 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐄𝐯𝐞𝐧𝐭 𝐋𝐨𝐨𝐩 (𝐒𝐢𝐦𝐩𝐥𝐞 & 𝐂𝐥𝐞𝐚𝐫) JavaScript is single-threaded… 👉 But then how does it handle things like `setTimeout`? 🤔 Let’s understand the real flow 👇 --- 💡 The Setup JavaScript uses: * Call Stack → runs code * Web APIs → handles async tasks * Callback Queue → waits for execution * Event Loop → manages everything --- 💡Example: console.log("Start"); setTimeout(() => {  console.log("Timeout"); }, 0); console.log("End"); --- 💡 Output: Start End Timeout --- 💡 Why? (Step-by-step) * `Start` → runs immediately * `setTimeout` → sent to Web APIs * `End` → runs immediately * Timer completes → callback goes to Queue * Event Loop checks → Stack empty * Callback pushed to Stack → executes --- ⚡ Key Insight 👉 Even with `0ms`, it does NOT run immediately 👉 It waits until the Call Stack is empty --- 💡 Simple Mental Model 👉 “Async code runs after sync code finishes” --- 💡 Why this matters? Because it explains: * execution order * async behavior * common bugs --- 👨💻 Continuing my JavaScript fundamentals series 👉 Next: **Promises (Async Made Better)** 👀 #JavaScript #WebDevelopment #FrontendDevelopment #Coding #SoftwareEngineer #Tech

🚀 JavaScript String Methods Strings are one of the most common data types in JavaScript, and yet, so many devs underuse the powerful methods that come with them. Here are some essential ones to know: ✂️ 𝘀𝗹𝗶𝗰𝗲(𝘀𝘁𝗮𝗿𝘁, 𝗲𝗻𝗱): extract a substring 🔄 𝗿𝗲𝗽𝗹𝗮𝗰𝗲() / 𝗿𝗲𝗽𝗹𝗮𝗰𝗲𝗔𝗹𝗹(): update parts of a string 🔍 𝗶𝗻𝗰𝗹𝘂𝗱𝗲𝘀(): check if a substring exists 🔠 𝘁𝗼𝗨𝗽𝗽𝗲𝗿𝗖𝗮𝘀𝗲() / 𝘁𝗼𝗟𝗼𝘄𝗲𝗿𝗖𝗮𝘀𝗲(): format consistently 🔢 𝗶𝗻𝗱𝗲𝘅𝗢𝗳() / 𝗹𝗮𝘀𝘁𝗜𝗻𝗱𝗲𝘅𝗢𝗳(): find character positions 📏 𝗹𝗲𝗻𝗴𝘁𝗵: total character count 🧼 𝘁𝗿𝗶𝗺() / 𝘁𝗿𝗶𝗺𝗦𝘁𝗮𝗿𝘁() / 𝘁𝗿𝗶𝗺𝗘𝗻𝗱(): clean up whitespace 🔗 𝘀𝗽𝗹𝗶𝘁(): break a string into an array ➕ 𝗰𝗼𝗻𝗰𝗮𝘁(): combine strings (or just use +) 🔡 𝗰𝗵𝗮𝗿𝗔𝘁() / 𝗰𝗵𝗮𝗿𝗖𝗼𝗱𝗲𝗔𝘁(): access individual characters Save & share with your team! Download Our Free Full-Stack Developer Starter Kit ➡️ https://buff.ly/JbI0Qof --- If you found this guide helpful, follow TheDevSpace | Dev Roadmap, w3schools.com, and JavaScript Mastery for more tips, tutorials, and cheat sheets on web development. Let's stay connected! 🚀 #React #JavaScript #CheatSheet #WebDevelopment

🚀 Just published my latest blog on Template Literals in JavaScript! Tired of messy string concatenation using +? Learn how template literals make your code cleaner, readable, and modern 💡 ✅ Real-world examples ✅ Before vs After comparisons ✅ Practical use cases Perfect for beginners in web development 👨💻 🔗 Read here: https://lnkd.in/gJ6qP-ch #JavaScript #WebDevelopment #Coding #Frontend #100DaysOfCode

For years, importing JSON in JavaScript looked native — but it never really was. That illusion was created by bundlers. Now, with import attributes, JSON modules are finally supported natively by the platform — no build step required. What changed? Previously, this syntax was handled by bundlers at build time. The browser itself didn’t understand JSON as a module: import config from "./config.json"; Now we have a real, explicit standard. This tells the runtime exactly how to treat the file — as structured data, not executable code: import config from "./config.json" with { type: "json" }; Why with { type: "json" } matters JavaScript modules are executable, JSON is not. Without explicit typing, the runtime would have to guess how to handle the file — which creates ambiguity and potential security issues. Import attributes remove that guesswork: - no reliance on file extensions - no reliance on server headers - clear contract with the runtime Bundlers are still useful (optimization, hashing, inlining), but for JSON imports, the platform has finally caught up. Reference: https://lnkd.in/eJZW8t2A #javascript #webdev #frontend #esm #webplatform #json