DEV Community

Cover image for General Coding Standards JavaScript.
Dharmendra Kumar
Dharmendra Kumar

Posted on

2 1 1 1 1

General Coding Standards JavaScript.

General Coding Standards

  1. Meaningful Names:
    • Use meaningful and descriptive variable and function names.
    • Avoid abbreviations and single-letter names except for loop counters.
   // Good
   const userAge = 25;
   function calculateTotalPrice(items) { ... }

   // Bad
   const a = 25;
   function calc(items) { ... }
Enter fullscreen mode Exit fullscreen mode
  1. Consistent Naming Conventions:
    • Use camelCase for variables and functions.
    • Use PascalCase for class names.
   const userAge = 25;
   function calculateTotalPrice(items) { ... }
   class UserProfile { ... }
Enter fullscreen mode Exit fullscreen mode
  1. Avoid Repetition:
    • Follow the DRY (Don't Repeat Yourself) principle by encapsulating repeated code into functions.
   // Good
   function calculateDiscount(price, discount) { ... }
   const price1 = calculateDiscount(100, 10);
   const price2 = calculateDiscount(200, 20);

   // Bad
   const price1 = 100 - 10;
   const price2 = 200 - 20;
Enter fullscreen mode Exit fullscreen mode
  1. Error Handling:
    • Wrap API calls and other asynchronous operations in try-catch blocks.
   async function fetchData() {
     try {
       const response = await fetch('api/url');
       const data = await response.json();
       return data;
     } catch (error) {
       console.error('Error fetching data:', error);
     }
   }
Enter fullscreen mode Exit fullscreen mode
  1. Edge Cases:
    • Always consider edge cases and validate inputs.
   function getUserAge(user) {
     if (!user || !user.age) {
       return 'Age not available';
     }
     return user.age;
   }
Enter fullscreen mode Exit fullscreen mode
  1. Consistent Formatting:
    • Follow a consistent code formatting style (indentation, spacing, etc.). Use tools like Prettier to automate this.
   if (condition) {
     doSomething();
   } else {
     doSomethingElse();
   }
Enter fullscreen mode Exit fullscreen mode

Code Organization

  1. Modularization:
    • Break down the code into small, reusable modules or functions.
   // utils.js
   export function calculateDiscount(price, discount) { ... }

   // main.js
   import { calculateDiscount } from './utils.js';
Enter fullscreen mode Exit fullscreen mode
  1. Separation of Concerns:
    • Separate different concerns (e.g., UI logic, business logic, data handling) into different files or functions.
   // ui.js
   function updateUI(data) { ... }

   // data.js
   async function fetchData() { ... }

   // main.js
   import { updateUI } from './ui.js';
   import { fetchData } from './data.js';
Enter fullscreen mode Exit fullscreen mode

Best Practices

  1. Use Strict Mode:
    • Always enable strict mode to catch common coding errors.
   'use strict';
Enter fullscreen mode Exit fullscreen mode
  1. Use Constants:
    • Use constants for values that do not change.
   const MAX_USERS = 100;
Enter fullscreen mode Exit fullscreen mode
  1. Avoid Global Variables:
    • Minimize the use of global variables to avoid conflicts and unintended behavior.
   // Good
   (function() {
     const localVariable = 'This is local';
   })();

   // Bad
   var globalVariable = 'This is global';
Enter fullscreen mode Exit fullscreen mode
  1. Commenting and Documentation:
    • Write comments and documentation to explain the purpose and functionality of the code.
   /**
    * Calculates the total price after applying a discount.
    * @param {number} price - The original price.
    * @param {number} discount - The discount to apply.
    * @returns {number} - The total price after discount.
    */
   function calculateTotalPrice(price, discount) { ... }
Enter fullscreen mode Exit fullscreen mode
  1. Use Promises and Async/Await with Error Handling:
    • Prefer using promises and async/await for asynchronous operations, and wrap them in try-catch blocks for error handling.
   // Good
   async function fetchData() {
     try {
       const response = await fetch('api/url');
       const data = await response.json();
       return data;
     } catch (error) {
       console.error('Error fetching data:', error);
     }
   }

   // Bad
   function fetchData(callback) {
     fetch('api/url')
       .then(response => response.json())
       .then(data => callback(data))
       .catch(error => console.error('Error fetching data:', error));
   }
Enter fullscreen mode Exit fullscreen mode
  1. Object Destructuring:
    • Use object destructuring to extract multiple properties from an object in a concise way.
   // Good
   const vehicle = { make: 'Toyota', model: 'Camry' };
   const { make, model } = vehicle;

   // Bad
   const vehicleMake = vehicle.make;
   const vehicleModel = vehicle.model;
Enter fullscreen mode Exit fullscreen mode

By following these standards, you can ensure that your JavaScript code is clean, maintainable, and efficient.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs