For the Love of God Don't Write Code Like This (Clean Code with Javascript examples)

How to Write Clean Code! In this video we show you how to become a better software engineer. Writing high performant code is easy, writing clean code that future developers can understand? Now that's the real challenge. This video takes inspiration from Robert C. Martin's famous book "Clean Code" and illustrate the ideas from the book using examples in Javascript.

╔═╦╗╔╦╗╔═╦═╦╦╦╦╗╔═╗
║╚╣║║║╚╣╚╣╔╣╔╣║╚╣═╣
╠╗║╚╝║║╠╗║╚╣║║║║║═╣
╚═╩══╩═╩═╩═╩╝╚╩═╩═╝

[algo.monster]

What's the ugliest piece of production code you've seen? Someone once wrote i += 0x2000 >> 13 and the whole team has yet to figure out what it means, please help.

[maksymiliank]

While I do agree with most of the statements in this video, I have to disagree about a couple of things. Type checking in a language like JavaScript is good because it prevents a lot of runtime bugs. Polymorphism and oop are often times hard to maintain in the long run, because you create all of those layers of abstraction and put a lot of constraints on the code by extracting the common behavior into an abstract class or an interface, and then when you have to change something it just becomes a mess. Also, if you are dealing with code which has to be very efficient then inheritance and polymorphism are a no go. It kills the performance. CPU can't predict branches, you have a lot of heap allocated objects, which cause memory defragmentation and you can't vectorize the operations. Composition is almost always better, even if you have to duplicate a little bit of code. With composition it is much easier to change things in one class and leave the others unchanged and still working as intended.

[pierreollivier]

I read the book "Clean code" and your spot on, but clean code isn't the most important thing Imo, it's surely something to keep in minds and we should always try to write clean code, but some of the "Clean code" recommendation, don't really apply well in the real world, splitting functions does indeed improve readability, but it can also greatly impact performance, same goes or if else statements or switch statements, yes having some nice functions is more readable, but switch/if statements are sometimes just simply quicker, and i'm not gonna start on polymorphism OO, or inheritance. Of course performance isn't always a big concern and in this case yes the "Clean code" paradigm should be a goal. But imo a good engineer, is someone that has a good toolbox, and know which tool to use, which style fits the needs of the project, role, situation etc.

[Ascyt]

Well-made video though, some things I would disagree on, but I have to say that the video is surprisingly good, keep going

[vikingthedude]

I think the vehicle example at 5:28 does demonstrate an example where subtypes should follow the same contract to avoid switch-like code, but in some situations, subtypes don’t follow the same contract. Example: optional type might have subtypes None and Some(T). In such situations (ie sum types) we need the switch-like code

[nicejungle]

very good advice, I almost agree on all, except perhaps on the copy in addItemToCart function for memory concerns.
But truth is, addItemToCart should be a method addItem to the Cart class and therefore modifying the Cart object

[a_maxed_out_handle_of__chars]

good video, there are few points which I agree and few I disagree

[Ascyt]

Also Gitlogs can be very annoying when you want to find a specific piece of code that exited for like one version three weeks ago.

[landon.packrat]

Is this video satire? I'm guessing it's satire from your "i += 0x2000 >> 13" comment, but you are playing it so straight I can't tell. Most of the code changes are harder for me to read. I mainly work in strongly-typed languages though, so maybe something is getting lost in translation?

Take your second example, "GetUserInfo(), GetClientData(), and GetCustomerRecord()". Info, Data, and Record are all synonyms. The most I get from that is the amount of data being returned. If you're using a strongly-typed language, you can just hover your mouse cursor over the function name to get that info. On the other hand, "User, Client, and Customer" contain context information about who you are getting information about. They tell you the account type.

Users: anyone using the software
Clients: users who are part of a paying organization (as opposed to personal accounts using the free version)
Customers: People making purchasing decisions (either as personal accounts or as part of an organization, may or may not be users if part of an organization)

These three terms give you much more context on what kind of information is being returned. Knowing the account type will also tell you how much information is going to be returned, and what type of information will be returned. That means the terms "User, client, and customer" also imply the terms "info, data, and records". The function names should have been, "GetUserInfo(), GetClientInfo(), and GetCustomerInfo()".

Also take your TravelToTexas() example. This one is over-simplifying to the point of hiding important information. If you have two object types that are polymorphic, then having both of them implement move() is the standard implementation. That means that having separate function names tells you something important. It tells you that the author of these two functions thought there was enough of a difference in how these functions work that they should NOT be considered the same function.

In code review I would flag your TravelToTexas() function, not drive() and pedal(). Are you really sure that bicycling cross-state is a valid use-case? If so, there is probably a lot more constraints to the trip than driving by car.

[YashDhankhar]

Is there a vs code theme that can make my code look like the screenshots in video

[thegreatdissector]

No. Why make a copy of an object and not modify the original. That's slow. Software is slow enough.

[Ascyt]

Mate there are more languages than JavaScript.

[exmachina]

The major weakness of this video is that it explains almost none of the whys for the advice it gives. People giving advice on best practices should never forget to include the rationale for them (which often leads to a discussion of trade offs, something far more useful for young engineers)

[longlivingdaemon]

I always thought as your objects creation parameters get overall large or you have a lot of variations of a constructor, there is a potential problem (telescoping constructor problem) and the solution was to use a Builder pattern to help this?

[jorgpiano]

5:17 It really issent... I agree that maybe it would be good to give the expressions some names... The following code should simply be showSpinner(), so the information you might derrive from the if expression really issnt helpfull. To me this is obfuscating the code unnesecarly. If the expressions where more complex, maybe you would make it more clear by moving the first expression into something like isLoading()...

If the next statement in your code would not be showSpinner() or something like that, I would focus on fixing that, so that is clear, instead of hiding the logic inside the if statement. Also another thing that would make it more clear is to fix the fsm variable, from reading the code I assume it is a Finite State machine, but that is a educated guess. I would do what you propose here: 0:53... I agree that splitting things like this out is a good thing when things become complex, or it is repeated many places, but from this issolated example, I dont think it makes the code more clear, or easier to reason about.

The other examples I agree with, but I dont agree with this one. At least not given this example

[ayoubbelatrous]

in my opinion these rules only apply to API interfaces.

[PixelzByPixelz]

Anyone else guilty of just console logging errors and not properly handling them? 😅

[phantam]

IMO commented code aren't necessarily bad, be careful deleting something seems unecessary

[stucifdgdfsgrt]

Don't have 8 parameters on a function. Have 8 parameters bunched together so they look like two... Yeah that will help reading.

[hadeseye]

Clean code? Java script? Class? Object? Are you kiddin' me? You really weren't paying attention while reading those Quake engines, or Linux source. Aaaa. You are not a C developer.