A. Mở đầu

Các lập trình viên thì chắc đều đã nghe qua cụm từ clean code rồi nhỉ, tuy nhiên các bạn intern/fresher và một số ít các bậc tiền bối vẫn khó khăn trong việc giúp code của mình trông 'clean' hơn. Thậm chí mình từng nghe nhiều người hiểu sai là : Clean code là viết code ngắn gọn nhất có thể. Vậy clean code là phải code như thế nào, hãy cùng mình đến các phần tiếp theo nhé.

Không cần biết code của tôi chạy ngon không, nhưng nhất định phải "đẹp"

B. Các mẹo giúp code của bạn trông clean hơn

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

Các bạn đọc tiêu đề này chắc nghĩ đơn giản là không được đặt tên biến là x y, phải đặt tên là từ tiếng anh có nghĩa đúng không. Nhưng không đơn giản như vậy đâu, mình sẽ chia sẻ kĩ phần này, vì phần này là phần dễ nhất nhưng lại là phần mọi người sai nhiều nhất

days_of_the_week  = [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’, ‘Sunday’] 

selected_day  = days_of_the_week [1]

Ví dụ đoạn code này, chắc sẽ có nhiều bạn thấy nó hợp lý, không có chỗ nào là không clean code cả. Tuy nhiên nếu dòng selected_day = days_of_the_week [1] được đặt ở một dòng cách xa biến days_of_the_week, thì làm sao ta biết được ý nghĩa dòng này sẽ lấy ra ngày nào trong tuần. Đây là một lỗi mà mình thấy cực nhiều người bị, người code thì sẽ nhớ được mảng days_of_the_week mình sắp xếp như nào nên có thể hiểu ngay code, nhưng đối với người khác thì họ không thể nào biết được, thế là họ lại phải đi tìm biến days_of_the_week để xem bạn sắp xếp như thế nào.

Ta có thể sửa lại đoạn code thành:

MONDAY = 0 
TUESDAY = 1 
WEDNESDAY = 2 
THURSDAY = 3 
FRIDAY = 4 
SATURDAY = 5 
SUNDAY = 6 

days_of_the_week = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] 

selected_day = days_of_the_week [TUESDAY]

Các bạn thấy không, chỉ cần bạn đặt tên biến rõ ràng và có ý nghĩa, thì đoạn code của bạn rất dễ hiểu. Hiện tại với một người không biết code đi nữa người ta vẫn có thể dễ dàng hiểu được là bạn đang muốn lấy ra thứ 3. Cũng chẳng cần một dòng comment nào cả, đối với những logic như này mà comment thì chứng tỏ bạn đang code không ổn.

Tiếp theo là một ví dụ nữa:

if age > 18
    // Cưới không sợ đi tòo

Về ví dụ này, các bạn có nhận ra mình code không rõ ràng chỗ nào không. Nếu bạn nhận ra thì mình đang mắc sai lầm ở chỗ > 18. Mình đang hiểu theo luật pháp việt nam, nhưng nếu đoạn code này đưa ra nước ngoài thì sao người ta hiểu được, tự dưng > 18 thì có thể cưới nhau ???. Cách khắc phục điều này cũng rất đơn giản, chỉ cần sửa lại thành:

adultAge = 18
if age > aldultAge
    // Cưới không sợ đi tòo

Trong lập trình có một cụm từ là "magic numbers", chính là cái ví dụ bên trên của mình. Đây là những con số được thiết lập cứng trong chương trình của bạn mà không có một cái tên ý nghĩa nào cả. Các bạn nên đặt cho nó một cái tên thật hay nhé.

2. Phân rã hàm lớn thành các hàm con

Có một nguyên tắc giúp code bạn dễ đọc hơn là mỗi hàm chỉ được chứa code thực hiện một nhiệm vụ cụ thể.

const submit = (data) => {
 // đoạn code validate data
  if (// không hợp lệ){
    return;
  }
  // đoạn code gửi data lên server
}

Mình dám cá rất nhiều bạn code như thế này, tuy nhiên một thời gian sau các bạn đọc lại sẽ thấy rất khó hiểu. Hoặc đơn giản là bị lỗi ở phần validate, nhưng đoạn code của bạn code lung tung gộp hết vào cả một hàm, thì sẽ rất khó khăn cho việc fix bug.

Chúng ta có thể sửa thành như này:

const validate = (data) => {
}

const sendData= (data) => {
}

const submit = (data) => {
  if (!validate(data)){
    return;
  }
  sendData(data)
}

Thay vì gộp hết code vào hàm submit, thì hãy tách ra thành nhiều hàm con, mỗi hàm chỉ nên thực hiện một nhiệm vụ mà thôi. Khi này đoạn code của bạn lại như bài văn rồi, cả người code lâu năm lẫn người mới học đều có thể dễ dàng hiểu được ý nghĩa đoạn code.

3. Comment đúng cách

Lỗi này chủ yếu hay gặp ở người mới và người đang tập để code clean hơn. Một số bạn còn comment trên từng dòng code cơ. Điều quan trọng của clean code là đoạn code của bạn dễ hiểu dễ fix bug ngay cả khi bạn không comment chứ không phải là code khó hiểu xong comment từng xí một để người ta có thể hiểu bạn.

Bạn chỉ nên comment các hàm lớn, giải thích các biến đầu vào, output truyền ra là gì hoặc là comment những đoạn code logic quá phức tạp.

4. Đặt tên biến và tên hàm theo đúng quy chuẩn

Hiện tại thì mọi người hay dùng 2 kiểu đặt tên là camel case và snake case. Bạn muốn đặt tên theo quy chuẩn nào cũng được, tuy nhiên là cả project chỉ được dùng 1 quy chuẩn mà thôi, đừng để chỗ này thì snake case, chỗ khác lại là camel.

Ví dụ cách đặt tên biến theo 2 quy chuẩn này:

// snake case
let cho_minh_1_upvote_di;

// camel case
let choMinhMotUpvoteDi;

Joke thôi nhé các bạn 😁

C. Tổng kết

Vậy là mình đã đi qua các cách giúp bạn code trông clean hơn rồi. Tuy đọc bài thấy khá đơn giản nhưng đến lúc áp dụng thì rất khó, các bạn phải tập thành thói quen mới có thể áp dụng dễ dàng được. Như câu quote đầu bài: Không cần biết code của tôi chạy ngon không, nhưng nhất định phải "đẹp"