Top suggestions to write clean and easily scalable JavaScript

25/02/2022

Contributed by: Tripadvisor author

JavaScript is a language with its roots at the beginning of the web. It began as a scripting language. It has since evolved into an entirely functional programming language, with support for server-side execution. Modern web-based applications rely heavily on JavaScript, specifically single-page apps (SPAs). With new frameworks like React, AngularJS, and Vue.js, Web apps are built primarily with JavaScript. The process of scaling these applications -- frontend and a back-end can be complicated. If you have a poor setup, you'll soon hit the limits and become lost in the chaos. I want to offer some tips to aid you in writing simple code in a speedy method. This article is targeted at JavaScript designers of all levels. But, those with at least an intermediate understanding of JavaScript will be the most benefit from these tricks.

The 10 Most Amazing Easter Eggs In the Tech World

1. Remove your code

The central aspect I'd suggest to keep your codebase clean and easily read is keeping specific chunks of code (usually a function) separated by subject. If you code a function, it should be able to default to being a single purpose and shouldn't be able to do several tasks simultaneously.

In 3 minutes. learn to remove JavaScript dead code using google closure compile, Source: Youtube, Gaur Associates

Additionally, you must be cautious about causing adverse consequences, which means in most instances, you shouldn't modify anything out of your scope. Functions receive data using parameters, but the rest cannot be accessed. If you are trying to get something out of the program and return new values, you must do so.

2. Modularization

Of course, it is possible to combine multiple functions into one module (and classes, if you would like) when the functions function similarly or accomplish similar tasks. For instance, if you are required to complete several different calculations, you can break them into distinct steps (functions) that you could join. But, these functions could all be defined as a single document (module).

If you write frontend JavaScript, ensure that you utilize predefined exports of the essential items and name exports for additional items.

3. It is preferential to have multiple parameters rather than single object parameters

When declaring a function, you should always consider using more parameters than expected.

The reason is that you know precisely what you must give to the function when you read that first sentence of the declaration of the process.

Although functions are restricted in terms of size -- performing only one task. Processes may increase in size. Examining the function body for variables you require to send (contained within an object) takes longer. Sometimes, it may seem more straightforward to simply use the entire thing and pass it on to this function. However, if you want to increase the size of your application, this configuration is sure to help.

Passing Multiple Parameters | Calling function with multiple parameters | Function in C, Source: Youtube, GuruShishya

There's a particular moment when declaring parameters isn't logical. In my opinion, this is more than four or five parameters for a function. If your position becomes that large, you need to change to using objects parameters.

The primary reason is that parameters should be passed in a particular order. If you're using optional parameters that are not required, you have to provide undefined or null. If you have objects, you can pass the entire object, in which order and non-defined values are not necessary.

4. Use default values

Destructuring default values or even the basic parameters of a function are instrumental. They provide an example of how you could pass an operation. In addition, you can state what values are required and which ones are not.

Naturally, there are times when you do not make use of default values and instead issue an error when you do not provide an appropriate value. In most cases, this is a valuable technique.

5. Destructuring

Destructuring is an excellent tool that was first introduced in ES6. It allows you to grab specific fields from objects and assign them to a variable right away. It can be used for any object or module.

It is sensible to import only the functions you need to include in your file instead of the entire module and then use the parts you require. If you determine that you require an object for a function parameter, you can use destructuring too.

JS Destructuring in 100 Seconds, Source: Youtube, Fireship

As you can see, I know what I must provide to the function, even if it's contained within an object. To resolve the issue of knowing what's required, follow the next step!

(By the way, this is also applicable with React functions.)

6. Data scarcity

The earlier tips have led us to conclude: don't send on information that isn't needed. Again, this could mean a little more effort when configuring your functions. In the end, it will provide an easier-to-read codebase. It is crucial to understand precisely what values are used in a specific location.

7. Line and the limit of indentation

I've seen huge files, huge files. In reality, more than three thousand lines of code. The task of finding logic chunks is challenging to find within these files.

Thus, you should restrict your file's size to a specific amount of lines. I prefer to limit my files to less than 100 lines of code. Sometimes, it's hard to separate files, and they may increase to 200-300 lines and, in rare instances, even 400 lines.

Stand in Line, freeCodeCamp Basic Javascript, Source: Youtube, We Will Code

Beyond this point, it becomes overloaded and difficult to manage. You are free to create new folders and modules. Your project should resemble the forest of branches (module section) along with chapters (groups of modules and modules). Do not try to replicate the Alps by accumulating code in tight spaces.

Your actual files, by the context of the Shire with a few hills (trim indentation levels) in places; however, everything should be flat. Make sure to keep the amount of indentation to less than four.

It might be beneficial to turn on eslint-rules in these suggestions!

8. Use prettier

Working as a team requires using a style guideline that is clear and has proper formatting. ESLint has a large ruleset that you can tailor according to your requirements. You can also use eslint-fix that corrects some of the mistakes; however, it does not fit all.

Instead, I suggest employing The Prettier format to create your code. This way, developers don't need to rethink formatting their code and focus on writing quality code. The design will be consistent, and the formatting will be automated.

9. Use names for variables that are meaningful

In the ideal scenario, a variable must be named by its content. These guidelines will assist you in naming relevant names for variables.

Functions

Functions typically perform some task. To clarify, humans use verbs such as display or convert. It's a good idea to label your functions with an initial verb, e.g., alter currency or display username.

Arrays

They usually contain an inventory of items; Therefore, you should add an s to the variable's name.

Start with the letter "I," or should be similar to the language of nature. It is possible to ask, "Is that person a teacher?" - "Yes" or "No."

forEach, map, reduce, filter, etc., are all tremendous native JavaScript functions that handle arrays and perform various actions. I have seen many users passing el and elements as parameters for function callback. While this is straightforward and quick, it is essential to name them by their significance.

Variable and Property Names in JS, Source: Youtube, Steve Griffith - Prof3ssorSt3v3

IDs

Most of the time, you must maintain a record of IDs of particular objects and datasets. If ids are nested, leave it as an ID. In this case, I prefer to convert MongoDB _id to ID before returning the objects to the frontend. When extracting IDs from a thing, I would prepend the object.

One exception The exception is MongoDB, the model's references. This is where you refer to the field as the referenced model. This will ensure that the information is evident when composing references documents: