Thread by @MakadiaHarsh

16 JavaScript best practices to improve your code quality

THREAD 🧵:

Before we proceed,

"Programs must be written for people to read, and only incidentally for machines to execute."

—Unknown

{ 1 } Optional Chaining

The optional chaining operator (?.) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.

{ 2 } Data Structure

Carefully consider how you choose your data structures, Access on the left snippet here is ~70% faster than the one on the right because the left one requires no iteration. The right does.

{ 3 } Add Dynamic Object Properties

While defining an object, there might be a situation where you need to define the object's properties dynamically.

Let’s look at the example below.

{ 4 } Ternary Operators

The conditional (ternary) operator takes three operands:

1. A condition followed by a question mark ( ? )

2. An expression to execute if the condition is truthy followed by a colon ( : )

3. The expression to execute if the condition is falsy

{ 5 } Destructuring Assignment

This is a clear blessing to keep the code well-formatted. Unpacking objects or arrays is easier than ever before.

{ 6 } let vs const

Use const even for updating the array, it works as you are not reassigning anything.

Don't use let over const for the array.

{ 7 } Use Template Literals

Strings that we create with double or single quotes have a lot of limitations.

You might want to replace some of your strings with template literals to make working with them a lot easier.

{ 8 } Naming conventions

Take a look are below the examples

JavaScript variables are case-sensitive. Therefore, JavaScript variables with lowercase and uppercase characters are different

Naming Convention Continued ...

{ 9 } findIndex

This is the most underrated feature when it comes to finding a property value from an array of an object.

Use this over normal for loops.

{ 10 } Write Your Own Javascript Contracts and Docstrings

// Adding comments inside a function or using Docstring in the code makes things easier to understand.

Learn more here: jsdoc.app/index.html

{ 11 } Arrow functions

Arrow functions are another very important feature introduced recently to JavaScript. They come bearing many advantages.

{ 12 } Null-ish coalescing

Before introducing the null-ish coalescing operator, we had to use the OR operator || to fall back to a default value if the input was absent.

null coalescing operator ??, offers a better alternative

{ 13 } Make use of shorthand notation(Object Literals)

When designing objects or arrays in JavaScript, line space can be saved by opting for shorthand notation.

This is accomplished by setting the properties or cells of an object or array during declaration rather than after.

{ 14 } Don’t use delete to remove an item from an array

Use splice instead of using delete to delete an item from an array.

Using delete replaces the item with undefined instead of removing it from the array.

{ 15 } Set default values

When creating objects, you can set default values for some or all properties of the object.

Doing so ensures the values of each attribute are not undefined.

{ 16 } Avoid the use of eval() or the Function constructor

Use of eval or the Function constructor are expensive operations as each time they are called script engine must convert source code to executable code.

Thanks for checking this out.

If you liked this thread,

1. Follow @MakadiaHarsh for more such thread for wen development, no-code and personal growth.

2. Retweet the first tweet to help others.

Cheers! 🥂

https://twitter.com/MakadiaHarsh/status/1471504677925625863