JavaScript developers often swap tips in threads about code that is easier to test, change, and scale. A recurring topic is functional programming and how it compares to more traditional OOP-style code.<\/p>\n\n\n\n
What is functional programming in JavaScript? How does it differ from the typical class-based approach, and what practical patterns should I use in real projects?<\/em><\/p>\n\n\n\n I\u2019m especially interested in pure functions, immutability, composition, and how these ideas apply to things like API data, UI state, or building image and video URLs. Any examples are appreciated.<\/em><\/p>\n\n\n\n Functional programming in JavaScript is a style that focuses on building programs by composing small, pure functions that transform data. Instead of mutating state and relying on side effects, you write functions that always return the same output for the same input and avoid changing external variables.<\/p>\n\n\n\n Pure function and immutability:<\/p>\n\n\n Higher-order functions and composition:<\/p>\n\n\n Declarative data transforms with map, filter, reduce:<\/p>\n\n\n Side effects like network requests are inevitable. Keep them at the edges and transform results with pure functions.<\/p>\n\n\n URL generation is a great fit for pure functions: an input object maps to a stable image URL<\/a>. You can build composable helpers that add transformations without mutating state.<\/p>\n\n\n Choosing the right output format is also a pure decision based on capabilities. For example, modern formats can lower bandwidth while keeping quality. If you are weighing options, this guide on WebP format technology<\/a> is a helpful overview.<\/p>\n\n\n\n You can keep everything functional while using Cloudinary. Treat transformations as data, compose them, and map over lists of assets to produce deterministic URLs. That pairs well with responsive UIs and serverless functions.<\/p>\n\n\nAnswer:<\/h2>\n\n\n\n
Core Ideas<\/h3>\n\n\n\n
\n
Quick Examples<\/h3>\n\n\n\n
\/\/ Pure add<\/span>\nconst<\/span> add = (a, b<\/span>) =><\/span> a + b;\n\n\/\/ Immutable update<\/span>\nconst<\/span> addTag = (post, tag<\/span>) =><\/span> ({\n\u00a0 ...post,\n\u00a0 tags<\/span>: [...post.tags, tag]\n});\n\nconst<\/span> original = { id<\/span>: 1<\/span>, tags<\/span>: [\"js\"<\/span>] };\nconst<\/span> updated\u00a0 = addTag(original, \"fp\"<\/span>);\n\/\/ original stays unchanged<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n\/\/ Higher-order function<\/span>\nconst<\/span> withLogging = fn<\/span> =><\/span> (...args<\/span>) =><\/span> {\n\u00a0 console<\/span>.log(\"calling with\"<\/span>, args);\n\u00a0 const<\/span> result = fn(...args);\n\u00a0 console<\/span>.log(\"result\"<\/span>, result);\n\u00a0 return<\/span> result;\n};\n\n\/\/ Compose utility<\/span>\nconst<\/span> compose = (...fns<\/span>) =><\/span> x<\/span> =><\/span> fns.reduceRight((v, f<\/span>) =><\/span> f(v), x);\nconst<\/span> pipe\u00a0 \u00a0 = (...fns<\/span>) =><\/span> x<\/span> =><\/span> fns.reduce((v, f<\/span>) =><\/span> f(v), x);\n\n\/\/ Example pipeline<\/span>\nconst<\/span> trim = s<\/span> =><\/span> s.trim();\nconst<\/span> lower = s<\/span> =><\/span> s.toLowerCase();\nconst<\/span> slugify = s<\/span> =><\/span> s.replace(\/\\s+\/g<\/span>, \"-\"<\/span>);\n\nconst<\/span> toSlug = pipe(trim, lower, slugify);\ntoSlug(\"\u00a0 Hello World\u00a0 \"<\/span>); \/\/ \"hello-world\"<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nconst<\/span> users = [\n\u00a0 { id<\/span>: 1<\/span>, name<\/span>: \"Ari\"<\/span>, active<\/span>: true<\/span>,\u00a0 score<\/span>: 42<\/span> },\n\u00a0 { id<\/span>: 2<\/span>, name<\/span>: \"Bea\"<\/span>, active<\/span>: false<\/span>, score<\/span>: 10<\/span> },\n\u00a0 { id<\/span>: 3<\/span>, name<\/span>: \"Cam\"<\/span>, active<\/span>: true<\/span>,\u00a0 score<\/span>: 60<\/span> }\n];\n\nconst<\/span> topActiveNames =\n\u00a0 users\n\u00a0 \u00a0 .filter(u<\/span> =><\/span> u.active)\n\u00a0 \u00a0 .filter(u<\/span> =><\/span> u.score >= 40<\/span>)\n\u00a0 \u00a0 .map(u<\/span> =><\/span> u.name);\n\/\/ [\"Ari\", \"Cam\"]<\/span>\n\nconst<\/span> totalScore =\n\u00a0 users.reduce((sum, u<\/span>) =><\/span> sum + u.score, 0<\/span>);\n\/\/ 112<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nAsync and Side Effects the Functional Way<\/h3>\n\n\n\n
const<\/span> parseUsers = data<\/span> =><\/span> data.users ?? [];\nconst<\/span> active = us<\/span> =><\/span> us.filter(u<\/span> =><\/span> u.active);\nconst<\/span> byName = us<\/span> =><\/span> us.map(u<\/span> =><\/span> u.name);\n\nfetch(\"\/api\/users\"<\/span>)\n\u00a0 .then(res<\/span> =><\/span> res.json())\n\u00a0 .then(pipe(parseUsers, active, byName))\n\u00a0 .then(names<\/span> =><\/span> console<\/span>.log(\"Active:\"<\/span>, names))\n\u00a0 .catch(console<\/span>.error);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nWhy Use FP in JS?<\/h3>\n\n\n\n
\n
Applying FP to Media URLs and Transformations<\/h3>\n\n\n\n
\/\/ A generic, composable URL builder pattern<\/span>\nconst<\/span> join = (sep, parts<\/span>) =><\/span> parts.filter(Boolean<\/span>).join(sep);\n\nconst<\/span> transform = parts<\/span> =><\/span> join(\",\"<\/span>, parts);\nconst<\/span> withSize\u00a0 = (w, h, mode = \"c_fill\"<\/span><\/span>) =><\/span> transform([`w_${w}<\/span>`<\/span>, `h_${h}<\/span>`<\/span>, mode]);\nconst<\/span> quality \u00a0 = q<\/span> =><\/span> transform([`q_${q}<\/span>`<\/span>]);\nconst<\/span> format\u00a0 \u00a0 = f<\/span> =><\/span> transform([`f_${f}<\/span>`<\/span>]);\n\nconst<\/span> buildUrl = ({ cloud, publicId, transforms = [] }<\/span>) =><\/span>\n\u00a0 `https:\/\/res.cloudinary.com\/${cloud}<\/span>\/image\/upload\/${join(\",\"<\/span>, transforms)}<\/span>\/${publicId}<\/span>`<\/span>;\n\nconst<\/span> thumb = pipe(\n\u00a0 ()<\/span> =><\/span> [withSize(320<\/span>, 320<\/span>), quality(\"auto\"<\/span>), format(\"auto\"<\/span>)],\n\u00a0 transforms => ({ cloud<\/span>: \"demo\"<\/span>, publicId<\/span>: \"sample.jpg\"<\/span>, transforms })\n);\n\nbuildUrl(thumb());\n\/\/ https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_320,h_320,c_fill,q_auto,f_auto\/sample.jpg<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nUsing Cloudinary in a Functional Workflow<\/h3>\n\n\n\n
\/\/ Map a gallery of product images to optimized variants<\/span>\nconst<\/span> toVariant = (size<\/span>) =><\/span> (img<\/span>) =><\/span> buildUrl({\n\u00a0 cloud<\/span>: \"demo\"<\/span>,\n\u00a0 publicId<\/span>: img.publicId,\n\u00a0 transforms<\/span>: [withSize(size, size), quality(\"auto\"<\/span>), format(