- vừa được xem lúc

Dừng ngay việc đặt tên biến là data

0 0 27

Người đăng: Zizou

Theo Viblo Asia

"Có hai điều không thể bỏ lỡ trong cuộc sống. Đó là những chuyến xe cuối cùng và những người yêu ta thật lòng" - Đây là câu nói rất hay trong phim Mắt Biếc ra rạp cách đây đúng một năm. Còn trong lập trình có hai điều khó khăn đó là : vô hiệu hóa bộ nhớ cache và đặt tên cho biến, function....

Bỏ qua việc vô hiệu hóa cache, điều này thực sự khó. Điều thứ hai đặt tên biến có vẻ dễ thực hiện hơn. Việc đặt tên rõ ràng giúp cho mọi người đọc code dễ hiểu, dễ fix bug, dễ support người khác hơn. Khi code mình luôn cố gắng đặt tên cho biến hay function tuân theo một số rule cơ bản.

1. Sử dụng tiền tố có ý nghĩa

Mặc dù các tiền tố này không phổ biến, nhưng chúng rất hữu ích trong việc làm việc nhóm. Sử dụng một cách nhất quán trong suốt quá trình codebase giúp cho việc đọc hiểu trở nên dễ dàng hơn

  • get, find, fetch : cho hàm trả về giá trị hoặc 1 Promise resolve một giá trị mà không làm thay đổi đối số hoặc chính nó.
  • set, update : cho các hàm nhằm thay đổi giá trị truyền vào, update đối tượng, khởi tạo giá trị, ... Hoặc các hàm này cũng có thể trả về giá trị hoặc một Promise resolve thành giá trị được cập nhật.
  • on, handle : cho các hàm xử lý sự kiện. Ví dụ : onEvent dùng để props qua các component, handleEvent dùng để xử lý trong component.
  • is, should, can dùng cho các biến và hàm kiểm tra hay trả về giá trị là boolean.

Bất kỳ convention nào của team nên được document lại cho cả team follow theo để dễ dàng cho mọi người review.

2. Sử dụng các từ bổ sung có ý nghĩa

Hẳn sẽ có rất nhiều anh em đặt tên biến là data như là một thói quen mặc định, chúng ta cùng xem qua một số định nghĩa của nó là gì :

  • Thông tin thực tế (chẳng hạn như các phép đo hoặc thống kê) được sử dụng làm cơ sở để lập luận, thảo luận, báo cáo hoặc tính toán.
  • Thông tin ở dạng kỹ thuật số có thể được truyền hoặc xử lý.

Các định nghĩa này rất chung chung, không cung cấp chi tiết thông tin cho mọi người, hãy xem qua ví dụ không tuân thủ nguyên tắc :

function total(data) { let total = 0; for (let i = 0; i < data.length; i++) { total += data[i].value; } return total;
}

Đọc qua ví dụ, chúng ta đều biết hàm này tính tổng một cái gì đó với tham số truyền vào là data gì đó , rõ ràng khi review code chúng ta rất khó khăn.

Trường hợp ngoại lệ

Ví dụ như thư viện axios sử dụng data, dữ liệu trong form gán vào data truyền vào hàm gửi lên server.

3. Sử dụng từ đầy đủ

Nhiều người vì thấy tên biến hay hàm dài thì thường viết tắt nó để cho ngắn.

Chúng ta xem qua ví dụ :

function totBal(accts) { let tot = 0; for (let i = 0; i < accts.length; i++) { tot += accts[i].bal; } return tot;
}

Đọc qua và mất thời gian lắc não một chút thì chúng ta có thể dịch được : accts có nghĩa là accounts, tot có nghĩa là total, nhưng nếu không có thời gian suy nghĩ và đọc qua thì cũng không đoán được ý nghĩa nó là gì.

Trường hợp ngoại lệ

Các chữ viết tắt phổ biến nên được sử dụng từ viết tắt hơn là viết đầy đủ (ví dụ : URL, API, CSS, HTML...)

4. Không sử dụng những từ Fluff

ContainerWrapper chỉ có ý nghĩa liên quan đến thứ mà chúng đang chứa.Vấn đề là bất kỳ thành phần nào không phải là base element thì đều chứa một thành phần khác.Việc nay gây khó khăn cho việc đặt tên, ví dụ như : MyComponentContainerContainer.

Trường hợp ngoại lệ

Trong một số ngữ cảnh, những từ fluff lại có ý nghĩa quan trọng. Một ví dụ điển hình trong các class component của React là presentation/container . Trong trường hợp này, container có thể chỉ ra là một component quản lý state .

5. Chính tả

Chắc không ít trong chúng ta đã từng đặt tên cho biến hay hàm sai chính tả, như là thiếu chữ, thừa chữ, sai nghĩa... điều này có thể gây khó chịu cho người review ?. À trong trường hợp này không có ngoại lệ cho việc sai chính tả nhé, nước đi này sai không được phép đi lại ?

Kết hợp với nhau

Áp dụng các quy tắc trên, chúng ta nhận được hàm như sau

function getAccountsTotalBalance(accounts) { let totalBalance = 0; for (let accountIndex = 0; accountIndex < accounts.length; accountIndex++) { totalBalance += accounts[accountIndex].balance; } return totalBalance;
}

Kết luận

Mục tiêu của các quy tắc này giúp mang lại nhiều ý nghĩa cho cả team xây dựng bộ quy tắc khi đăt tên biến, tên hàm luôn thống nhất không chỉ từ đầu đến cuối dự án mà còn xây dựng cho mọi người thói quen code sau này. Hãy xem xét lại các quy tắc của team, nếu quy tắc nào gây hại nhiều hơn là có lợi thì hãy gỡ bỏ quy tắc đó đi.

REFER

Stop Using data as a variable name

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 528

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 436

- vừa được xem lúc

Một số phương thức với object trong Javascript

Trong Javascript có hỗ trợ các loại dữ liệu cơ bản là giống với hầu hết những ngôn ngữ lập trình khác. Bài viết này mình sẽ giới thiệu về Object và một số phương thức thường dùng với nó.

0 0 158

- vừa được xem lúc

Tìm hiểu về thư viện axios

Giới thiệu. Axios là gì? Axios là một thư viện HTTP Client dựa trên Promise.

0 0 149

- vừa được xem lúc

Imports và Exports trong JavaScript ES6

. Giới thiệu. ES6 cung cấp cho chúng ta import (nhập), export (xuất) các functions, biến từ module này sang module khác và sử dụng nó trong các file khác.

0 0 113

- vừa được xem lúc

Bài toán đọc số thành chữ (phần 2) - Hoàn chỉnh chương trình dưới 100 dòng code

Tiếp tục bài viết còn dang dở ở phần trước Phân tích bài toán đọc số thành chữ (phần 1) - Phân tích đề và những mảnh ghép đầu tiên. Bạn nào chưa đọc thì có thể xem ở link trên trước nhé.

0 0 249