DEV Community

10 rules to help you write cleaner js code

Melvinvmegen on January 07, 2024

What is clean code? That's a really controversial question and i'd like to say there are many answers to this topic but as a general i...

Read full post

Sean Dinan • Jan 8 • Edited

Mostly agree with your points, with 2 caveats:

I think abbreviations are OK for most inline methods.
I think anonymous functions are typically fine to pass as arguments or to return for curried functions. The debugger is still usually descriptive enough to know where a problem is.

let pandaCount = bears.filter(b => b.type === 'panda').length;

function addAmount(amount){
  return (val) => val + amount;
}

const addBakersDozen = addAmount(13);

pandaCount = addBakersDozen(pandaCount);

For complex, multiline methods I'd usually abstract it out though.

const fastFriendlyPandas = bears.filter(isFastFriendlyPanda);

function isFastFriendlyPanda(bear){
  return (
    bear.type === 'panda' &&
    bear.velocity >= 20 &&
    bear.kindnessQuotient >= 50
  )
}

Melvinvmegen • Jan 18

Great addition thanks!

I have to say i also use abbreviations in for loop for example where I believe it's descriptive enough but i generally try to avoid it for variables or function naming to make sure my fellows or even my future self will be able to read through it with ease.

As for functions it's mostly fine indeed but in general i want people to consider this: why take the risk to deteriorate debugging experience just to skip a few characters?

Mateusz Koteja • Jan 8

ES6 is the latest version of Ecmascript? Dude, it's 8 years old. The latest version is 2023.

Chatgpt wrote this or what?

Samuel Rouse • Jan 8

ES6 has become a catch-all for all later updates. This is likely because it was the major update and people needed a term to differentiate when searching for questions/answers/solutions/examples/everything to ensure they didn't get older results.

It's not right, but is is very common.

Luke Inglis • Jan 8

Indeed ES6 represents the biggest change when a lot of people would consider 'modern' javascript was born. That was the sea change. It's also the point at which versioning became annual. 'ES6' is kinda shorthand for the post ES6 era.

Melvinvmegen • Jan 18

No i wrote that, but you're right it's probably not the most appropriate term.

To me, ES6 is a label that represents the new era in JavaScript, at which point every new version would build upon it.
I mean, out the top of your head could you mention what ES2022 or even ES2023 introduced?

I couldn't and that's probably normal because it wasn't has disruptive, "just" a few features added.

Allan Bonadio • Jan 11

Naming Conventions: The rules for naming in the code are pretty much drilled into everybody's head. What bothers me when I read code, is when the meaning drifts from the original name. One obvious case is when you change the name of a control, like a checkbox, but the variable name stays the same. Sometimes, the role of the control drifts farther away from the original name, but nobody changes the variable name. I've even seen variables or functions named the opposite of what they do. And, you know, doing the programming, sometimes you just don't pay attention. Well, new readers of that code do. This is the kind of thing that makes code hard to read, if you have to constantly re-map names in your head.

So, when the role of a variable or function changes, change the name, too. Always global search and replace to make sure you change every last instance! Including in comments.
This is good to do in refactoring. I usually gravitate towards the name on the UI, if any.