DEV Community

Cover image for Reusing operations for cleaner code
spyke
spyke

Posted on

1

Reusing operations for cleaner code

Imagine we're getting a list of users from an API:

const users = getUsers();
// [{ id, name, location, ... }, ...]
Enter fullscreen mode Exit fullscreen mode

We can do quite a complex processing using Undercut pipelines, but what if we need only to do something quick: like grouping users by a location and just passing the result further? Even calling pull may be too much:

sendPreview(pullArray([groupBy(u => u.location)], users));
Enter fullscreen mode Exit fullscreen mode

A case with a variable may be distracting too:

const usersByLocation = pullArray([groupBy(u => u.location)], users);

sendPreview(usersByLocation);
Enter fullscreen mode Exit fullscreen mode

Fortunately, Undercut operations are framework-agnostic, which means they work by themselves. An operation is just a functions doing something on an Iterables. Arrays are Iterables, so our users fit just right and groupBy(u => u.location)(users) will return grouped users:

sendPreview(groupBy(u => u.location)(users));
Enter fullscreen mode Exit fullscreen mode

Now it's better as we have no noise like pullArray and square brackets.

There's another use case: you can define selectors using operations like so:

const groupUsers = groupBy(u => u.location);

// And use later:
const usersByLocation = groupUsers(users);
Enter fullscreen mode Exit fullscreen mode

I have specifically chosen groupBy because with even shorter actions you will likely go with plain Array methods and Arrow Functions:

render(users.filter(u => u.active));
Enter fullscreen mode Exit fullscreen mode

But if you do need more serious job like flatMap/groupBy/orderBy/etc or already using Undercut in other places, consider reusing from the Undercut or your own custom operations.

Undercut docs: undercut.js.org
Previous post: Lazy data processing using Undercut

Hot sauce if you're wrong - web dev trivia for staff engineers

Hot sauce if you're wrong · web dev trivia for staff engineers (Chris vs Jeremy, Leet Heat S1.E4)

  • Shipping Fast: Test your knowledge of deployment strategies and techniques
  • Authentication: Prove you know your OAuth from your JWT
  • CSS: Demonstrate your styling expertise under pressure
  • Acronyms: Decode the alphabet soup of web development
  • Accessibility: Show your commitment to building for everyone

Contestants must answer rapid-fire questions across the full stack of modern web development. Get it right, earn points. Get it wrong? The spice level goes up!

Watch Video 🌶️🔥

Top comments (0)

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay