top 10 phương pháp Tốt Nhất Trong JavaScript Để Viết Code JavaScript Sạch và Dễ Hiểu Hơn - Viblo

Viết code JavaScript sạch, dễ bảo trì là điều cực kỳ quan trọng để tạo ra các ứng dụng có khả năng mở rộng và làm việc hiệu quả với các lập trình viên khác. Dưới đây là mười phương pháp Tốt Nhất giúp bạn viết code JavaScript sạch và dễ hiểu. 🌟

Nguồn: Link bài viết gốc

1. Sử Dụng Tên Biến và Hàm Có Ý Nghĩa 📝

Chọn tên biến và hàm có ý nghĩa và mô tả rõ ràng sẽ làm cho code của bạn dễ hiểu và bảo trì hơn. Hãy tránh sử dụng các tên viết tắt hoặc chỉ có một chữ cái, vì chúng có thể gây khó hiểu cho người khác.

ví dụ:

// Cách đặt tên chưa tốt
let a = 5;
let b = 10;
function c(x, y) {
  return x + y;
}

// Cách đặt tên tốt
let width = 5;
let height = 10;
function calculateArea(width, height) {
  return width * height;
}

2. Giữ Các Hàm Nhỏ Gọn và Tập Trung Vào Một Nhiệm Vụ 🎯

Những hàm nhỏ gọn, tập trung vào một nhiệm vụ cụ thể sẽ dễ dàng hơn trong việc kiểm thử, gỡ lỗi, và bảo trì. Hãy viết các hàm thực hiện một công việc và làm thật tốt công việc đó.

Ví dụ:

// Hàm lớn, không tập trung
function processUserData(user) {
  // Kiểm tra dữ liệu người dùng
  if (!user.name || !user.email) {
    throw new Error('Dữ liệu người dùng không hợp lệ');
  }
  // Lưu người dùng vào cơ sở dữ liệu
  database.save(user);
  // Gửi email chào mừng
  emailService.sendWelcomeEmail(user.email);
}


// Hàm nhỏ, tập trung
function validateUserData(user) {
  if (!user.name || !user.email) {
    throw new Error('Dữ liệu người dùng không hợp lệ');
  }
}

function saveUserToDatabase(user) {
  database.save(user);
}

function sendWelcomeEmail(email) {
  emailService.sendWelcomeEmail(email);
}

function processUserData(user) {
  validateUserData(user);
  saveUserToDatabase(user);
  sendWelcomeEmail(user.email);
}

3. Sử Dụng Phong Cách Viết Code Đồng Nhất 🌐

Một phong cách viết code đồng nhất giúp code của bạn dễ đọc và dễ bảo trì hơn. Sử dụng các công cụ như ESLint và Prettier để duy trì sự đồng nhất trong toàn bộ mã nguồn.

Ví dụ (Cấu hình ESLint):

{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "es6": true
  },
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

4. Comment và Document Code của Bạn 📜

Thêm comment và tài liệu cho code sẽ giúp các lập trình viên khác (và cả chính bạn trong tương lai) hiểu được mục đích và chức năng của nó. Sử dụng comment để giải thích lý do tại sao bạn đưa ra quyết định nào đó và document các hàm và module của bạn.

Ví dụ:

/**
 * Tính diện tích hình chữ nhật.
 * @param {number} width - Chiều rộng của hình chữ nhật.
 * @param {number} height - Chiều cao của hình chữ nhật.
 * @return {number} Diện tích của hình chữ nhật.
 */
function calculateArea(width, height) {
  return width * height;
}

// Hàm này xử lý dữ liệu người dùng bằng cách kiểm tra,
// lưu vào cơ sở dữ liệu, và gửi email chào mừng.
function processUserData(user) {
  validateUserData(user);
  saveUserToDatabase(user);
  sendWelcomeEmail(user.email);
}

5. Tránh Sử Dụng "Magic Numbers" và "Magic Strings" 🎩

"Magic numbers" và "magic strings" là những giá trị cứng mà không có ngữ cảnh, làm cho code của bạn khó hiểu và khó bảo trì. Sử dụng các biến constant hoặc enum để gán tên có ý nghĩa cho những giá trị này.

Ví dụ:

// Sử dụng magic numbers
function calculateDiscount(price) {
  return price * 0.1;
}

// Sử dụng constant
const DISCOUNT_RATE = 0.1;

function calculateDiscount(price) {
  return price * DISCOUNT_RATE;
}

// Sử dụng enum để dễ đọc hơn
const UserRole = {
  ADMIN: 'admin',
  USER: 'user',
  GUEST: 'guest'
};

function checkAccess(role) {
  if (role === UserRole.ADMIN) {
    // Cho phép truy cập
  }
}

6. Sử Dụng let và const Thay Vì var 🚫

Tránh sử dụng var để khai báo biến. Thay vào đó, hãy sử dụng let và const để đảm bảo biến được giới hạn trong phạm vi block và tránh các vấn đề về hoisting. Điều này giúp tránh các hành vi không mong muốn và làm cho code của bạn dễ hiểu hơn.

Ví dụ:

let name = 'John';
const age = 30;

7. Tránh Sử Dụng eval() ❌

Hàm eval() thực thi một chuỗi dưới dạng mã JavaScript, có thể dẫn đến các lỗ hổng bảo mật và vấn đề về hiệu suất. Hãy tránh sử dụng eval() nếu có thể.

Ví dụ:

// Tránh sử dụng
eval('console.log("Hello, World!")');

// Sử dụng cách khác
console.log('Hello, World!');

8. Xử Lý Lỗi Một Cách Linh Hoạt 🌟

Xử lý lỗi đúng cách giúp ứng dụng của bạn có thể phục hồi một cách linh hoạt từ các tình huống không mong muốn. Sử dụng try-catch và ghi lại lỗi một cách cẩn thận.

Ví dụ:

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Phản hồi mạng không ổn định');
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Lỗi khi fetch:', error);
    throw error; // Tiếp tục ném lỗi sau khi đã ghi lại
  }
}

9. Sử Dụng Promises và Async/Await Cho Mã Bất Đồng Bộ 🌐

Promises và async/await giúp mã bất đồng bộ dễ viết và dễ hiểu hơn. Hãy tránh tình trạng "callback hell" bằng cách sử dụng những tính năng hiện đại này của JavaScript.

Ví dụ:

// Sử dụng Promises
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// Sử dụng async/await
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

10. Viết Unit Tests 🧪

Viết unit tests giúp đảm bảo mã của bạn hoạt động như mong đợi và giúp dễ dàng phát hiện lỗi sớm. Sử dụng các framework như Jest, Mocha, hoặc Jasmine để viết và chạy các tests của bạn.

Ví dụ (Jest):

// Hàm cần kiểm thử
function sum(a, b) {
  return a + b;
}

// Test
test('cộng 1 + 2 bằng 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Kết

Cảm ơn anh em đã đọc bài viết của mình. Hi vọng bài viết sẽ giúp ích cho anh em.

Anh em hãy theo giõi mình để có thêm nhiều bài viết hay và bổ ích nhé !