Clean code tips — Javascript mode

Image for post
Image for post
Photo by Denny Müller on Unsplash

Hi again, i made a related post earlier Code comments, for my perspective both parts code comments and clean code is very importan when you write code. It’s importan for your future self, and your future co-workers.

It’s very comfortable to believe that what you write yourself is easy to read and for understand for others. I’ve made that mistake many times over. And I thank a million times all the people who have corrected me and given me feedback.

Javascript is a language that changed a lot, in my opinion. And has gone from being a non-typed language to a typed language (old javascript vs modern javascript).

For example, I show an example of a dramatised code.

const numberList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
const checksNumbers = [3, 7, 9]
const blockNumers = [2, 4, 8]
numberList.filter( function(number){
for(let i = 0; i < blockNumers.length; i++){
if (number === blockNumers[i]){
return false;
}
}
if ( number % 2 != 0){
return false;
}
for(let i = 0; i < checksNumbers.length; i++){
if (number > checksNumbers[i]){
if (number % checksNumbers[i] == 0){
if (number - checksNumbers[i] > 0){
return true;
}
}
}
return false;
}
}).map( function(number){
return {
number: number,
isPair: number % 2 === 0,
isGrandThan10: number > 10,
};
});

Okay, I’m sorry, don’t kill me, it’s only a example to how to use modern javascript with bad practices and nothing is understood, if you don’t read it with attention. If you don’t pay attention the focus of the filter and map function is completely lost, and in my opinion, why do this? I think it’s better in this case not to use the filter or the map and simplify the code by using just another loop. The code works but when you will need make a change after months when you don’t remember nothing about this. You believe your future change will be quick or will you need to spend extra time to understand what the code was doing?

In my professional perspective the clean code decreases that code reading and comprehension time. Is totally FALSE, to think that this will waste our time. Because if you try, it’ll get easier over time. And in case of failure, that’s what PRs (Pull Requests) and code reviews are for. We are not all perfect.

Now a “real” use case. This use of code is very common. We have a bookList like that:

const bookList = [{
'title': 'Clean Code',
'author': {
'name': 'Robert C. Martín',
}
},{
'title': 'How to make a Joke',
'author': {
'name': 'Endika Iglesias',
}
},{
'title': 'Clean Architecture',
'author': {
'name': 'Robert C. Martín',
}
}]

And we need to sort by title and filter out some “blocked books” and return new info in a new format list.

const myBookList = bookList.sort(function(a, b) {
if (b.title > a.title) {
return -1;
}
if (a.title > b.title) {
return 1;
}
return 0;
}).filter((a) => ![ 'Endika Iglesias' ].includes(a.author.name)
).map(function(a){
return `${a.title} - ${a.author.name}`;
});

That is very common use and by my perspective is a wrong use, because sort function not is clear to understand. And filter function is the same case, now only are 1 author name but in the future? and finally map function… what is a? Ok some change are very obvious. Let’s start:

First of all we need to create a variable with blocker author names.

const blockedAuthorList = [ 'Endika Iglesias' ];

The next step, I think it’s a good idea to create a facility function to format the new list.

const formatBook = function(book) {
return `${book.title} - ${book.author.name}`;
};

If you see the function i use “book” variable, that is more clearly than “a” variable. Ok continues whit sort function.

const compareBookByTitle = function(currentBook, nextBook) {
if (nextBook.title > currentBook.title) {
return -1;
}
if (currentBook.title > nextBook.title) {
return 1;
}
return 0;
};

Knowing the name of the variables, it’s much easier to understand what it does, no? Well and to finally our code look like this:

const myBookList = bookList.filter(
book => !blockedAuthorList.includes(book.author.name)
).sort(compareBookByTitle)
.map(formatBook);

And another extra tip, if you filter first, the sort function won’t need to overwork. That is clear code and 100% testable because you can create a unit test for compareBookByTitle to check order correctly and formatBook to check the response format correctly.

I hope you like the post, thanks for reading.

Written by

Senior Software engineer at @eventbrite

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store