Yassine Belkaid’s Post

⚡ JavaScript’s structuredClone() — Stop Using JSON for Deep Copy For years, many of us used this trick to deep clone objects: const copy = JSON.parse(JSON.stringify(obj)); It works… until it doesn’t. 🔎 Why this matters That approach silently breaks when your object contains: • Date   • Map / Set   • undefined values   • Infinity   • RegExp   • Circular references  And debugging that later can be painful. ✅ Modern solution JavaScript now provides structuredClone(). It correctly handles complex data structures and avoids the limitations of JSON cloning. Cleaner and more reliable. ⚙️ Runtime support structuredClone() is available in: ✅ Node.js 17+   ✅ Chrome 98+   ✅ Firefox 94+   ✅ Safari 15.4+  So it's safe in most modern environments. 💡 Small built-in utilities like this remove the need for hacks we've carried around for years. Sometimes the best improvement is simply using what the language already gives us. #NodeJS #JavaScript #WebDevelopment #Tech #DesignPatterns #FrontendDevelopment #DeveloperLife #Backend #BackendDeveloper #TypeScript #CodingTips #DeveloperBestPractices

Just published a new blog on JavaScript Arrays 🚀 Arrays are one of the most commonly used data structures in JavaScript, but understanding how they actually work makes writing cleaner and more efficient code. In this post I covered: • How arrays are created in JavaScript • How they store and manage data • Basic operations developers use every day This article is part of my effort to revisit JavaScript fundamentals and document the learning along the way. If you're learning JavaScript or refreshing your basics, this might be helpful. #javascript #webdevelopment #programming #frontend #developers url - https://lnkd.in/d7kAfXpf Chai Aur Code Akash Kadlag Barun Tiwary @jay Hitesh Choudhary Piyush Garg

JavaScript is single-threaded. So why doesn't it freeze during an API call? When I first started learning JS, this felt like a magic trick. If it can only do one thing at a time, how does it handle timers, database queries, and network requests without crashing? The secret is the Event Loop. How it works (The Simplified Flow) :- Call Stack :- Where your code lives. JS executes functions here one by one. Web APIs :- When an async task (like setTimeout) appears, JS hands it off to the browser/Node.js environment. Callback Queue :- Once the task is done, the callback waits here in line. The Event Loop: The "Traffic Cop." It waits until the Call Stack is empty, then pushes the next task from the Queue into the Stack. The Example: console.log("Start"); setTimeout(() => { console.log("Async Task"); }, 0); console.log("End"); The Result :- Start End Async Task Why? Even with a 0'ms delay, that callback must visit the Web API and wait in the Queue until the main execution (the Stack) is totally clear. It’s the difference between guessing how your code works and knowing exactly why it’s behaving that way. #javascript #webdevelopment #programming #100DaysOfCode #softwareengineering #SheryianshCodingSchool Harsh Vandana Sharma

Day 1 #100DaysOfCode 💻 Today I learned important JavaScript fundamentals from Module 27. 1. Primitive vs Non-Primitive Data Types Primitive stores actual value (number, string, boolean). Non-primitive (object, array) stores reference. let x = 10; let arr = [1, 2, 3]; 2. Truthy & Falsy Values Falsy values: false, 0, "", null, undefined, NaN. Everything else is truthy. if ("Hello") { console.log("Truthy"); } 3. null vs undefined undefined = declared but not assigned. null = intentionally empty. let a; let b = null; 4. == vs === == checks value (type converts). === checks value + type. console.log(5 == "5"); // true console.log(5 === "5"); // false 5. Scope (Global, Function, Block) Scope defines where variables are accessible. let globalVar = "Hi"; function test() { let localVar = "Hello"; } 6. Hoisting Declarations move to the top before execution. console.log(num); var num = 5; 7. Closure Inner function remembers outer function variables. function outer() { let count = 0; return function () { count++; }; } 8. Pass by Value vs Reference Primitive copies value. Objects copy reference. let a1 = 5; let b1 = a1; let obj1 = { name: "John" }; let obj2 = obj1; 9. Unary Operators (++ / --) Increase or decrease value by 1. let n = 5; n++; This module strengthened my core understanding of how JavaScript works behind the scenes. Building strong fundamentals step by step. #100DaysOfCode #JavaScript #WebDevelopment #FrontendDeveloper #Akbiplob

🚀Day 4/100 – Understanding JSON & Fetch in JavaScript Today I focused on two fundamental concepts in modern web development: 1️⃣ JSON (JavaScript Object Notation) JSON is the standard format for sending data between a client and a server. Key things I reinforced today: Keys must be in double quotes Strings must use double quotes Numbers & booleans don’t need quotes JSON stores only data (no functions, no undefined) I practiced converting between objects and JSON: JSON.stringify() → Object ➝ JSON string JSON.parse() → JSON string ➝ Object Understanding this flow is critical because servers send data as JSON strings, and we convert them back into JavaScript objects to use in our applications. Data Flow: Server ➝ JSON String ➝ Parse ➝ JavaScript Object ➝ UI 2️⃣ Fetch API I learned how to retrieve data from an API using fetch(). Basic flow: Send request using fetch() Convert response using response.json() Use the data Also practiced the cleaner modern approach using async/await, which makes asynchronous code much more readable and scalable compared to chaining multiple .then() calls. What I Realized Today- If you don’t understand JSON and fetch deeply, you can’t properly build real-world applications. Every frontend app talks to a backend, and this is the bridge. On to Day 5. #100DaysOfCode #JavaScript #WebDev #API #JSON #CodingChallenge #Frontend #SoftwareEngineering #MERNStack #LearningEveryday

Day 62 of me reading random and basic but important dev topicsss..... Today I read about the Resource Loading in JavaScript...... In our day-to-day work building interfaces with React or other modern frameworks, it's easy to take module bundlers for granted. But what happens when we need to dynamically inject a third-party script......like an analytics tracker, a payment SDK, or a support widget.....on the fly? Understanding the vanilla DOM events onload and onerror is a must for any robust front-end architecture. 1. The Dynamic Injection Adding a script dynamically is straightforward: let script = document.createElement('script'); script.src = "third-party.js"; document.head.append(script); But we can't just invoke its functions immediately. The browser needs time to fetch and execute it. 2. script.onload (The Success Path) This event triggers after the script has successfully loaded and executed. This is our green light to safely use the newly available variables or functions. 3. script.onerror (The Failure Path) If the script 404s or the server is down, onerror catches it. However, keep in mind: we won't get HTTP status codes (like 404 or 500) here, just a notification that the network request failed. Loading vs. Execution Here is where we get tripped up: onload and onerror only track the network loading phase. If a script downloads successfully but contains a syntax or runtime error during execution, onload will still fire! To catch those internal execution bugs, we need a different tool entirely: the window.onerror global handler. Keep Learning!!!!! #JavaScript #WebDevelopment #FrontendDev #React #SoftwareEngineering

There are still codes that are implemented with manual loops ➡️ For example: const activeUsers = []; for (let i = 0; i < users.length; i++) {  if (users[i].isActive) {   activeUsers.push(users[i]);  } } As it's a loop, it still works, but we have more expressive tools in JavaScript. Like: ✅ const activeUsers = users.filter(user => user.isActive); ✅ The result is easier to read because the intent is obvious. ✅ filter, map, and reduce often make data transformations much clearer than manual loops. #Angular #Signals #RxJS #Reactivity #FrontendTips #WebDevelopment #JavaScript #FullStackDeveloper #CleanCode #CodingJourney #CSS #Frontend #ResponsiveDesign #UIDesign #NodeJS #ExpressJS #PostgreSQL #pgAdmin #Backend #API #FullStack 

🚀 Does Node.js Really Have 4 Threads? A common misconception: > “Node.js is multi-threaded because it has 4 threads.” Let’s structure this properly 👇 1️⃣ JavaScript Execution in Node.js Node.js runs JavaScript on a single main thread using: V8 Engine Event Loop Everything below runs on ONE thread: Express routes Middleware Business logic Promise callbacks async/await Timers 👉 This is why Node.js is called single-threaded. 2️⃣ Where Do the 4 Threads Come From? Node.js uses libuv internally. libuv provides: A thread pool Default size = 4 threads These threads handle blocking system-level tasks. 3️⃣ What Actually Uses the Thread Pool? The 4 threads are used for: File system operations (fs) Crypto tasks (bcrypt, pbkdf2) Compression (zlib) DNS lookups (non-network) Flow: 1. Blocking task detected 2. Task offloaded to libuv 3. One thread processes it 4. Result returned to Event Loop 5. Callback executed on main thread 4️⃣ Important Clarification Node.js is: ✅ Single-threaded for JavaScript execution ✅ Multi-threaded internally for I/O handling ❌ Not multi-threaded for your business logic If true parallel JavaScript execution is required: worker_threads cluster Multiple Node processes Understanding this distinction helps design better APIs, avoid CPU blocking, and build scalable backend systems. #NodeJS #JavaScript #BackendDevelopment #EventLoop #Libuv #AsyncProgramming #ScalableSystems #SystemDesign #FullStackDevelopment

15 JavaScript Array Methods Every Developer Must Know Arrays are the most used data structure in JavaScript. And yet most developers use only three or four array methods regularly, reaching for manual loops for everything else. Here are the 15 array methods that will replace most of your loops and make your code significantly more readable: -> Mutation methods — change the original array push: add an element to the end pop: remove the last element unshift: add an element to the beginning shift: remove the first element -> Transformation methods — return a new array map: transform every item and return a new array with the results filter: return a new array containing only items that match a condition reduce: combine all items into a single value — sum, object, string, anything -> Search and validation methods some: returns true if at least one item matches the condition every: returns true only if every item matches the condition includes: returns true if the value exists in the array indexOf: returns the position of the first match, or -1 if not found -> Iteration and extraction forEach: loop through each item and run a function — no return value slice: extract a portion of the array without modifying the original These methods are not just syntactic sugar. They encourage a functional programming style where data flows through transformations rather than being mutated by loops. Code becomes more predictable, easier to test, and easier to read. The developers who internalize these methods write JavaScript that other developers genuinely enjoy reading. Which of these do you use least but probably should use more? #JavaScript #Programming #WebDevelopment #Frontend #Developers #CleanCode

🚀 Latest ECMAScript Features (ES2023–ES2025) Here are some of the latest ECMAScript (JavaScript) features that every modern developer should know 👇 1️⃣ Array.prototype.toSorted(), toReversed(), toSpliced(), with() (ES2023) Immutable versions of common array methods. ✅ No mutation ✅ Cleaner functional style ✅ Safer state handling (especially in React) 2️⃣ findLast() & findLastIndex() (ES2023) : 🔹 Search arrays from the end. 🔹 Perfect for reverse searching without manual loops. 3️⃣ Hashbang Support (ES2023) : 🔹 You can now safely use #! in JS files (useful for Node.js CLI tools). 4️⃣ Symbols as WeakMap Keys (ES2023) : 🔹 Symbols can now be used as keys in WeakMap. 🔹 More flexibility for advanced memory-safe patterns. 5️⃣ Promise.withResolvers() (ES2024) : 🔹 Cleaner way to create promise + expose resolve/reject. 🔹 Useful for advanced async flows. 6️⃣ Object.groupBy() & Map.groupBy() (ES2024) : 🔹 Group array elements easily. 🔹 No need for manual reduce(). 7️⃣ Temporal API (Upcoming – Stage 3) : 🔹 Modern replacement for Date. 🔹 Fixes long-standing Date problems: ✔️ Time zones ✔️ Immutability ✔️ Better formatting 8️⃣ Decorators (Stage 3 – Near Final) : 🔹 Used for meta-programming. 🔹 Common in frameworks like Angular. 💡 Why This Matters :Modern ECMAScript focuses on: 🔹 Immutability 🔹 Better async handling 🔹 Cleaner APIs 🔹 Developer productivity 🔹 Predictable date/time management #JavaScript #ECMAScript #WebDevelopment #Frontend #FullStack #Programming