Trong thế giới phát triển web, code dễ đọc quan trọng không kém code chạy được. Việc viết JavaScript một cách rõ ràng, dễ hiểu và dễ bảo trì không chỉ giúp nhóm làm việc hiệu quả hơn, mà còn giúp chính bạn dễ dàng mở rộng và sửa lỗi sau này.

Bài viết này sẽ chia sẻ các kỹ thuật lập trình JavaScript giúp bạn:

  • Viết code sạch hơn
  • Dễ bảo trì hơn
  • Dễ truyền đạt cho đồng đội

1. Đặt tên biến, hàm có ý nghĩa

Tên biến/hàm nên thể hiện mục đích sử dụng, thay vì chỉ ngắn gọn hoặc mơ hồ.

❌ Không tốt:

js
let a = 5;
function x(y) {
  return y * a;
}

✅ Tốt hơn:

js
let taxRate = 0.05;
function calculateTax(price) {
  return price * taxRate;
}

👉 Quy tắc: đặt tên như thể bạn đang viết tài liệu cho người khác đọc.

2. Viết hàm ngắn, chỉ làm một việc

Một hàm nên giải quyết một nhiệm vụ duy nhất. Nếu bạn thấy hàm dài hơn 20 dòng – có thể nó đang làm quá nhiều thứ.

✅ Tách hàm:

js
function formatUserData(user) {
  const name = capitalize(user.name);
  const birthday = formatDate(user.birthday);
  return { name, birthday };
}

3. Tránh lặp lại code (DRY – Don’t Repeat Yourself)

Nếu bạn viết cùng logic ở 2 nơi khác nhau, hãy đưa nó vào một hàm dùng chung.

❌ Lặp lại:

js
const fullName1 = user1.first + ' ' + user1.last;
const fullName2 = user2.first + ' ' + user2.last;

✅ Tái sử dụng:

js
function getFullName(user) {
  return `${user.first} ${user.last}`;
}

4. Sử dụng const và let đúng cách

  • Dùng const cho giá trị không thay đổi
  • Dùng let khi bạn sẽ gán lại giá trị

Tránh dùng var trong các dự án hiện đại (vì hoisting và scope không rõ ràng).

5. Ưu tiên destructuring để code gọn gàng

js
// Thay vì:
let name = user.name;
let age = user.age;

// Nên:
let { name, age } = user;

6. Sử dụng Array.map(), filter(), reduce() thay vì for khi phù hợp

✅ Ví dụ:

js
const prices = [100, 200, 300];
const withTax = prices.map(p => p * 1.1);

Code ngắn gọn, rõ ràng, dễ hiểu.

7. Tránh lồng quá sâu (callback hell)

❌ Callback chồng callback:

js
getUser(id, function(user) {
  getPosts(user.id, function(posts) {
    getComments(posts[0].id, function(comments) {
      // 😵
    });
  });
});

✅ Dùng Promise / async await:

js
async function showComments() {
  const user = await getUser(id);
  const posts = await getPosts(user.id);
  const comments = await getComments(posts[0].id);
}

8. Viết comment đúng chỗ, đúng mục đích

Comment không nên lặp lại nội dung code, mà giải thích tại sao bạn làm vậy.

✅ Ví dụ:

js
// Thêm 10% thuế VAT theo quy định hiện hành
const total = price * 1.1;

9. Tách file hợp lý theo chức năng

  • Không nhồi nhét 300 dòng vào 1 file.
  • Tách thành: utils.js, userService.js, formHandler.js, v.v.
  • Dễ test, dễ maintain, dễ đọc hơn.

10. Sử dụng ESLint & Prettier

Dùng các công cụ như:

  • eslint: check lỗi, quy chuẩn style
  • prettier: định dạng mã tự động

Cấu hình một lần, giúp bạn tiết kiệm cả ngàn lần chỉnh sửa nhỏ.

✅ Tổng kết

Viết code dễ đọc là kỹ năng quan trọng nhất mà một lập trình viên giỏi cần có. Nó giúp bạn:

  • Dễ debug và nâng cấp
  • Làm việc nhóm hiệu quả hơn
  • Tạo nên những sản phẩm bền vững và chuyên nghiệp

✨ Bạn có thể áp dụng ngay các mẹo trong bài vào dự án hiện tại để cảm nhận sự khác biệt. Và đừng quên lưu lại bài viết để tham khảo sau này nhé!