JavaScript best practices 2021

Posted By: Kanika Gupta Published: 14, Jan 2024

What is JavaScript?

We are aware that JavaScript is a scripting or programming language that is widely used in web development to create dynamic content for the web.

JavaScript is :

• a dynamic language as one can create and declare variables at runtime.
• a client-side scripting language which means that it can easily be processed on the client's web browser.
• case sensitive and shows error whenever the cases are inconsistent in the program.
• a language with no compilation step. Instead, the code is read by an interpreter in the browser which then interprets each line and finally runs it.

As it can run on a variety of hardware platforms or software architectures, it is a platform-independent language and can include programming functionality but does not perform stronger operations makes it a lightweight scripting language. So, to ensure the smooth functionality of our JavaScript programs, there are some useful basic practices to be kept in mind.

Common Programming Practices

First, let us look at some common practices that are followed in all Programming Languages. All these practices serve the purpose of enhancing code readability.

Appropriate use of comments in order to summarise the code. Giving readable variable and function names that are self-explanatory and meaningful to understand. Proper indentation to avoid ambiguity and code misinterpretation. Ending statements with semicolons (;) is usually not necessary but helps in marking the end of a particular statement to avoid any sort of confusion in the code. Proper declaration and initialization of variables and functions are necessary to avoid ambiguity and missing information.

Placement of JavaScript (Script Tag) in HTML

Browsers do not allow parallel downloads with external JavaScript files, which means that while JavaScript is getting loaded, the browser cannot download any other file resulting in the page getting loaded very slowly. The placement does not matter when there are shorter programs or functionalities, however, it makes a difference in the opposite scenario like designing a website. To enhance the loading speed of our program and usability of the page, we load JavaScript at last whenever possible, by placing JavaScript at the bottom of the HTML document. This is done by placing the script tag right before the closing body tag in an HTML file.

Use of strict equality operator instead of the equality operator

Both the operators are used to check for data equality, what is the difference then?

The Equality operator, represented by (==), checks only for the value stored in the data for equality. It doesn’t take into consideration the use of type conversion by JavaScript while checking the data. The Strict equality operator, represented by (===), returns true only if the data values are equal without any type of conversion. So, to avoid unintended type conversion, we make use of a strict operator.

Avoid the use of global functions and variables

Every JavaScript file that gets included in the HTML page runs in the same scope. If other scripts included after your JS code contain the same names for their variables or functions that your code had, they will overwrite your variables/functions. This will lead to ambiguous outputs or errors. Thus, local variables and functions are given preference while coding.

For example,

x = "global" //global variable

function makesomething()

{

var x;

console.log(x); //undefined

x = "local";

console.log(x); //local

}

makesomething();

console.log(x);

<< undefined

<< local

<< global

x is first declared as a global variable with the initialized value global inside the make something function, x is redeclared as a local variable without any assigned value. next x has reassigned the value locally and then printed. the value of x gets overwritten again and again. Hence, the output of the first print statement is undefined for x inside the function without any value, next local for reassigned x, and lastly global for the originally declared global variable x.

Use of LET and CONST keywords

The LET and CONST keywords allow us to create local variables having a block scope i.e., the variable can only be used within the block. The LET variables cannot be redeclared but can be reassigned with values. On the contrary, the CONST variable can neither be redeclared nor reassigned.

For example,

The 'LET' variable x when redeclared with value 0 shows an error.

let x = 'Hello'; // x is Hello

let x = 0; // Error

The CONST variable x when reassigned value 9 shows an error too.

const x = 2; // here x is 2

x = 9; //error

However, when the LET variable x gets reassigned with value 2, the value gets overwritten

let x = 10;

console.log(x); //10

x = 2 ;

console.log(x); //2

Using a primitive approach to create new objects and arrays

For readability, simplicity, and execution speed, we prefer the use of the object literal method. Using this primitive approach, you can define and create an object in one statement. Like we did in the first example, we directly declare a list of name: value pairs inside curly braces { }. In the second example, we create a new JavaScript object using the new Object method and then add the properties.

const person = {

firstname:'kanika',

lastname: 'Gupta',

age: 20,

eyecolor: 'black'

};

const person = new Object);

person.firstname = 'kanika';

person.lastname: 'Gupta';

person.age: 20;

person.eyecolor: 'black';

As both the given examples above do exactly the same, there is no need to complicate the task by using an added function. Similarly, we use square brackets instead of the new Array method to create a JavaScript array.

Use of Spread Operator (...)

The last JavaScript practice is to make use of the spread operator that is represented with triple dots (...). It is used to pass all the items of an array as individual elements to some function or other array. It can be used in multiple ways but the most common ones are merging and cloning of arrays. The syntax is to write the array name after triple dots wherever needed. (...array_name)

For example,

const array1 = [1,2,3];

const array2 = [6,7,8];

//merging

const merge = [array1...array2];

console.log(merge);

//cloning

const clone = [...array1];

console.log(clone);

//passing elements from one array to another

const p [4,5... array2];

console.log(p);

OUTPUT

[1,2,3,6,7,8]

[1,2,3]

[4,5,6,7,8]

The first output [1,2,3,4,5,6,7,8] is the result of the direct merging of two declared arrays: array1 and array2, using the spread operator. The next output is the result of cloning the values of array1 in an array clone. Thus, a direct copy of array1 is created in the array clone. The last output shows the passing of elements from one array to another; here from array2 to array p. One should note that this operator always makes a copy of data and does not directly move the data from one array to another.

That was all for some fundamental practices to be kept in mind while implementing JavaScript. I hope you will find them useful and practice them the next time you write a JS code.