8 Must Know Tips For Writing Clean JavaScript (Blind Reaction)

Let's react to this article on tips for writing cleaner JavaScript code from Alex Omeyer!

*** Resources ***

*** Timestamps ***
00:00 - Intro
01:20 - Use Try/Catch
03:25 - Use ESLint
05:00 - Track JavaScript Issues In Your Editor (Stepsize)
06:50 - Use Template Literal Strings
08:00 - Use Regex
09:15 - Use Optional Chaining
10:35 - Avoid Nesting
12:40 - Comment Atypical Code

STAY IN TOUCH 👋

QUESTIONS...?

[StuartAylward]

I also prefer to define functions as `function` rather than a `const` assigned to an anonymous function. I think it reads better and clearer since a `const` can be an object or array or a primitive type. Defining functions with the function keyword is just much clearer imo. I only use anonymous functions (fat arrrows) when writing inline callbacks.

I just don't buy into "use fat arrows everywhere" practice.

[hugodsa]

Before watching the video:

1) follow the standards and practices around whichever framework, libraries, team guidelines to assimilate your coding style to it.

2) write code that communicates intent

3) be consistent

4) write a test first that has your desired output or outcome, and make it work, then chunk it into functional pieces that separate concerns and responsibility, and iteratively refactor your code and tests

5) segregated core functionality from imperative shell to isolate side effects and keep your core logic testable and reliable.

6) read other codebases and expose yourself to learn new approaches, try them yourself, and reforge a new understanding.

7) pay forward by teaching others and bringing non technical people from the business to guide them through your logic, if it’s getting difficult to explain its highligh likely that you have named things badly. (This goes much in line with DDD) Domain driven development.

After all code is just instructions and a translation layer between a machine and an operation

[michaelash]

I've been using Regex in my development for years. I thought it was just me. I have a pretty strong understanding of regex so I often use it in searching and refactoring code. And most of the time the expressions themselves are pretty simple. It is extremely rare that I need to write any complex regexes. Since most tools let you do regex searches it's good to know that more people are taking advantage of this feature.

[dupre]

I also struggle with RegEx and I try to use it as little as possible. Fortunately, there is a member of my small team that is a RegEx master and they are my go-to resource.

[brianmmdev]

Awesome video! Re: comments - I lean towards using comments as little as possible. MOST of the time you can write code that makes perfect sense for others reading it, but there are definitely edge cases or "hacks" where it makes sense to comment why you are doing it. An example would be adding strange constants in performing calculations where the name of the constant might not clearly get across WHY you are doing the thing.

[ConnecticutAngler]

I like the concept of writing “self-documenting” code to help make it more readable while reducing the volume comments. I’ll generally opt to use more longer, more verbose, readable variable names to achieve this. Sometimes comments are just necessary and unavoidable, of course, but complex functions can be made much more readily intelligible if variables really spell it all out wherever possible.

[whiterockjoe]

It's a good point that Tutorials tend to skip the best practices to write code (like having Try-Catch). I understand that they want to make it easy for beginners, but it leads to bad practices early on. I don't think it's much harder to learn to code the best way from the get-go. If you know good resources to learn the best industry practices to write JS and architect code let me know.

[zalodias]

Best use case for me with RegEx is searching & making precise bulk changes on a large codebase.

Very helpful when you want to search for closely named variable names, or components with a similar prefix.

Definitely can increase productivity & speed up your dev speed

[mageprometheus]

I've just binge watched 90% of your videos from the past year. It's been great. Has your stress level gone up? High cortisol causes glitching in the thought process. Take care.

[zengamer]

Every time I try and use ESLint and Prettier I end up with weird conflicts where one will modify the code and then the other will flag it as incorrect and then I can't run anything. It's so frustrating. I think it might be VS Code itself fighting with my ESLint and Prettier configs? I don't know. I usually end up disabling prettier to fix it.

[dinckelman]

The first thing I do with a new TS project is setup a linter. An acquaintance has a package with all the rules exactly how we'd want it, so the whole config is just 3 lines. Those 3 lines would make a massive difference during development

[karlstenator]

I too struggle with Regex from time to time. Had to battle some today actually. Would be keen on resources... but tbh, I'm just waiting on an English-to-Regex AI conversion app to solve all my problems. 😂

[JeremyKolassa]

Dunno about Prettier, it's opinionated enough that it can sometimes cause problems, such as an application suite I'm building widgets for and whose default ESLint is set up to be diametrically opposed to it. Definitely agree with using TypeScript, template literals, and regex; nesting can be annoying but sometimes it's the best way. I like the idea of the Stepsize extension, but I don't know if I'd use it, simply because I tried to sell my coworkers on using the somewhat similar CodeStream extension and it just didn't fit the company's workflow.

[JDalmasca]

What was the extension that does the automatic conversion to template literal strings? I don't think you mentioned any names of extensions.

[xA]

At a minimum each class, method, or function should be commented preceding the readable code.

[faridguzman]

ive seen " senior developers " doing these nested if else statements and over use of callbacks, and after 4 mths just quit to join a younger team that actually know design patterns and best practices. i dont believe anyone can be truly senior unless u dream about clean code.

[jasongates]

1) Descriptive Variable Naming
2) Detailed Linter
3) DRY / Reusable Code
4) Separation of Concerns.
5) Comments when your team looks at the code and says "The heck does this do?"

[lucasrmendonca]

Hi James, what's the name of the extension that automatically converts the single quotes to backticks ?

[hugodsa]

I am using stepsize but it’s so much worse than sonar

[patrykkowalski]

I heard that putting try/catch everywhere is making app slower. Is that truth?