Những convention trong code JS cần biết

Đối với những lập trình viên chuyên nghiệp, việc “hại não” nhất của các bạn là gì ? Một trong số đó là đọc code của Fresher/Junior. Nếu là 1 Fresher, thì phải viết làm sao cho ra dáng “chuyên nghiệp” ? Một vài tips cho các bạn. (Xin lỗi vì phải dùng in nghiêng, không inject code trực tiếp vào post được, mọi người thông cảm)

1. Đặt tên biến rõ ràng, vừa phải, không quá dài, không quá ngắn.
   Nghe là thấy khó rồi, cơ mà như nào nhỉ:
   
   　　const a = 1000; X
   　　const timeNeedToWatBeforeRun = 1000; X
   　　let b = setTimeout(() => {…}, a) X
   
   　　for (let i = 0;i < a; i+=100){ … } X
   
   Đây là 1 ví dụ đặt tên biến hơi “kém duyên”. Nên hạn chế đặt tên 1 vài ký tự. Khi học đại học, các bạn sẽ rất hay bắt gặp kiểu này vì chẳng ai dạy bạn đặt tên sao cho “hợp lý” cả. Và có “hợp lý” hay không thì code nó vẫn chạy mà, thầy cũng chả cho điểm kém đi nên quan tâm làm gì.
   Thay vì thế, các bạn nên đặt tên biến vừa phải, dễ hiểu, không quá dài dòng:
   
   　　const waitTimeInMS = 1000;
   　　for (let index = 0;index < max / 100; index++){ … }
2. Nếu điều kiện đơn giản, đừng trả về true/false
   Chúng ta sẽ dễ dàng bắt gặp những đoạn code kiểu:
   
   　　if (number % 2 === 0) {
   　　　　return true;
   　　}
   　　return false;
   
   Nên thay bằng phiên bản rút gọn:
   
   　　return number % 2 === 0
3. Diễn giải vòng lặp không cần thiết:
   Có rất nhiều người mới học sẽ viết kiểu này:
   
   　　for(let index = 0; index< list.length; index++) { … } X
   
   Tuy nhiên đây là cách của C++. Vì C++ không có các cú pháp đặc biệt như for( … of … ) của JS hay for … in range() của python nên bắt buộc cần viết như vậy. Tuy nhiên sử dụng như này chúng ta sẽ thấy khá “nhức mắt” khi đọc for, và chỉ lấy ra được index trong khi muốn lấy list[index]
   
   Để tránh tình trạng này, khuyến cáo nên sử dụng foreach/ for in/of khi có thể:
   
   　　for(let item of list) { … }
   
   Dễ nhìn hơn chưa nào.
4. Loại bỏ else không cần thiết:
   Trong lúc học cú pháp, chúng ta hay sử dụng cú pháp đầy đủ if … else if … else …. Cú pháp này gần như có mặt trong tất cả các ngôn ngữ. Tuy nhiên khi nhìn vào đoạn này:
   
   　　const checkWorkingDay = (day) => {
   　　　　if (isWeekend(day)) {
   　　　　　　if (workOverTime) {
   　　　　　　　　return true;
   　　　　　　} else {
   　　　　　　　　return false;
   　　　　　　}
   　　　　} else {
   　　　　　　return true;
   　　　　}
   　　}
   
   Ở hàm này, chúng ta nhận thấy phần else có điều kiện đặc biệt (xử lý ngắn hơn) thì nên được đẩy lên trước. Mặc dù đọc thì thuận miệng tuy nhiên chúng ta có thể viết lại như sau:
   
   　　const checkWorkingDay = (day) => {
   　　　　if (!isWeekend(day)) {
   　　　　　　return true;
   　　　　}
   
   　　　　if (workOverTime) {
   　　　　// Vốn là isWeekend từ kết quả phía trên
   　　　　　　return true;
   　　　　}
   
   　　　　return false;
   　　}
   
   Hay có thể ngắn hơn nữa:
   
   　　const checkWorkingDay = (day) => {
   　　　　return (!isWeekend(day) || workOverTime)
   　　}
   
   Hoặc thậm chí là:
   
   　　const checkWorkingDay = day => (!isWeekend(day) || workOverTime)
   
   Tuy nhiên theo cá nhân mình thấy nên dừng ở bước 2 thôi, vì bước 3,4 dù có ngắn hơn thật, nhưng có những trường hợp nhìn hơi khó hiểu, nên cần cẩn thận khi dùng.

Tác giả: Cao Văn Thành