[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"post-functional-programming-javascript-practical":3,"parsed-post-1f16f501-5d1b-426a-b0ab-0eca7430d8d9":86,"header-categories":263},{"success":4,"data":5},true,{"id":6,"slug":7,"title":8,"excerpt":9,"content":10,"status":11,"visibility":12,"featuredImage":13,"canonicalUrl":14,"readingTime":15,"viewCount":16,"commentEnabled":4,"publishedAt":17,"scheduledAt":14,"createdAt":18,"updatedAt":19,"seoTitle":20,"seoDescription":9,"seoKeywords":14,"authorId":21,"author":22,"coAuthors":27,"tags":28,"categories":44,"comments":53,"_count":54,"relatedPosts":56},"1f16f501-5d1b-426a-b0ab-0eca7430d8d9","functional-programming-javascript-practical","Functional Programming in JavaScript: Practical Patterns","Apply functional programming principles to everyday JavaScript: immutability, pure functions, composition, and practical uses of map\u002Ffilter\u002Freduce.","## FP in JavaScript: Be Practical\n\nYou don't need monads or category theory to benefit from functional programming. Start with three principles: pure functions, immutability, and composition.\n\n## Pure Functions\n\nA pure function: same input → same output, no side effects.\n\n```typescript\n\u002F\u002F ❌ Impure — depends on external state\nlet taxRate = 0.2\nfunction calculatePrice(amount: number) {\n  return amount * (1 + taxRate) \u002F\u002F relies on external variable\n}\n\n\u002F\u002F ✅ Pure — all inputs explicit\nfunction calculatePrice(amount: number, taxRate: number) {\n  return amount * (1 + taxRate)\n}\n```\n\nWhy it matters: pure functions are trivial to test, cache, and parallelize.\n\n## Immutability\n\nNever mutate — create new values:\n\n```typescript\n\u002F\u002F ❌ Mutation\nfunction addItem(cart: Item[], item: Item) {\n  cart.push(item) \u002F\u002F modifies the original!\n  return cart\n}\n\n\u002F\u002F ✅ Immutable\nfunction addItem(cart: Item[], item: Item): Item[] {\n  return [...cart, item] \u002F\u002F new array\n}\n\n\u002F\u002F ✅ For objects\nfunction updateUser(user: User, changes: Partial\u003CUser>): User {\n  return { ...user, ...changes }\n}\n```\n\n## Function Composition\n\nBuild complex operations from simple ones:\n\n```typescript\nconst pipe = \u003CT>(...fns: Array\u003C(arg: T) => T>) =>\n  (value: T): T =>\n    fns.reduce((acc, fn) => fn(acc), value)\n\nconst processText = pipe(\n  (s: string) => s.trim(),\n  (s: string) => s.toLowerCase(),\n  (s: string) => s.replace(\u002F\\s+\u002Fg, '-'),\n  (s: string) => s.replace(\u002F[^a-z0-9-]\u002Fg, ''),\n)\n\nprocessText('  Hello World! ')  \u002F\u002F → \"hello-world\"\n```\n\n::callout{icon=\"i-lucide-layers\" color=\"primary\"}\nComposition lets you build complex behavior by snapping simple, tested functions together. Each piece is easy to understand and test in isolation.\n::\n\n## Practical: Data Transformation Pipeline\n\n```typescript\ninterface Order {\n  id: string\n  items: Array\u003C{ price: number; quantity: number }>\n  status: 'pending' | 'shipped' | 'delivered'\n  createdAt: Date\n}\n\nfunction getMonthlyRevenue(orders: Order[], month: number): number {\n  return orders\n    .filter(order => order.status !== 'pending')\n    .filter(order => order.createdAt.getMonth() === month)\n    .flatMap(order => order.items)\n    .reduce((total, item) => total + item.price * item.quantity, 0)\n}\n```\n\n## Higher-Order Functions\n\nFunctions that take or return functions:\n\n```typescript\n\u002F\u002F Retry wrapper\nfunction withRetry\u003CT>(fn: () => Promise\u003CT>, attempts = 3): () => Promise\u003CT> {\n  return async () => {\n    for (let i = 0; i \u003C attempts; i++) {\n      try {\n        return await fn()\n      } catch (e) {\n        if (i === attempts - 1) throw e\n        await new Promise(r => setTimeout(r, 1000 * (i + 1)))\n      }\n    }\n    throw new Error('Unreachable')\n  }\n}\n\nconst fetchWithRetry = withRetry(() => fetch('\u002Fapi\u002Fdata'))\n```\n\n## When NOT to Go Functional\n\n- Performance-critical loops (allocations from spread\u002Fmap add up)\n- When mutation is clearer (sorting an array in place)\n- When it makes code harder to read (over-composition)\n\nFP is a tool, not a religion. Use it where it makes code clearer and more reliable.\n","published","public","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1551288049-bebda4e38f71?w=1200&q=80",null,10,1910,"2026-05-18T06:04:05.250Z","2026-07-24T06:04:05.253Z","2026-07-28T17:07:17.697Z","Functional Programming in JavaScript: Practical Patterns | BitBlog","fddb5d93-7a2c-4d86-a06a-fa32e73a01c6",{"email":23,"bio":24,"id":21,"name":25,"avatarUrl":26},"mbeahessilfieprince@gmail.com","Fullstack Software Developer ","Mbeah Essilfie","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F93322394?v=4",[],[29,34,39],{"id":30,"name":31,"color":32,"description":33},"javascript","JavaScript","#f7df1e","The language of the web",{"id":35,"name":36,"color":37,"description":38},"typescript","TypeScript","#3178c6","Typed superset of JavaScript",{"id":40,"name":41,"color":42,"description":43},"architecture","Architecture","#795548","Software architecture patterns",[45,49],{"id":46,"name":47,"description":48},"software-engineering","Software Engineering","Best practices, patterns, and principles",{"id":50,"name":51,"description":52},"tutorials","Tutorials","Step-by-step learning guides",[],{"comments":55},0,[57,67,76],{"id":58,"slug":59,"title":60,"excerpt":61,"featuredImage":62,"viewCount":63,"readingTime":64,"publishedAt":65,"author":66},"2997028f-4d22-4eb7-9d86-894a54cb559a","building-type-safe-apis-nuxt3-prisma","Building Type-Safe APIs with Nuxt 3 and Prisma","Learn how to build end-to-end type-safe APIs using Nuxt 3 server routes and Prisma ORM for a seamless developer experience.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1498050108023-c5249f4df085?w=1200&q=80",1922,8,"2026-07-23T06:02:46.910Z",{"id":21,"name":25,"avatarUrl":26},{"id":68,"slug":69,"title":70,"excerpt":71,"featuredImage":72,"viewCount":73,"readingTime":15,"publishedAt":74,"author":75},"da9e4553-8b0d-411e-b4ec-f9684017e163","mastering-tailwind-css-design-systems","Mastering Tailwind CSS: From Utility Classes to Design Systems","Go beyond basic utility classes and learn how to build cohesive, maintainable design systems with Tailwind CSS.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1555066931-4365d14bab8c?w=1200&q=80",257,"2026-07-21T06:02:49.268Z",{"id":21,"name":25,"avatarUrl":26},{"id":77,"slug":78,"title":79,"excerpt":80,"featuredImage":81,"viewCount":82,"readingTime":83,"publishedAt":84,"author":85},"50add5fc-4026-4267-b917-7f71ea9e35b0","complete-guide-vue3-composables","The Complete Guide to Vue 3 Composables","Understand the power of Vue 3's Composition API through practical, real-world composable patterns that you can use today.","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1517694712202-14dd9538aa97?w=1200&q=80",990,12,"2026-07-19T06:02:51.753Z",{"id":21,"name":25,"avatarUrl":26},{"data":87,"body":89,"toc":253},{"title":88,"description":88},"",{"type":90,"children":91},"root",[92,101,107,113,118,130,135,141,146,154,160,165,173,184,190,198,204,209,217,223,243,248],{"type":93,"tag":94,"props":95,"children":97},"element","h2",{"id":96},"fp-in-javascript-be-practical",[98],{"type":99,"value":100},"text","FP in JavaScript: Be Practical",{"type":93,"tag":102,"props":103,"children":104},"p",{},[105],{"type":99,"value":106},"You don't need monads or category theory to benefit from functional programming. Start with three principles: pure functions, immutability, and composition.",{"type":93,"tag":94,"props":108,"children":110},{"id":109},"pure-functions",[111],{"type":99,"value":112},"Pure Functions",{"type":93,"tag":102,"props":114,"children":115},{},[116],{"type":99,"value":117},"A pure function: same input → same output, no side effects.",{"type":93,"tag":119,"props":120,"children":124},"pre",{"className":121,"code":122,"language":35,"meta":88,"style":123},"language-typescript","\u002F\u002F ❌ Impure — depends on external state\nlet taxRate = 0.2\nfunction calculatePrice(amount: number) {\n  return amount * (1 + taxRate) \u002F\u002F relies on external variable\n}\n\n\u002F\u002F ✅ Pure — all inputs explicit\nfunction calculatePrice(amount: number, taxRate: number) {\n  return amount * (1 + taxRate)\n}\n","undefined",[125],{"type":93,"tag":126,"props":127,"children":128},"code",{"__ignoreMap":88},[129],{"type":99,"value":122},{"type":93,"tag":102,"props":131,"children":132},{},[133],{"type":99,"value":134},"Why it matters: pure functions are trivial to test, cache, and parallelize.",{"type":93,"tag":94,"props":136,"children":138},{"id":137},"immutability",[139],{"type":99,"value":140},"Immutability",{"type":93,"tag":102,"props":142,"children":143},{},[144],{"type":99,"value":145},"Never mutate — create new values:",{"type":93,"tag":119,"props":147,"children":149},{"className":121,"code":148,"language":35,"meta":88,"style":123},"\u002F\u002F ❌ Mutation\nfunction addItem(cart: Item[], item: Item) {\n  cart.push(item) \u002F\u002F modifies the original!\n  return cart\n}\n\n\u002F\u002F ✅ Immutable\nfunction addItem(cart: Item[], item: Item): Item[] {\n  return [...cart, item] \u002F\u002F new array\n}\n\n\u002F\u002F ✅ For objects\nfunction updateUser(user: User, changes: Partial\u003CUser>): User {\n  return { ...user, ...changes }\n}\n",[150],{"type":93,"tag":126,"props":151,"children":152},{"__ignoreMap":88},[153],{"type":99,"value":148},{"type":93,"tag":94,"props":155,"children":157},{"id":156},"function-composition",[158],{"type":99,"value":159},"Function Composition",{"type":93,"tag":102,"props":161,"children":162},{},[163],{"type":99,"value":164},"Build complex operations from simple ones:",{"type":93,"tag":119,"props":166,"children":168},{"className":121,"code":167,"language":35,"meta":88,"style":123},"const pipe = \u003CT>(...fns: Array\u003C(arg: T) => T>) =>\n  (value: T): T =>\n    fns.reduce((acc, fn) => fn(acc), value)\n\nconst processText = pipe(\n  (s: string) => s.trim(),\n  (s: string) => s.toLowerCase(),\n  (s: string) => s.replace(\u002F\\s+\u002Fg, '-'),\n  (s: string) => s.replace(\u002F[^a-z0-9-]\u002Fg, ''),\n)\n\nprocessText('  Hello World! ')  \u002F\u002F → \"hello-world\"\n",[169],{"type":93,"tag":126,"props":170,"children":171},{"__ignoreMap":88},[172],{"type":99,"value":167},{"type":93,"tag":174,"props":175,"children":178},"callout",{"color":176,"icon":177},"primary","i-lucide-layers",[179],{"type":93,"tag":102,"props":180,"children":181},{},[182],{"type":99,"value":183},"Composition lets you build complex behavior by snapping simple, tested functions together. Each piece is easy to understand and test in isolation.",{"type":93,"tag":94,"props":185,"children":187},{"id":186},"practical-data-transformation-pipeline",[188],{"type":99,"value":189},"Practical: Data Transformation Pipeline",{"type":93,"tag":119,"props":191,"children":193},{"className":121,"code":192,"language":35,"meta":88,"style":123},"interface Order {\n  id: string\n  items: Array\u003C{ price: number; quantity: number }>\n  status: 'pending' | 'shipped' | 'delivered'\n  createdAt: Date\n}\n\nfunction getMonthlyRevenue(orders: Order[], month: number): number {\n  return orders\n    .filter(order => order.status !== 'pending')\n    .filter(order => order.createdAt.getMonth() === month)\n    .flatMap(order => order.items)\n    .reduce((total, item) => total + item.price * item.quantity, 0)\n}\n",[194],{"type":93,"tag":126,"props":195,"children":196},{"__ignoreMap":88},[197],{"type":99,"value":192},{"type":93,"tag":94,"props":199,"children":201},{"id":200},"higher-order-functions",[202],{"type":99,"value":203},"Higher-Order Functions",{"type":93,"tag":102,"props":205,"children":206},{},[207],{"type":99,"value":208},"Functions that take or return functions:",{"type":93,"tag":119,"props":210,"children":212},{"className":121,"code":211,"language":35,"meta":88,"style":123},"\u002F\u002F Retry wrapper\nfunction withRetry\u003CT>(fn: () => Promise\u003CT>, attempts = 3): () => Promise\u003CT> {\n  return async () => {\n    for (let i = 0; i \u003C attempts; i++) {\n      try {\n        return await fn()\n      } catch (e) {\n        if (i === attempts - 1) throw e\n        await new Promise(r => setTimeout(r, 1000 * (i + 1)))\n      }\n    }\n    throw new Error('Unreachable')\n  }\n}\n\nconst fetchWithRetry = withRetry(() => fetch('\u002Fapi\u002Fdata'))\n",[213],{"type":93,"tag":126,"props":214,"children":215},{"__ignoreMap":88},[216],{"type":99,"value":211},{"type":93,"tag":94,"props":218,"children":220},{"id":219},"when-not-to-go-functional",[221],{"type":99,"value":222},"When NOT to Go Functional",{"type":93,"tag":224,"props":225,"children":226},"ul",{},[227,233,238],{"type":93,"tag":228,"props":229,"children":230},"li",{},[231],{"type":99,"value":232},"Performance-critical loops (allocations from spread\u002Fmap add up)",{"type":93,"tag":228,"props":234,"children":235},{},[236],{"type":99,"value":237},"When mutation is clearer (sorting an array in place)",{"type":93,"tag":228,"props":239,"children":240},{},[241],{"type":99,"value":242},"When it makes code harder to read (over-composition)",{"type":93,"tag":102,"props":244,"children":245},{},[246],{"type":99,"value":247},"FP is a tool, not a religion. Use it where it makes code clearer and more reliable.",{"type":93,"tag":249,"props":250,"children":251},"style",{},[252],{"type":99,"value":88},{"title":88,"searchDepth":254,"depth":254,"links":255},2,[256,257,258,259,260,261,262],{"id":96,"depth":254,"text":100},{"id":109,"depth":254,"text":112},{"id":137,"depth":254,"text":140},{"id":156,"depth":254,"text":159},{"id":186,"depth":254,"text":189},{"id":200,"depth":254,"text":203},{"id":219,"depth":254,"text":222},{"success":4,"data":264},{"items":265,"pagination":322},[266,274,282,290,298,303,308,315],{"id":267,"name":268,"description":269,"parentId":14,"createdAt":270,"updatedAt":270,"parent":14,"children":271,"_count":272},"ai-future","AI & The Future","Artificial intelligence and emerging technology","2026-07-24T06:02:45.990Z",[],{"posts":273},1,{"id":275,"name":276,"description":277,"parentId":14,"createdAt":278,"updatedAt":278,"parent":14,"children":279,"_count":280},"tools-productivity","Tools & Productivity","Developer tools and workflow optimization","2026-07-24T06:02:45.712Z",[],{"posts":281},7,{"id":283,"name":284,"description":285,"parentId":14,"createdAt":286,"updatedAt":286,"parent":14,"children":287,"_count":288},"career","Career & Growth","Professional development for developers","2026-07-24T06:02:45.486Z",[],{"posts":289},3,{"id":291,"name":292,"description":293,"parentId":14,"createdAt":294,"updatedAt":294,"parent":14,"children":295,"_count":296},"opinion","Opinion & Analysis","Industry analysis and technical opinions","2026-07-24T06:02:45.272Z",[],{"posts":297},6,{"id":50,"name":51,"description":52,"parentId":14,"createdAt":299,"updatedAt":299,"parent":14,"children":300,"_count":301},"2026-07-24T06:02:44.965Z",[],{"posts":302},21,{"id":46,"name":47,"description":48,"parentId":14,"createdAt":304,"updatedAt":304,"parent":14,"children":305,"_count":306},"2026-07-24T06:02:44.689Z",[],{"posts":307},24,{"id":309,"name":310,"description":311,"parentId":14,"createdAt":312,"updatedAt":312,"parent":14,"children":313,"_count":314},"devops-cloud","DevOps & Cloud","Infrastructure, deployment, and cloud computing","2026-07-24T06:02:44.453Z",[],{"posts":297},{"id":316,"name":317,"description":318,"parentId":14,"createdAt":319,"updatedAt":319,"parent":14,"children":320,"_count":321},"web-development","Web Development","Frontend and backend web development tutorials and guides","2026-07-24T06:02:44.169Z",[],{"posts":307},{"page":273,"limit":64,"total":64,"totalPages":273,"hasNext":323,"hasPrev":323},false]