Write small functions
Write functions to do one thing and do it well.
Do not write functions longer than 50 lines. — ESLint (Default Configuration -JavaScript)
The default configuration of ESLint enforces that maximum lines in function to 50 lines.
I prefer it to be maximum 20 lines.
The smaller the better. ;)
Why 20 Lines?
It reduces complexity of your code. Makes it easy to understand. Okay, that you knew already I guess. ;) Of course it reduces complexity but there are some small points I want to point out in this article. For that we need to answer the question, why functions were invented. ;)
Why Functions?
Functions or Sub-routines were invented to achieve mainly two things.
- Re-usability
- Abstraction
The main thing comes to our mind is Re-usability. Do not write the same code again and again. Write a function to do the thing and use it everywhere. That’s what we do, don’t we? That’s cool. It’s even environment friendly. Reduces the carbon footprint too. ;)
That’s the main purpose of functions, but we don’t pay much attention to the second. Abstraction. At least I didn’t. Until very recently I saw that it is encourage to divide work into many functions even if they are not reused, but why?
The answer comes from a very famous and very old saying.. It is,
DOTADIW
Do One Thing and Do It Well — Unix philosophy
This is a very respected saying in the history of computer science. It was first stated by Douglas McIlroy, and was accepted generally throughout the Unix community and then Linux Community.
Let’s do one thing… wait what?
The idea of this is, you should write programs that do one thing and one thing only. Your programs should not do many things. This encourage modularization.
So your functions should do the same. Do one thing. Not many things. If you are doing many things, then you should divide it to many functions.
But why? There are many reasons, but my favorite is this. → You don’t need comments to describe what the function does. The name of the function itself describe what it does.
If you had a function which do many things, well… you have two options.
- Write comments to describe what you are doing at each step. or,
- Write a comment on top of the function saying “Don not touch this. It’s my function, if you need anything to be changed, please consult me — Author”
Let’s see ;)
Let’s see some very simple examples how it works. Let’s think you are given and array of shapes. Shapes can be either squares, rectangles or circles.
For rectangles height and width are provided. For squares width is provides. For circles the radius is provided.
Your goal is to write a function to calculate the sum of area of all the shapes in the array.
[{height: 200, width: 30, type: 'rectangle'}, {radius: 50, type: 'circle'}, {width: 100, type: 'square'},... ]Let’s write the monolith answer,
function calculateTotalArea(shapes) {
return shapes.reduce((sum, shape) => {
// Calculate the area of this shape
let area = 0
if(shape.type === 'square') {
area = shape.width * shape.width;
}
if(shape.type === 'rectangle') {
area = shape.height * shape.width;
}
if(shape.type === 'circle') {
area = shape.radius * shape.radius * Math.PI;
}// Add it to the sum
return sum + area;
}, 0)
}
What is does is it runs array reduce function on each element of the array and add up their area.
Let’s divide it into small functions. ;)
function calculateTotalArea(shapes) {
return shapes.reduce((sum, shape) => {
return sum + calculateShapeArea(shape);
}, 0)
}function calculateShapeArea(shape){
let area = 0
if(shape.type === 'square') {
area = shape.width * shape.width;
}
if(shape.type === 'rectangle') {
area = shape.height * shape.width;
}
if(shape.type === 'circle') {
area = shape.radius * shape.radius * Math.PI;
}
return area;
}
See it’s very simple. ;)
Easier to say than implement of course. Anyway this idea is not new. If you try Google you may find many articles regarding this matter.
but most importantly do NOT do it because I say it. Also don’t over do it. Don’t split every line into functions. Everything has a negative impact, everything is a trade off. and..
That’s it… ❤
Thank you very much for reading. Feel free to express your opinion.
Some articles to refer if you like to explore more: