DEV Community

Cover image for 7 Tips for Clean Code in JavaScript You Should Know

7 Tips for Clean Code in JavaScript You Should Know

Kai on January 05, 2021

This post was originally published at kais.blog. Let's move your learning forward together! Follow me on Twitter for your daily dose of developer ...
Read full post
Collapse
 
havespacesuit profile image
Eric Sundquist •

Sometimes it is easier to use a boolean flag as a function argument, if splitting the function would result in two almost identical functions. But rather than pass in a boolean, I like to give a unioned string option in TypeScript which is descriptive of what the flag means:

function loadSchema(schema: Schema, sync: 'sync' | 'async') {
 // 
} 

// One eterminty later...

loadSchema("...", 'sync')
Enter fullscreen mode Exit fullscreen mode
Collapse
 
kais_blog profile image
Kai •

Yeah, nothing is set in stone. If you feel like this is appropriate, go for it. In my opinion it's much better than a boolen flag already. If you are using TypeScript this is a good alternative. However, for JavaScript I won't recommend this, as you could do the following:

loadSchema("…", "fast")
Enter fullscreen mode Exit fullscreen mode

At first glance it's not obvious that "fast" is an invalid argument here.

Collapse
 
attraverso_dev profile image
attraverso •

Thank you for sharing this knowledge. While I was reading I recognized a couple of mistakes/bad practices I've been seeing in the work I'm collaborating on these days... I'll make sure to try and correct them from now on!

Collapse
 
kais_blog profile image
Kai •

Thanks!

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️ • • Edited 
// Did I mess up? It's nine zeroes, right?
const oneBillion = 1000000000;
Enter fullscreen mode Exit fullscreen mode

An easier fix here:

const oneBillion = 1e12 // Long scale rules
Enter fullscreen mode Exit fullscreen mode

and that's not even a "new" language feature. And to answer the question: 12. It's 12 zeroes. You can literally read it as a number.

Collapse
 
kais_blog profile image
Kai • • Edited

Thanks for your feedback. I really appreciate it. I'd like to add some thoughts to this, though:

First, one billion is 9 zeros in American and British English nowadays (short scale definition). This is sometimes confusing as it's 12 zeros in some other countries (long scale definition). For example, in Germany, we have Million (6 zeros), Milliarde (9 zeros) and Billion (12 zeros). As we have an english-speaking audience here, I've chosen to ignore my country's default definition and used 9 zeros. Also, you usually use English for code.

Second, you are right, you could use the e-notation. In this case, it would've been:

const oneBillion = 1e9; // short scale definition
Enter fullscreen mode Exit fullscreen mode

However, it's important to note that you are just adding zeros here. It's not so useful for other numbers.

Third, I feel like the numeric separator is still a very useful thing. As I said, the e-notation can be used, if you have to add zeros. Then, maybe it's easier. Nevertheless, the numeric separator has other uses as well:

const priceInCents = 490_95;

//  four-bit aggregations
const nibbles = 0b1011_1100_0011_1010;
Enter fullscreen mode Exit fullscreen mode

So, it might not be the right thing to use everytime. Yet, I'd like to highlight that nothing is set in stone and there are always exceptions and different opinions on how to structure and write clean code.

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️ •

I totally agree that _ has its uses and can make code much more reasonable in cases where e-notation wouldn't do so. But for the specific case of having lots of 0s, I'd always prefer the e-notation, because you can just read the number of zeroes. Something like 1e32 would be difficult to count even with _-notation.

Thread Thread
 
kais_blog profile image
Kai •

true. I agree. Maybe next time, I should choose a different example. Thanks for your input, though.

Collapse
 
vladi160 profile image
vladi160 •

Not a big deal and not important for the purpose of the article, just you can't use optional-chaining in a root developer.mozilla.org/en-US/docs/W...

Collapse
 
kais_blog profile image
Kai •

Thanks for mentioning this. I've just tried to come up with a code example fast and have overlooked that in the process. I'll fix it in the article.

Collapse
 
patilrushikesh247 profile image
patilrushikesh247 •

thank you for sharing this its very useful content

Collapse
 
kais_blog profile image
Kai •

Thanks. I'm glad I could help.