Best practices in javascript programming

Best practices in JavaScript development

In this blog post, I will focus on some best practices in JavaScript development. Best practices in JavaScript development refer to the set of guidelines that help developers write efficient, maintainable, and scalable JavaScript code. These practices are important because they ensure that the code is easy to read and understand, reduce the likelihood of introducing bugs and errors, and make it easier for other developers to work on the codebase. Let’s take a look at some of the best practices in JavaScript development and provide some sample code snippets to demonstrate how to implement them.

1. Use Strict Mode

Strict mode is a feature introduced in ECMAScript 5 that allows developers to opt-in to a stricter mode of JavaScript. It helps to prevent common coding mistakes and enables better error handling. To enable strict mode in your JavaScript code, add the «use strict» directive at the top of your script:

2. Avoid Global Variables

Global variables are variables that are accessible from any part of the code, and they can cause issues with scope and maintainability. To avoid using global variables, wrap your code in a function or module and use closures to limit the scope of your variables:

(function()  var myVar = "Hello World"; console.log(myVar); >)(); 

3. Use Meaningful Variable Names

Using meaningful variable names can make your code easier to read and understand. Choose variable names that accurately describe the data they represent. Avoid using abbreviations or single-letter variable names:

// this is a Bad variable name var x = 10; // Good variable name var itemCount = 10; 

4. Use Comments to Explain Your Code

Comments are an essential part of code documentation, and they help to explain how your code works. Use comments to explain complex code or to provide context for future developers who may need to work on your code:

// this is a fun that calc the total of two numbers  function addNumbers(num1, num2)  return num1 + num2; > 

5. Use Modular Code

Modular code is code that is organized into smaller, independent units that can be reused in different parts of your application. Use modules to make your code more modular and reusable:

// Module 1 var myModule = (function()  var myVar = "Hello World"; function myFunction()  console.log(myVar); > return  myFunction: myFunction >; >)(); // Module 2 var myOtherModule = (function()  function myOtherFunction()  console.log("This is another module"); > return  myOtherFunction: myOtherFunction >; >)(); 

Источник

JavaScript Best Practices

This includes all data types, objects, and functions.

Global variables and functions can be overwritten by other scripts.

Use local variables instead, and learn how to use closures.

Always Declare Local Variables

All variables used in a function should be declared as local variables.

Local variables must be declared with the var , the let , or the const keyword, otherwise they will become global variables.

Strict mode does not allow undeclared variables.

Declarations on Top

It is a good coding practice to put all declarations at the top of each script or function.

• Give cleaner code
• Provide a single place to look for local variables
• Make it easier to avoid unwanted (implied) global variables
• Reduce the possibility of unwanted re-declarations

// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;

// Use later
firstName = «John»;
lastName = «Doe»;

price = 19.90;
discount = 0.10;

fullPrice = price — discount;

This also goes for loop variables:

Initialize Variables

It is a good coding practice to initialize variables when you declare them.

• Give cleaner code
• Provide a single place to initialize variables
• Avoid undefined values

// Declare and initiate at the beginning
let firstName = «»;
let lastName = «»;
let price = 0;
let discount = 0;
let fullPrice = 0,
const myArray = [];
const myObject = <>;

Initializing variables provides an idea of the intended use (and intended data type).

Declare Objects with const

Declaring objects with const will prevent any accidental change of type:

Example

Declare Arrays with const

Declaring arrays with const will prevent any accidential change of type:

Example

Don’t Use new Object()

• Use «» instead of new String()
• Use 0 instead of new Number()
• Use false instead of new Boolean()
• Use <> instead of new Object()
• Use [] instead of new Array()
• Use /()/ instead of new RegExp()
• Use function ()<> instead of new Function()

Example

let x1 = «»; // new primitive string
let x2 = 0; // new primitive number
let x3 = false; // new primitive boolean
const x4 = <>; // new object
const x5 = []; // new array object
const x6 = /()/; // new regexp object
const x7 = function()<>; // new function object

Beware of Automatic Type Conversions

JavaScript is loosely typed.

A variable can contain all data types.

A variable can change its data type:

Example

Beware that numbers can accidentally be converted to strings or NaN (Not a Number).

When doing mathematical operations, JavaScript can convert numbers to strings:

Example

let x = 5 + 7; // x.valueOf() is 12, typeof x is a number
let x = 5 + «7»; // x.valueOf() is 57, typeof x is a string
let x = «5» + 7; // x.valueOf() is 57, typeof x is a string
let x = 5 — 7; // x.valueOf() is -2, typeof x is a number
let x = 5 — «7»; // x.valueOf() is -2, typeof x is a number
let x = «5» — 7; // x.valueOf() is -2, typeof x is a number
let x = 5 — «x»; // x.valueOf() is NaN, typeof x is a number

Subtracting a string from a string, does not generate an error but returns NaN (Not a Number):

Example

Use === Comparison

The == comparison operator always converts (to matching types) before comparison.

The === operator forces comparison of values and type:

Example

0 == «»; // true
1 == «1»; // true
1 == true; // true

0 === «»; // false
1 === «1»; // false
1 === true; // false

Use Parameter Defaults

If a function is called with a missing argument, the value of the missing argument is set to undefined .

Undefined values can break your code. It is a good habit to assign default values to arguments.

Example

ECMAScript 2015 allows default parameters in the function definition:

Read more about function parameters and arguments at Function Parameters

End Your Switches with Defaults

Always end your switch statements with a default . Even if you think there is no need for it.

Example

switch (new Date().getDay()) <
case 0:
day = «Sunday»;
break;
case 1:
day = «Monday»;
break;
case 2:
day = «Tuesday»;
break;
case 3:
day = «Wednesday»;
break;
case 4:
day = «Thursday»;
break;
case 5:
day = «Friday»;
break;
case 6:
day = «Saturday»;
break;
default:
day = «Unknown»;
>

Avoid Number, String, and Boolean as Objects

Always treat numbers, strings, or booleans as primitive values. Not as objects.

Declaring these types as objects, slows down execution speed, and produces nasty side effects:

Example

let x = «John»;
let y = new String(«John»);
(x === y) // is false because x is a string and y is an object.

Example

let x = new String(«John»);
let y = new String(«John»);
(x == y) // is false because you cannot compare objects.

Avoid Using eval()

The eval() function is used to run text as code. In almost all cases, it should not be necessary to use it.

Because it allows arbitrary code to be run, it also represents a security problem.

Источник