10 Quy ước đặt tên trong JavaScript này cho bạn một hướng dẫn chung khi đặt tên biến, tên hàm, tên lớp hoặc tên các component trong JavaScript.
Dĩ nhiên, không ai bắt bạn phải làm theo 100% quy tắc / quy ước đặt tên này, tuy nhiên, chúng được chấp nhận rộng rãi như một tiêu chuẩn trong cộng đồng JavaScript.
#1: QUY ƯỚC ĐẶT TÊN BIẾN TRONG JS
Các biến JavaScript phân biệt chữ hoa chữ thường. Do đó, các biến JavaScript với ký tự viết thường và viết hoa là khác nhau:
var name = 'NIIT - ICT HÀ NỘI';
var Name = 'ELON MUSK';
var NAME = 'EDISON';
console.log(name);
// "NIIT - ICT HÀ NỘI"
console.log(Name);
// "ELON MUSK"
console.log(NAME);
// "EDISON"
Biến JavaScript phải tự mô tả ý nghĩa của nó. Không cần thiết phải thêm nhận xét để có mô tả bổ sung cho biến:
// bad
var value = 'NIIT';
// bad
var val = 'NIIT';
// good
var firstName = 'NIIT';
Thông thường, bạn sẽ thấy các biến JavaScript được khai báo bằng kiểu camelCase với ký tự viết thường ở đầu, các từ sau viết HOA chữ cái đầu:
// bad
var firstname = 'NIIT';
// bad
var first_name = 'NIIT';
// bad
var FIRSTNAME = 'NIIT';
// bad
var FIRST_NAME = 'NIIT';
// good
var firstName = 'NIIT';
Cũng có các ngoại lệ đối với các hằng số JavaScript, privates và các lớp / thành phần - mà chúng ta sẽ khám phá sau.
Tuy nhiên, nói chung, một biến JavaScript, một chuỗi, boolean hoặc số, cũng như là một đối tượng, mảng hoặc hàm - đều được khai báo với kiểu camelCase.
Tổng quan ngắn gọn về các kiểu viết tên biến khác nhau:
-
camelCase (sử dụng trong JS)
-
PascalCase (sử dụng trong JS)
-
snake_case
-
kebab-case
> Bạn đã HỌC JAVASCRIPT CƠ BẢN ổn chưa?
#2: QUY ƯỚC ĐẶT TÊN BOOLEAN TRONG JS
Thêm tiền tố như is, are hoặc has là cách đơn giản nhất giúp mọi lập trình viên sử dụng JavaScript phân biệt biến boolean với một biến khác.
// bad
var number = true;
// good
var isNumber = true;
// bad
var equal = false;
// good
var areEqual = false;
// bad
var encryption = true;
// good
var hasEncryption = true;
Bạn có thể xem nó như một quy tắc mềm khác cho quy ước đặt tên boolean trong JavaScript bên cạnh việc được viết bằng camelCase.
#3: QUY ƯỚC ĐẶT TÊN FUNCTION TRONG JS
Các hàm JavaScript cũng được viết theo kiểu camelCase. Ngoài ra, cách tốt nhất để thực sự cho biết hàm đang làm gì là sử dụng một động từ làm tiền tố cho tên hàm.
// bad
function name(firstName, lastName) {
return `${firstName} ${lastName}`;
}
// good
function getName(firstName, lastName) {
return `${firstName} ${lastName}`;
}
Động từ làm tiền tố này có thể là bất cứ thứ gì (ví dụ: get, fetch, push, apply, calculate, compute, post).
Đó là một quy ước mềm khác cần xem xét để có được tên biến dễ hiểu khi lập trình JavaScript.
#4: QUY ƯỚC ĐẶT TÊN CLASS TRONG JS
Một lớp trong JavaScript được khai báo bằng kiểu PascalCase trái ngược với các cấu trúc dữ liệu JavaScript khác:
class SoftwareDeveloper {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}
var me = new SoftwareDeveloper('Mai', 'Hà');
Kiểu PascalCase là kiểu viết hoa mọi chữ cái đầu của mỗi từ.
Và khi muốn tạo một thể hiện mới của một lớp, ta sử dụng tên lớp và truyền tham số.
Khi đó, hàm constructor sẽ tự động nhận tham số đầu vào.
Cách khởi tạo thể hiện này tương tự các ngôn ngữ khác như Java...
> Tham khảo: Quy ước đặt tên trong Java
#5: QUY ƯỚC ĐẶT TÊN COMPONENT TRONG JS
Các component thường được tìm thấy trong các Front end Framework như React, chúng cũng được khai báo rộng rãi với kiểu PascalCase.
// bad
function userProfile(user) {
return (
<div>
<span>Họ: {user.firstName}</span>
<span>Tên: {user.lastName}</span>
</div>
);
}
// good
function UserProfile(user) {
return (
<div>
<span>Họ: {user.firstName}</span>
<span>Tên: {user.lastName}</span>
</div>
);
}
Khi một component được sử dụng, nó phân biệt chính nó với HTML gốc và các web component, vì chữ cái đầu tiên của nó luôn được viết bằng chữ hoa.
<div>
<UserProfile
user={{ firstName: 'Mai', lastName: 'Hà' }}
/>
</div>
#6: QUY ƯỚC ĐẶT TÊN MEDTHOD TRONG JS
Giống như các hàm JavaScript, tên một phương thức trong một lớp JavaScript được khai báo với kiểu camelCase:
class SoftwareDeveloper {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
// Method
getName() {
return `${this.firstName} ${this.lastName}`;
}
}
var me = new SoftwareDeveloper('Mai', 'Hà');
console.log(me.getName());
// "Mai Hà"
Ngoài ra, khi khai báo phương thức, bạn hãy áp dụng các quy ước tương tự như đối với các hàm JavaScript.
Ví dụ: Thêm một động từ làm tiền tố để làm cho tên phương thức dễ hiểu hơn.
#7: QUY ƯỚC ĐẶT TÊN PRIVATE TRONG JS
Trong các dự án JavaScript, hiếm khi bạn tìm thấy dấu gạch dưới (_) trước biến / hàm / phương thức.
Nếu bạn nhìn thấy dấu gạch dưới trước tên, nó là private.
Mặc dù tính chất private không thể thực sự được thực thi bởi JavaScript, nhưng việc khai báo một cái gì đó là private sẽ cho chúng ta biết về cách nó nên được sử dụng hoặc cách nó không nên được sử dụng.
Ví dụ: Một phương thức private trong một lớp chỉ nên được sử dụng trong nội bộ lớp đó, tránh được sử dụng trên thể hiện của lớp.
class SoftwareDeveloper {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.name = _getName(firstName, lastName);
}
_getName(firstName, lastName) {
return `${firstName} ${lastName}`;
}
}
var me = new SoftwareDeveloper('Mai', 'Hà');
// good
var name = me.name;
console.log(name);
// "Mai Hà"
// bad
name = me._getName(me.firstName, me.lastName);
console.log(name);
// "Mai Hà"
Một biến / hàm private cũng có thể xuất hiện trong một tệp JavaScript.
Điều này có thể có nghĩa là biến / hàm không nên được sử dụng bên ngoài tệp này mà chỉ được sử dụng trong nội bộ để tính toán thêm logic nghiệp vụ cho các hàm khác trong cùng tệp mà thôi.
#8: QUY ƯỚC ĐẶT TÊN CONSTANT TRONG JS
Cuối cùng nhưng không kém phần quan trọng, các hằng số - nhằm mục đích là các biến không thay đổi - trong JavaScript được viết bằng chữ in hoa (UPPERCASE):
var SECONDS = 60;
var MINUTES = 60;
var HOURS = 24;
var DAY = SECONDS * MINUTES * HOURS;
Nếu một hằng số có nhiều hơn một từ trong tên khai báo biến của nó, nó sẽ sử dụng dấu gạch dưới (_) để phân tách các từ:
var DAYS_UNTIL_TOMORROW = 1;
Thông thường, hằng số JavaScript được định nghĩa ở đầu tệp JavaScript.
Như đã gợi ý trước đây, không ai bắt buộc không được thay đổi hằng số ở đây, ngoại trừ các khai báo sử dụng từ khóa const cho cấu trúc dữ liệu nguyên thủy, nhưng việc đặt tên VIẾT HOA cho thấy bạn nên tránh thay đổi nó.
#9: QUY ƯỚC ĐẶT TÊN GLOBAL VARIABLE TRONG JS
Một biến JavaScript được xác định biến Global (toàn cục), nếu trong tất cả ngữ cảnh của nó đều có quyền truy cập vào nó.
Thường thì ngữ cảnh được xác định bởi tệp JavaScript nơi biến được khai báo / định nghĩa, nhưng trong các dự án JavaScript nhỏ hơn, nó có thể là toàn bộ dự án.
Và cũng không có quy ước đặt tên đặc biệt nào cho các biến toàn cục trong JavaScript.
-
Một biến JavaScript toàn cục được khai báo ở đầu dự án / tệp.
-
Một biến JavaScript toàn cục được viết bằng camelCase nếu nó có thể thay đổi được.
-
Biến JavaScript toàn cục được viết bằng UPPERCASE nếu nó là bất biến.
#10: QUY ƯỚC ĐẶT TÊN FILE TRONG JAVASCRIPT
Có hai chiến lược đặt tên tệp trong JavaScript: PascalCase và kebab-case.
Trong các ứng dụng Front end, bạn sẽ thường thấy người ta sử dụng kiểu PascalCase để đặt tên cho các component (ví dụ: các component của React).
- components/
--- user/
----- UserProfile.js
----- UserList.js
----- UserItem.js
--- ui/
----- Dialog.js
----- Dropdown.js
----- Table.js
Ngược lại, trong ứng dụng back end, kebab-case là cách sử dụng thông thường:
- routing/
-- - user-route.js
-- - messages-route.js
Bạn cũng thể sẽ thấy ai đó sử dụng camelCase, nhưng tương tự như trong các ứng dụng front end. Nhưng điều này có nguy cơ là hệ điều hành đang xử lý chúng theo cách khác có thể dẫn đến lỗi.
Đó là lý do tại sao kiểu kebab-case nên là tiêu chuẩn cho việc đặt tên tệp trong JavaScript.
? CÓ NÊN SỬ DỤNG GẠCH DƯỚI ĐỂ ĐẶT TÊN BIẾN?
Vậy còn dấu gạch dưới có được sử dụng để đặt tên trong JavaScript không?
Vì camelCase và PascalCase chủ yếu được xem xét trong JS, bạn đã thấy rằng dấu gạch dưới hiếm khi được sử dụng cho các biến hoặc hằng số riêng.
Đôi khi, bạn sẽ tìm thấy dấu gạch dưới khi nhận thông tin từ bên thứ ba như cơ sở dữ liệu hoặc API.
Một trường hợp khác mà bạn có thể thấy dấu gạch dưới là các tham số hàm không được sử dụng.
? CÓ NÊN SỬ DỤNG GẠCH NGANG ĐỂ ĐẶT TÊN BIẾN?
Sử dụng dấu gạch ngang để đặt tên JavaScript cũng không phải là phổ biến. Nó chỉ làm cho mọi thứ trở nên khó khăn hơn.
Ví dụ như khi sử dụng chúng trong hướng đối tượng:
// bad
var person = {
'first-name': 'Mai',
'last-name': 'Hà',
};
var firstName = person['first-name'];
// good
var person = {
firstName: 'Mai',
lastName: 'Hà',
};
var firstName = person.firstName;
Và thậm chí bạn không thể sử dụng trực tiếp dấu gạch ngang cho khai báo biến:
var first-name = 'Mai';
// Uncaught SyntaxError: Unexpected token '-'
TỔNG KẾT VỀ CÁCH ĐẶT TÊN TRONG JAVASCRIPT
Tùy mục đích sử dụng mà bạn sử dụng cách đặt tên khác nhau trong JavaScript. Và mặc dù quy ước này không phải là hoàn toàn bắt buộc, nhưng nó là tiêu chuẩn ngầm định được cộng đồng JavaScript công nhận.
Vấn đề đặt tên cực kỳ quan trọng bởi hầu hết thời gian bạn sử dụng để đọc lại code, sửa chữa và tối ưu nó.
Đừng cố tự làm khó mình, khó đồng đội.
Biết cách đặt tên chuẩn trong JavaScript thì dù bạn có tiếp cận với dự án nào cũng sẽ nhanh chóng hơn, làm việc được với nhiều team nhờ tiếng nói chung.
> Đọc thêm: Tự học lập trình bắt đầu từ đâu?
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học làm Lập trình viên. Hành động ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0383.180086
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python