🆕 JavaScript’s .with() — Immutable Updates, Built In One of the cleanest additions from ES2023 is Array.prototype.with(). It lets you update a specific index without mutating the original array. 🔎 Why this matters Accidental mutations are behind a huge number of subtle bugs in: • React state • Redux/Zustand stores • NestJS data transformations • Shared service logic • Functional pipelines ⚙️ Runtime support .with() is part of ECMAScript 2023 and is supported in: ✅ Node.js 20+ ✅ Chrome 110+ ✅ Firefox 115+ ✅ Safari 16.4+ If you're running Node 18 or older, it won’t be available natively. 💡 Small language improvements like this quietly make large codebases safer. Less mutation = fewer surprises in production. #NodeJS #JavaScript #WebDevelopment #Tech #DesignPatterns #FrontendDevelopment #DeveloperLife #Backend #BackendDeveloper #TypeScript #CodingTips #DeveloperBestPractices
ES2023's .with() for Immutable Array Updates
More Relevant Posts
-
⚡ 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
To view or add a comment, sign in
-
-
Most React devs think RSC is about performance. It's not. It's about where your code lives. React Server Components let you fetch data, access your database, and keep secrets — all at the component level — without shipping a single byte of that logic to the browser. Here's the mental shift that changed how I think about it: → Not "how do I make this faster?" → But "does this actually need to run in the browser?" If the answer is no — it belongs on the server. The "use client" directive isn't a default. It's an opt-in for interactivity. Everything else? Server by default. What this unlocks: ✅ Direct DB calls inside components ✅ API keys that never touch the client ✅ Smaller JS bundles without the effort ✅ Cleaner data fetching — no useEffect waterfalls The hardest part isn't the syntax. It's unlearning the habit of reaching for "use client" everywhere. If you're building with Next.js 13+ and haven't fully leaned into RSC yet — start small. Pick one data-fetching component and move it to the server. You'll feel the difference immediately. 💬 Are you using React Server Components in production? What's been your biggest challenge? #ReactServerComponents #React #NextJS #Frontend #WebDevelopment #JavaScript #SoftwareEngineering #Programming #TechTips #ReactJS
To view or add a comment, sign in
-
-
🛑 Stop making all your TypeScript interface properties optional. If you use TypeScript, you have probably been tempted to just slap a ? on a property to make the compiler stop yelling at you. id?: string; name?: string; We do this because a User in the database has an id, but a User being submitted in a registration form doesn't have an id yet. So we make it optional to share the same interface. This is a massive trap. 🪤 When you make properties optional, you are destroying your type safety. You will spend the rest of your app writing defensive code: if (user.id !== undefined) { ... }. The Fix: Strict Base Interfaces + Utility Types. ✨ Define your core interface as the absolute, strict truth (no optional fields unless they are truly optional). Then, let TypeScript do the heavy lifting using Omit and Pick. Why this wins: ✅ Zero Guesswork: If a function requires a UserCardProps, you know with 100% certainty that name and email will be there. No undefined checks needed. ✅ Single Source of Truth: If you add a new required property to your base User, your derived utility types automatically inherit it. ✅ Self-Documenting: Reading Omit<User, 'id'> instantly tells the next developer exactly what this object is meant for. Stop fighting the TypeScript compiler. Let Utility Types do the work for you. 🧠 Are you using Pick and Omit, or are you still living in the Optional wild west? 👇 #TypeScript #JavaScript #WebDevelopment #Frontend #ReactJS #CleanCode #SoftwareEngineering
To view or add a comment, sign in
-
-
🚀 The Event Loop: Browser vs. Node.js 🌐 Ever wondered how JavaScript stays "fast" despite being single-threaded? The secret sauce is the Event Loop. But depending on where your code runs, the Event Loop wears different hats. 🎩 Here is a quick breakdown of how it works on the Client-side vs. the Server-side: 🖥️ 1. JavaScript in the Browser (Client-Side) In the browser, the Event Loop is all about User Experience. The Goal: Keep the UI responsive. How it works: When a user clicks, scrolls, or fetches data, these actions are added to a task queue. The Flow: The Event Loop constantly checks if the Call Stack is empty. If it is, it pushes the next task from the queue to the stack. This ensures that heavy tasks don't "freeze" the screen while rendering. ⚙️ 2. Node.js (Server-Side) In Node.js, the Event Loop is the backbone of High-Concurrency servers. The Goal: Handle thousands of simultaneous requests without blocking. The Heavy Lifters: For "blocking" tasks like File System (FS) or Database operations, the Event Loop offloads the work to Worker Threads (via the Libuv library). The Callback Cycle: 1. The Event Loop registers a callback for an operation. 2. It hands the task to a worker thread. 3. Once the worker is done, it sends the result back to the queue. 4. The Event Loop picks it up and executes the final callback to send the response. 💡 The Bottom Line Whether you are building a snappy UI or a scalable backend, understanding the Event Loop is the difference between a laggy app and a high-performance system. #JavaScript #NodeJS #WebDevelopment #Programming #SoftwareEngineering #TechTips #react #express #next
To view or add a comment, sign in
-
🚀 TypeScript 6.0 is Here — A Major Transition Release! Microsoft has officially released TypeScript 6.0, and it’s not just another update — it’s a bridge to the future (TypeScript 7.0) 🔥 Here are the key highlights you should know 👇 ✅ Big Shift Ahead This is the last version based on the current JS codebase TypeScript 7.0 (coming soon) will be built in Go for massive performance improvements ⚡ 🧠 Smarter Type Inference Better handling of functions (especially those without this) Fewer unexpected unknown errors 📦 Modern Module Improvements Support for #/ subpath imports (cleaner imports 🚀) Better compatibility with bundlers + CommonJS ⚙️ New Compiler Defaults strict: true by default (more safety 🔒) module: esnext target: es2025 📉 Performance Boost types now defaults to [] → faster builds (20–50% improvement in many cases) 🆕 New Features Built-in types for Temporal API New Map methods: getOrInsert, getOrInsertComputed RegExp.escape() support es2025 target support ⚠️ Important Deprecations ES5 support removed ❌ baseUrl, node10, outFile, amd/umd modules deprecated Old import assertions replaced with with syntax 🛠️ Migration Tip If you upgrade: 👉 Add "types": ["node"] in tsconfig 👉 Set "rootDir": "./src" if needed 💡 My Take TypeScript is clearly moving toward: ⚡ Faster builds 🔒 Stronger type safety 📦 Modern JS ecosystem alignment If you're serious about modern web development, this upgrade is worth exploring now. 👉 Are you planning to upgrade to TS 6.0 or waiting for 7.0? #TypeScript #JavaScript #WebDevelopment #Frontend #Programming #SoftwareEngineering #Developers
To view or add a comment, sign in
-
-
There is a good chance that we developers use too much console.log(). ✔️ Like: console.log(user); console.log(user.profile); console.log(user.profile.name); But we can also use a breakpoint, which often reveals the problem much faster. In dev tool we can: ✅ Pause execution ✅ Inspect variables ✅ Step through logic ✅ Track state changes Debugging becomes much clearer than printing values repeatedly and also helps in understanding the execution flow. #Angular #Signals #RxJS #Reactivity #FrontendTips #WebDevelopment #JavaScript #FullStackDeveloper #CleanCode #CodingJourney #CSS #Frontend #ResponsiveDesign #UIDesign #NodeJS #ExpressJS #PostgreSQL #pgAdmin #Backend #API #FullStack
To view or add a comment, sign in
-
Today I spent time practicing JavaScript fundamentals on an online compiler. No frameworks. No libraries. Just pure JavaScript. It reminded me of something important: ==>You can’t build strong React apps ==>if your JS foundation is weak. ==>Small daily improvements > random motivation. Here’s the practice snippet I worked on 👇 https://lnkd.in/d4y9i_Nd Consistency > Talent. #JavaScript #FrontendDeveloper #LearningInPublic #WebDevelopment
To view or add a comment, sign in
-
𝐀𝐮𝐭𝐡𝐂𝐨𝐫𝐞 𝐯0.6.0 𝐢𝐬 𝐨𝐮𝐭! I've been building AuthCore, an open-source authentication library for Node.js. Think Devise for the JS ecosystem: registration, login, email verification, password reset, RBAC, and invitations out of the box. 𝐖𝐡𝐚𝐭'𝐬 𝐧𝐞𝐰 𝐢𝐧 𝐯0.6.0: - NestJS adapter with guards, decorators, and a dynamic module - Role-based access control across all packages - Invitation system (invite users by email with a pre-assigned role) - CI pipeline testing on Node 18, 20, and 22 Framework adapters for Express, Fastify, NestJS, and React. Database-agnostic (Prisma adapter included, more coming). Email-agnostic (Resend and Nodemailer adapters). 𝐆𝐞𝐭 𝐬𝐭𝐚𝐫𝐭𝐞𝐝 𝐢𝐧 𝐨𝐧𝐞 𝐜𝐨𝐦𝐦𝐚𝐧𝐝: npx create-authcore-app Or install individual packages: npm install @authcore/express @authcore/prisma-adapter The project is MIT licensed and open for contributions. Looking for help with new database adapters (Drizzle, Kysely), framework adapters (Hono, Elysia), and email adapters (SES, Postmark). GitHub: https://lnkd.in/dHc-Pqdf npm: https://lnkd.in/dr5fyHEH #opensource #nodejs #typescript #authentication #webdev
To view or add a comment, sign in
-
-
𝐌𝐨𝐬𝐭 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫𝐬 𝐃𝐨𝐧’𝐭 𝐔𝐧𝐝𝐞𝐫𝐬𝐭𝐚𝐧𝐝 𝐭𝐡𝐞 𝐄𝐯𝐞𝐧𝐭 𝐋𝐨𝐨𝐩 If you can’t explain the Node.js event loop clearly… You’re not done learning yet. Here’s the simple breakdown: 1️⃣ Call Stack 2️⃣ Web APIs 3️⃣ Callback Queue 4️⃣ Microtask Queue 5️⃣ Event Loop The biggest mistake I see: Developers blocking the event loop with: - Heavy loops - CPU-intensive tasks - Sync file operations Node.js is single-threaded. But that doesn’t mean it’s slow. It means you must respect the event loop. Can you explain the microtask queue without Google? 😄 🔁 Repost to support the community 👉 Follow Tapas Sahoo for more related content 🙏 #NodeJS #EventLoop #BackendEngineering #JavaScript #SystemDesign
To view or add a comment, sign in
-
-
By @addaleax MongoDB When server-side JavaScript crashes, the problem may lie beyond JS. This talk shows how native debuggers and tracing tools help investigate memory leaks and crashes across the boundary between JavaScript and C/C++. tickets available: https://lnkd.in/eR2QazBH #javascript #nodejs #debugging #perfomance
To view or add a comment, sign in
-
Explore related topics
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