10 JavaScript Clean Code Examples

10 JavaScript Clean Code Examples

Here are ten examples of JS code you should be considered when making sure your code doesn't smell!

These are methods to use conditional operators, assign values, keys, etc. I can apply these into all areas from nodejs, to react to ensure I'm writing clean code.

First time doing a video like this explaining javascript, let me know what you think and if you want more like this.

#javascript #js #development

Check out the full article by Ibeh Ubachukwu below!

Design for Developers - Enhance UI
A book I've created to help you improve the look of your apps and websites.

👨‍👨‍👦‍👦 If you want to support me, become a member!

Feel free to follow me on:

[GabrielAlves-hmgu]

Most of those are not clean code, instead they are "look how smart i am hacks". I doubt most people on your team will look at those and just get the meaning straight away. Clean Code is not about less lines, is about more understandable code.

[ninecrowns]

I'd break out some of these into multiple variables instead of trying to be clever on one line. Readability > everything.

[rungxanh]

They might look clean, but a few are IMHO a nightmare for code readability 😳

[carlosss]

A “clean code” means nothing to me if I struggle trying to understand it the next time I check those lines

[DreamingDolphing]

9. In modern javascript you can use '_ ' delimiter symbol for numbers: like this 10_000_000_000

[PuerinTheHunter]

#4 it seems like a bad idea to make code less obvious by using an obscure destructuring.

The last tip at the end about debugging is worth mentioning:

console.log() can be shortened to c() via object destructuring assignment.

const { ['log']: c } = console;
c("something");

[sharks]

This video should be called "Javascript Unreadable Code Examples"

[Blast-Forward]

#7 I think it is more expressive to use an if statement than doing "foo && bar()".

[artursargsyan]

For the 2. I'm using
const key = c > d ? 'foo' : 'bar'
a[key] = 'apple'

[zachgoll]

I need to get better at using #7. Also, #2 is clever, I like it! 👍

[daroldsooo]

#6 elements declared with const cannot be reassigned inside forEach, though you might mutate the object instead. I think using .reduce() might be a better approach, assigning the result object to elements

[rahulr]

5:26 then give all elements same classname and call by either getElementsByClassName() or querySelectorAll()

[dylan]

Thanks for sharing this. As someone's already pointed out, most of these are good practices but more a case of of 'hey look how smart I am'. I think many of these would be frowned upon in a professional environment. Plus nobody likes a smart arse.

Number 8 is a great example - there's no way the suggested alternative is as readable as the original. Anyone with solid understanding of JS will understand the latter option, but that doesn't make it the wiser choice.

[anasouardini]

I think example 6 needs a little refactoring.
also now we use default arguments instead of the short circuiting.

[-Wust-]

Example 6 shows why I dont like comma seperating variable declarations, on the end of c = ... there is a ; which means, d will be set as var and not as const. I prefer const in each line.

[nazrulchowdhury]

Clean code! So clean that I can’t even read it..

[Blast-Forward]

The biggest code smell is to use JavaScript for you "small" project when in the end you will regret to not have used TypeScript.

[theodoredavis]

The main goal of clean code is readability! 2.a is much easier to read than 2.b

[sourabhvaishnav]

Simple tricks to make life easy.. and difficult at the same time.

[demimurych]

00:03:54 *5. Array indexed*
let [a, b] = foo;
This code has performance issues.
This code creates a loop that aims to iterate over all the properties of the array. This is a lot of code. As a consequence, it is very slow.

It is much more efficient to do it like this:
let {0: a, 1: b } = foo;
In this case, only 4 bytocde operators will be created. Which is much faster than creating a full cycle.

00:04:46 *Multiply elements from the DOM*
The code that you marked as bad is efficiently optimized by v8.
The code that you marked as good can hardly be optimized by v8.