Quy Tắc Đặt Tên Biến Và Hàm Trong JavaScript (JS)

Quy tắc đặt tên biến và hàm trong JavaScript (JS) giúp code sạch, dễ đọc và chuyên nghiệp.

📌 Quy Tắc Chung Ngắn Gọn

• Biến/Hàm thường: Dùng camelCase (chữ đầu viết thường, từ sau viết hoa chữ cái đầu).
• Hằng số: Dùng UPPER_SNAKE_CASE (viết hoa toàn bộ, cách nhau bằng dấu gạch dưới).
• Class/Component: Dùng PascalCase (viết hoa chữ cái đầu của tất cả các từ).
• Ngôn ngữ: Luôn dùng tiếng Anh, không dùng tiếng Việt có dấu hoặc không dấu.

------------------------------

1. Cách Đặt Tên Biến (Variables)

Tên biến phải là danh từ hoặc tính từ, thể hiện rõ giá trị mà nó lưu trữ.

• Dạng số/chuỗi/đối tượng: user, totalPrice, isOnline.
• Dạng mảng (Danh sách): Dùng danh từ số nhiều hoặc thêm tiền tố list, arr.
• Tốt: users, productList.
• Dạng Boolean (Đúng/Sai): Bắt đầu bằng is, has, should, can.
• Tốt: isActive, hasToken, shouldRender.

------------------------------

2. Cách Đặt Tên Hàm (Functions)

Tên hàm phải bắt đầu bằng một động từ hành động (Tiền tố).

• Lấy dữ liệu: Dùng get...
• Ví dụ: getUserData(), getId()
• Đặt/Gán dữ liệu: Dùng set...
• Ví dụ: setRole(), setPrice()
• Tìm kiếm/Xử lý dữ liệu: Dùng fetch..., search..., compute...
• Ví dụ: fetchProducts(), calculateTotal()
• Kiểm tra điều kiện (Trả về boolean): Dùng check..., validate...
• Ví dụ: checkEmail(), validatePassword()
• Xử lý sự kiện (Event handler): Dùng tiền tố on... hoặc handle...
• Ví dụ: onClick(), handleSubmit()

------------------------------

3. Ví Dụ Trực Quan (Sai vs Đúng)## ❌ Nên tránh

const n = "John"; // Quá ngắn, không rõ nghĩa
const danh_sach_user = []; // Sai quy tắc camelCase, dùng tiếng Việt
function danhsach() {} // Không có động từ
let flag = true; // Chung chung, không rõ flag làm gì

Chuẩn JS

const userName = "John"; 
const users = []; 
function getUserList() {} 
let isLoggedIn = true; 
const MAX_RETRY_COUNT = 3; // Hằng số không đổi

Để giúp bạn áp dụng ngay vào dự án thực tế, hãy cho tôi biết nếu bạn muốn:

• Tối ưu lại một đoạn code cụ thể bạn đang viết?
• Hướng dẫn đặt tên cho mô hình Async/Await?
• Gợi ý cấu trúc tên cho một framework cụ thể (React, Vue, Node.js)?