Write cleaner and briefer code

Nguyễn Quyết
Jul 24 · 4 min read

I recently wrote this.

Many junior developers and those who are new to JavaScript frequently ask, “Why do we need to split things up into many methods like map, filter, find, andreduce? Why don’t we just use a for loop? It can handle all kinds of logic that those array methods provide.”

The answer is simple: With those methods, we can write cleaner, better, and easier-to-read code.

Before explaining why, I want to introduce you to some new concepts.


Point-Free Style

Point-free style is a technique that improves readability by eliminating unnecessary arguments.

Let’s have a look at this code:

const scores = [3,1,5,7,9]
const goodScores = scores.filter(function(score){
return score >= 7
})

Yup, easy to understand; this function helps us filter out scores ≥ 7. We can make it better:

const scores = [3,1,5,7,9]
const isGoodScore = score => score >= 7
const goodScores = scores.filter(score => isGoodScore(score))

Yeah, it’s a bit better to name the function isGoodScore . But we can make it even better with point-free style.

const scores = [3,1,5,7,9]
const isGoodScore = score => score >= 7
const goodScores = scores.filter(isGoodScore)

See, we can trim out the arguments and make it like this. The code

const goodScores = scores.filter(isGoodScore)

is much more like human language, easy to understand for everyone and shorter.


Curried Functions

A curried function is a function that takes multiple arguments one at a time.

This is a normal function:

const add = (a, b, c) => a + b + c
add(1,2,3) // This will return 6

This is a curry function:

const add = a => b => c => a + b + c
add(1)(2)(3) // This will also return

So, why do we need curried functions, and how do they help to write code better?

OK, I’ve had these questions in mind for years, and I’ll explain through this example:

const scores = [3,1,5,7,9]
const isGoodScore = score => score >= 7
const goodScores = scores.filter(isGoodScore)

Let’s take the previous example. What if we want to separately filter out scores equal to 1, to 2 … all the way to 10? It’s OK to define ten functions isEqual1 isEqual10, but with curried functions, we can improve it by having only one function named isEqual. The code will look like this:

const scores = [3,1,5,7,9,1,5]
const isEqual = compareValue => score => score === compareValue
const scoresEqual1 = scores.filter(isEqual(1))

Awesome. :D No need to write ten different functions anymore.

Just in case you’re not familiar with fat arrow functions, the curried functions above can be rewritten like this:

const isEqual = function(compareValue){
return function(score){
return score === compareValue
}
}

So, I guess you understand point-free style and curried functions now. Let’s make a function, addToCart, using a for loop.

See, we’re using a for loop to look for a product in the products array and the shoppingCart array. We then check if that product is already in shoppingCart. If so, we increase quantity; if not, we add that product to shoppingCart.

Let’s remake it with a find method, point-free style, and curried functions.

See, instead of 25 lines of code with a for loop, now we only need 14 lines with find and point-free style. And of course, this function is better in many aspects like readability and cleanness. The function productById can also be reused in many other places.


More

With array methods and point-free style we can write more clean code like this:

const products = [....] //An array of product object
const toProductView = product => (
{
title: product.name + ' ' + product.brand,
price: product.newPrice
}
const isValid = product => product.price > 0
const displayProducts = products.filter(isValid).map(toProductView)

Hope you get the idea of using array methods with point-free style. You can practice by opening your current project and replacing for loops with array methods and callback functions with point-free style.

Thanks for reading.

Better Programming

Advice for programmers.

Nguyễn Quyết

Written by

javascrip lover

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade