flat vs flatMap flat: 1* Used to "flatten" nested array. 2* By default, .flat() only goes one level deep. Using Infinity it goes to all levels 3* flat(depth) flatMap: 1* It is a combination of .map() followed by .flat(1). 2* It’s more efficient than doing a map and a flat separately because it only iterates through the list once. 3* flatMap(callback) const flatFunc = (list) => { return list.flat(Infinity) }; console.log(flatFunc([1,2,3,[4,[5,[6]]]])); // [ 1, 2, 3, 4, 5, 6 ] const flatMapFunc = (list) => { return list.flatMap((item) => item.split(" ")) } console.log(flatMapFunc(["Hello JavaScript", "Hey TypeScript"])); //[ 'Hello', 'JavaScript', 'Hey', 'TypeScript' ] #JavaScript #WebDev #CodingTips #Frontend #SoftwareEngineering #LearnToCode #JSShorts #Programming #100DaysOfCode #CleanCode #WebDevelopment #JavaScriptDeveloper #TechTips #MaheshCheema
Mahesh Cheema’s Post
More Relevant Posts
-
🚀 Debounce vs Throttle — every JS dev should know the difference Both control how often a function runs, but they solve different problems. ⚡ DEBOUNCE — "Wait, then fire" Delays execution until a burst of events stops. Resets the timer on every new event. function debounce(fn, delay) { let timer; return function(...args) { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); }; } ✅ Use for: search inputs, form validation, auto-save 🔁 THROTTLE — "Fire, then wait" Executes at a fixed interval — no matter how many events fire. function throttle(fn, limit) { let inThrottle = false; return function(...args) { if (!inThrottle) { fn.apply(this, args); inThrottle = true; setTimeout(() => inThrottle = false, limit); } }; } ✅ Use for: scroll events, mouse tracking, API rate-limiting 🧠 Key mental model: → Debounce = respond once it's quiet → Throttle = pace yourself, one call per window If missing intermediate updates is fine → debounce If consistent periodic updates matter → throttle Drop a 🔥 if this was helpful! #JavaScript #WebDev #Frontend #JSConcepts #Programming #100DaysOfCode #React #Angular
To view or add a comment, sign in
-
TypeScript 6.0 just dropped and honestly it's less of a feature release and more of a wake-up call. This is the last version built on JavaScript before TypeScript 7.0 arrives. Rewritten entirely in Go. And 6.0 exists for one reason: to get your codebase ready for that shift. Here's what actually matters 👇 The defaults changed. Silently. Painfully. If you haven't touched your tsconfig in a while, surprise: → strict is now true by default → module defaults to esnext → target defaults to es2025 → types defaults to empty array That last one alone can cut your build times by up to 50%. Not a typo. New things worth knowing → Temporal API types finally landed. Goodbye Date object hell. → Map.getOrInsert is now typed → RegExp.escape built in → Subpath imports with #/ now supported What's getting cleaned out before 7.0 → --moduleResolution node deprecated → AMD, UMD, SystemJS module targets gone → target: es5 deprecated → --outFile and --baseUrl both deprecated The direction is clear. TypeScript is not being polite about legacy code anymore. TypeScript 7.0 in Go is already available as a preview in VS Code. Full release expected within months. If your tsconfig still looks like it did in 2021, now is genuinely the time to fix that. Not when 7.0 drops. Now. #TypeScript #WebDevelopment #JavaScript #Frontend #SoftwareEngineering
To view or add a comment, sign in
-
-
TypeScript's most powerful keyword that nobody understands. infer You've seen it in utility types. You've copy-pasted code that uses it. You've never fully understood what it does. It's simpler than you think: infer captures a type into a variable. Read it like this: type ArrayItem<T> = T extends (infer U)[] ? U : never "If T is an array of something, capture that something as U, then return U." That's it. Pattern matching for types. How to read any infer type: 1. Look at extends → that's the pattern 2. Find infer X → that's what gets captured 3. Look after ? → that's what you get back Real use cases: → Get item type from an array type Item = ArrayItem<User[]> // User → Get resolved value from Promise type Data = Unpromise<Promise<string>> // string → Get props from a React component type Props = ComponentProps<typeof Button> → Get return type from function type Result = ReturnType<typeof fetchUser> That last one? ReturnType is just infer under the hood: type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never You've been using infer this whole time. Now you know how to write your own. #typescript #javascript #frontend #webdev #programming #webdevelopment #react #types #cleancode #devtips
To view or add a comment, sign in
-
-
"𝗡𝗼𝗱𝗲.𝗷𝘀 𝗶𝘀 𝗮 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗿𝘂𝗻𝘁𝗶𝗺𝗲." 𝗬𝗼𝘂'𝘃𝗲 𝗿𝗲𝗮𝗱 𝗶𝘁 𝟭,𝟬𝟬𝟬 𝘁𝗶𝗺𝗲𝘀, 𝗯𝘂𝘁 𝗱𝗼 𝘆𝗼𝘂 𝗮𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝗴𝗲𝘁 𝗶𝘁? 🧐 The word "Runtime" is a trap because it describes two completely different things: 1️⃣ 𝗔 𝗠𝗼𝗺𝗲𝗻𝘁 𝗶𝗻 𝗧𝗶𝗺𝗲: The execution phase (when those "runtime errors" actually explode). 2️⃣ 𝗔𝗻 𝗘𝗻𝘃𝗶𝗿𝗼𝗻𝗺𝗲𝗻𝘁: The engine (V8/JSC) + APIs (Node/Bun/Deno) that let your code run outside the browser. Confusion here leads to "ghost bugs." Mastering the difference is what separates a dev who just "follows tutorials" from one who truly understands 𝗦𝗼𝗳𝘁𝘄𝗮𝗿𝗲 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲. I’ve written a jargon-free guide to clear the fog. We compare how engines like V8 vs. JavaScriptCore change the game for tools like Node, Deno, and Bun. 👉 𝗦𝗮𝘃𝗲 𝘁𝗵𝗲 𝗶𝗻𝗳𝗼𝗴𝗿𝗮𝗽𝗵𝗶𝗰 𝗯𝗲𝗹𝗼𝘄 as your quick reference guide! 🔗 𝗥𝗲𝗮𝗱𝘆 𝘁𝗼 𝗺𝗮𝘀𝘁𝗲𝗿 𝘁𝗵𝗲 𝗰𝗼𝗻𝗰𝗲𝗽𝘁? Read the full article on the Blueprint blog. 👇 𝗟𝗶𝗻𝗸 𝗶𝗻 𝘁𝗵𝗲 𝗳𝗶𝗿𝘀𝘁 𝗰𝗼𝗺𝗺𝗲𝗻𝘁! #JavaScript #WebDev #NodeJS #SoftwareEngineering #BlueprintBlog
To view or add a comment, sign in
-
-
Here is the golden rule: Use .forEach() when you want to DO something. (Like logging to the console or pushing to an external array). It returns undefined. Use .map() when you want to CREATE something new. It returns a brand new array of the same length. JavaScript const numbers = [1, 2, 3]; // ❌ Bad: Using map just to loop (creates an unused array in memory) numbers.map(num => console.log(num)); // ✅ Good: Using map in React to create an array of JSX elements const UI = numbers.map(num => <li key={num}>{num}</li>); Understanding this difference is crucial for writing clean, bug-free components! #JavaScript #ReactJS #CodingLife #WebDevelopment #Programming #LearnToCode
To view or add a comment, sign in
-
-
TypeScript is being rewritten in Go, and it actually makes a lot of sense. It's not that JavaScript is bad, but a type checker built with it tends to be slow. Cold starts, sluggish watch mode, and laggy editors in large projects are all too familiar. The results are clear. For example, VS Code (with 1.5 million lines) loads in 7.5 seconds instead of 77.8. Playwright drops from 11.1 seconds to 1.1, and TypeORM from 17.5 to 1.3. This isn't just a small improvement—it's ten times faster. VS Code's editor load time drops from 9.6 seconds to 1.2 seconds, making it eight times faster from opening your project to your first keypress. Memory usage is also cut by about half. The language itself isn't changing. Version 6.0 is mainly a cleanup release, removing outdated features like es5, outFile, and AMD/UMD, and adding helpful updates such as Map.getOrInsert or Temporal types. Also, strict: true is now enabled by default. It's about time. Upgrading to version 6.0 might not be exciting, but it's a necessary step before version 7.0 comes out. #TypeScript #TypeScript6 #JavaScript #WebDevelopment #Frontend #Programming #OpenSource
To view or add a comment, sign in
-
-
🧩 Demystifying the Node.js Event Loop: It's Not Just One Thread! Ever wondered what actually happens when you call setTimeout(() => {}, 1000)? Most people say "Node is single-threaded," but that’s only half the story. Here is the visual breakdown of how Node.js orchestrates asynchronous magic using libuv: 1. The Handoff (Main Thread) When you set a timer, the Main JS thread (V8) doesn't wait. It registers the callback and duration with libuv and moves on to the next line of code. 2. The Engine Room (libuv) This is where the heavy lifting happens. libuv maintains a Min-Heap—a highly efficient data structure that sorts timers by their expiration time. It puts the thread to "sleep" using OS-level polling (like epoll or kqueue) until the nearest timer is ready. 3. The Queue & The Tick Once the time arrives, libuv moves your callback into the Callback Queue. But it doesn't run yet! The Event Loop must cycle back to the "Timers Phase" to pick it up. ⚠️ The "Golden Rule" of Node.js Don't block the loop. If you run a heavy synchronous operation (like a massive while loop), the Event Loop gets stuck. Even if your timer has expired in the background, the Main Thread is too busy to check the queue. This is why a setTimeout(cb, 100) might actually take 5 seconds to fire if your main thread is congested. Key Takeaway: Node.js is fast because it offloads waiting to the OS via libuv, keeping the main thread free for execution. Keep your synchronous tasks light, and let the loop do its job! 🌀 #NodeJS #WebDevelopment #SoftwareEngineering #Backend #Javascript #ProgrammingTips
To view or add a comment, sign in
-
If a function fires 1000 times, but you only want it to run every 100 calls, there's a neat technique for that. Today I learned about counter-based sampling in JavaScript. Use Cases • sampling analytics events to reduce load • limiting noisy logs or metrics • running expensive work periodically in high-frequency flows How it's different from throttling? Sampling is call-count based → run every N calls Throttling is time-based → run at most once every X ms So if 1000 events fire instantly: • sampling (every 100) → runs 10 times • throttling (200ms) → may run only once Different problems, different tools. #javascript #softwareengineering #frontend #webdevelopment #todayilearned
To view or add a comment, sign in
-
-
I broke my own rule today… and it paid off. I usually avoid adding new dependencies. But I needed faster validation for a complex form. Instead of reinventing everything, I used a lightweight validation helper. Saved time. Reduced bugs. Sometimes “don’t add libraries” becomes a limitation. The real rule should be: 👉 Add dependencies intentionally, not emotionally. Balance matters. Do you prefer building from scratch or using libraries? #webdev #javascript #productivity
To view or add a comment, sign in
-
Fixed a bug today that took hours to understand. API was fine. Frontend looked correct. But data wasn’t showing. Issue? A small mismatch in field names. Lesson: • Always verify API responses • Never assume things are correct Small bugs, big lessons. What did you debug recently? #FullStackDeveloper #WebDevelopment #JavaScript #Debugging #ProblemSolving
To view or add a comment, sign in
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development