DEV Community

Discussion on: 10 Clean code examples (Javascript).

Collapse
 
jamesthomson profile image
James Thomson

Myself, I would call most of these "less code" examples, not necessarily "clean code". Imo, clean code is legible code. A lot of these examples require the developer more mental fatigue. Some of these I do, but others I definitely avoid, especially #10.

Collapse
 
weironiottan profile image
Christian Gabrielsson

Agreed with you, Code Readability should trump trying to shave off lines of code.

Collapse
 
redbossrabbit profile image
Ibeh Ubachukwu

Thank you. I should probably work on my article title naming 😅

Collapse
 
khangnd profile image
Khang

Considering all the feedback, I do believe this article should be renamed to avoid misleading to learners, seriously.

Thread Thread
 
redbossrabbit profile image
Ibeh Ubachukwu

Nah..😄. I think the feedback will help people understand better what clean code is and isn't.

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

I don't think #10 is all that bad. It's a bit confusing to figure out which variable gets assigned to the others, but that's easily figured out to be the right-most variable. Logically speaking, it does make sense: all those variables end up being equal to each other.

Collapse
 
jamesthomson profile image
James Thomson

It's a bit confusing to figure out which variable gets assigned to the others

That’s exactly my point. It causes mental fatigue. If you have to stop and think about how something as simple as this is constructed then it reduces the legibility of the code. It’s not that hard to figure out, but it still isn’t absolutely clear and imo it’s unnecessary.

Thread Thread
 
mellen profile image
Matt Ellen

10 could be really bad in a language like c++ with operator overloading. But, yeah, the "incorrect" version is much clearer, regardless.

Thread Thread
 
dasdaniel profile image
Daniel P 🇨🇦

what about const [a, b, c] = [d, d, d]; ?

brent approves

Collapse
 
dasdaniel profile image
Daniel P 🇨🇦

☝💯
A bunch of these seem more clever than clean.

I consider the #1 priority of the code to easily communicate what is happening.
consider these two examples

const a = foo.x, b = foo.y;

✔️ const { ['x']: a, ['y']: b } = foo;

I don't know if I'm "over-indexing" on my experience here, but I'd say the "incorrect" example is easier to comprehend.

Collapse
 
jamesthomson profile image
James Thomson

The "incorrect" version is definitely less cognitive load. I also prefer individual const definitions as well for that extra level of legibility when scanning the code.

Collapse
 
charleshimmer profile image
Charles Himmer • Edited

#4 could also be written much simpler like this:
const { x: a, y: b } = foo;

Collapse
 
ishwarm81238332 profile image
Ishwar More

But there is no b. keys are different and value is same (here a).

const { ['x']: a, ['y']: a } = foo; will not be possible

Thread Thread
 
jamesthomson profile image
James Thomson

It's re-assigning the value. ['y']: b assigns the value of y to b so you can now access it as b.