Writing high-quality JavaScript code is a goal for every front-end developer. High-quality code is not only easy to maintain, extend, and debug but also enhances application performance, security, and user experience. Below, I will elaborate on how to write high-quality JavaScript code from multiple perspectives.
Code Structure and Organization
Modular Development
Modularity is the foundation of high-quality code, breaking code into independent, reusable units.
// Using ES6 modules
// mathUtils.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
// app.js
import { add, subtract } from './mathUtils.js';
console.log(add(5, 3)); // 8
console.log(subtract(5, 3)); // 2Best Practices:
- Follow the single responsibility principle: each module should do one thing.
- Use clear naming conventions (e.g.,
utils,services,componentsdirectories). - Avoid circular dependencies.
- Balance module size (neither too large nor too small).
File Organization
A well-organized file structure significantly improves code maintainability.
project/
├── src/
│ ├── components/ # Reusable UI components
│ ├── pages/ # Page-level components
│ ├── services/ # API services
│ ├── utils/ # Utility functions
│ ├── constants/ # Constant definitions
│ ├── hooks/ # Custom hooks
│ ├── store/ # State management
│ └── App.js # Application entry point
├── public/ # Static assets
└── tests/ # Test filesCode Style and Readability
Consistent Code Style
Consistent code style significantly enhances readability.
// Good code style example
function calculateTotal(items) {
const subtotal = items.reduce((sum, item) => {
return sum + item.price * item.quantity;
}, 0);
const tax = subtotal * 0.1;
return subtotal + tax;
}
// Avoid this code style
function calc(items) { // Unclear function name
let s = 0; // Unclear variable name
for (let i = 0; i < items.length; i++) { // Unnecessarily complex loop
s += items[i].price * items[i].quantity;
}
return s * 1.1; // Magic number
}Recommended Tools:
- ESLint: JavaScript code linting tool.
- Prettier: Code formatting tool.
- EditorConfig: Standardizes editor configurations.
Clear Naming
Good naming makes code self-explanatory.
// Good naming example
function calculateOrderTotal(orderItems) {
const discountEligibleItems = orderItems.filter(item => item.isDiscountable);
// ...
}
// Avoid this naming
function calc(items) { // Unclear function name
let els = items.filter(i => i.d); // Unclear variable and property names
// ...
}Naming Guidelines:
- Use camelCase for variables and functions.
- Use PascalCase for classes and constructors.
- Use UPPER_CASE_WITH_UNDERSCORES for constants.
- Avoid abbreviations (except widely accepted ones like
id,url). - Names should describe intent, not implementation.
