Hướng dẫn javascript coding style

Viết code cũng giống như viết văn vậy, nếu bạn viết theo kiểu tùy hứng thì nó không chỉ khiến bạn gặp khó khăn khi làm việc với nhóm, mà đôi khi chính bản thân bạn chỉ cần sau vài ngày hoặc vài tuần thôi - cũng chẳng biết là mình đang viết cái gì vào ngày đó nữa. Chúng ta thường hay học thêm những cái cao siêu nhưng những thứ cần thiết và basic như code standard lại chẳng được mấy người quan tâm.

Chính vì thế mà ngày hôm nay mình sẽ viết một bài để chia sẻ những chuẩn Coding quen thuộc trong Javascript mà các lập trình viên cần lưu ý nhé.

Thế nào gọi là chuẩn Coding (Coding Standard)?

Coding Standard có thể hiểu là những quy tắc chung về cách viết mã, cấu trúc file, thư mục trong một project hay chỉ đơn giản là cách mà bạn thống nhất về việc đặt tên biến, tên file, comment.... Đừng thấy vậy mà nghĩ nó không quan trọng nhé, hãy thử nghĩ mà xem, nếu trong công việc phải làm việc cùng với team mà mỗi một người là một style khác nhau và chẳng ai tuân theo một nguyên tắc nhất định nào cả thì sẽ như thế nào nếu một ngày nào đó, project gặp lỗi hay cần nâng cấp và bạn thì phải dành cả ngày trời để đọc hiểu những dòng code của người khác. Thật mệt mỏi và tốn thời gian phải không? Thế thì tại sao ta không thử đơn giản hóa công việc đó bằng việc áp dụng những chuẩn coding dưới đây khi làm việc với Javascript?

Name Standards

"Call me by your name" trong Javascript sẽ dễ dàng hơn nếu bạn áp dụng một số quy ước cho việc đặt tên trong Javascript. Chẳng hạn như:

Chúng ta sẽ in hoa chữ cái đầu tiên ở từ thứ hai (sử dụng quy tắc camelCase) của một cụm từ cho tên biến và tên hàm. Và nếu đó là một từ đơn lẻ, chỉ việc viết thường thôi. Lưu ý rằng hãy đặt tên biến và hàm sao cho chúng có một nghĩa nhất định nào đó nhé. Bên cạnh đó, bạn cũng không nên đặt tên quá dài cho một biến hay một hàm nào đó vì nó sẽ khiến cho code dễ bị rối.

//do
var firstName = "Huan";
var lastName = "Hoa Hong";

var age = 2020;
var gender = "male";

//don't
var a = 2020;
var b = "male"; //b với a có nghĩa là gì?

//do
function getUserFriends(){};
//don't
function getUserFriendFromTheDatabase(){};

//do
var myName, herName, 
    myValue = 'Huan Hoa Hong';
//don't
var foo = true; //hơi tối nghĩa
var bar = false;
var x;
var y;
var z;

Ngoài ra khi viết code Javascript, ta cũng có một số quy ước đặt tên phổ biến cho hàm ví dụ như:

// is/has/can functions sẽ return giá trị bool

function canDrawCircle(){};
function isRealNumber(){};
function hasFloatValue(){};

//get Function sẽ return giá trị không phải bool

function getUserPosts(){};

//set Function được dùng để lưu dữ liệu

function setUserInfo(){};

Một vài quy ước khác mà bạn cũng nên học hỏi thêm:

//dùng danh từ cho tên của class và hãy nhớ là viết hoa cho mỗi ký tự đầu của từ
//dùng quy tắc PascalCase
class Car{...};
new UserFriend(){};
//don't
class MakeCar{...} // thường thì chẳng ai nói "tạo cho tôi một chiếc MakeCar mới đâu nhỉ?"

//hạn chế dùng kí tự _ cho tên của bạn
let blueBike;
function deleteUser(){...}
//don't
const _userGuide = true;

Space và Tab Indentation

Mỗi indentation level sẽ có những quy định khác nhau về việc cách nhau một nhóm các spaces nhất định với mục đích chủ yếu là để bạn hoặc thành viên khác trong team có thể dễ dàng đọc code của nhau hơn. Các Indentation level thường cách nhau bởi 2 spaces, ví dụ 2 spaces với first indentation, 4 spaces với second indentation, ... Chúng ta có thể setting khi sử dụng các editor để tùy ý một tab tương ứng với bao nhiêu spaces.

Tab Indentation cũng tương tự như vậy và với mỗi indentation level ta lại sử dụng 1 tab. Nói nôm na là mỗi cấp indentation sẽ cách nhau 1 tab. Ví dụ minh họa như sau:

// Ví dụ: thường thì ta sẽ sử dụng 2 spaces cho indentation
function tellName (name) {
  console.log('My name is ', name); //dùng dấu nháy đơn cho chuỗi là hợp lý nhất nhé
}

//Thêm vào 1 space đằng sau mỗi keyword
//do
if (condition) {...}
//don't
if(condition) {...}

//thêm vào 1 space trước một function declaration's parenthesese như sau:
//do
function myName (arg) {...}
run(function () { ... }) 
function foo () { return true }
//don't
function myName(arg) {...}
run(function() { ... }) 
function foo () {return true}

//infix operators cũng nên được space
//do
var x = y + z ;
//don't
var x=y+z;

//cả dấu phẩy cũng thế
//do
var list = [2, 4, 5, 6]
function greet (name, function) {...}
//don't
var list = [2,4,5,6]
function greet (name,function) {...}

//do
var object = { 'key': 'value' } 
//don't
var obj = { 'key':'value' }  
var obj = { 'key' :'value' }

Thật ra thì những cái này thì mình thường dùng extension Beautiful Code trên VS Code và cứ mỗi lần save là nó lại fix những lỗi về spacing của mình nên mình cũng chẳng cần động tay động chân nhiều. Nhưng nhớ những điều này cũng sẽ có lợi cho bạn. Biết đâu đấy sau này bạn lại dùng những phần mềm khác không có tính năng này thì sao?

Hạn chế Horizontal Scrolling

Thường thì một dòng code sẽ được giới hạn bởi 80 kí tự, chính vì vậy mà ta không nên phá vỡ nguyên tắc này. Nếu bạn viết code mà khiến thành viên khác phải scroll theo chiều horizontal quá nhiều thì sẽ khiến họ cảm thấy bất tiện và khó chịu, bên cạnh đó, nó cũng không tiện cho việc review với những dự án được public lên github.

Sử dụng Black Line

Ta cũng có thể sử dụng black line để phân cách các khối lệnh hay logic không liên quan tới nhau, chẳng hạn như

if (num === 1) { //nên dùng dấu "===" thay vì chỉ "=="
   for (i = 0; i < arr.length; i++) {
        if (arr[i] !== 0) {...}
        else if (arr[i] === arr.length) {...}
   }
}

Một số chuẩn Coding khác

Những chuẩn coding này mình không biết liệt kê chúng vào đâu, nói chung là nhiều lắm nên mình chỉ liệt kê một vài chuẩn thường dùng thôi.

• Đối với mảng:

//do
var myItems = [];
var someItems;
someItems.push(x);

//don't
var myItems = new Array();
var someItems;
someItems[someItems.length] = x;

//do
var numbers = [1, 2, 3];
//don't
var numbers = new Array(1, 2, 3);

• Đối với Object: ở JS khi ta muốn tạo các method cho object thì nên sử dụng các protype để khai báo. Việc viết như vậy sẽ tách được ra một chỗ là biến sẽ được khai báo ở trong function. Còn method nó sẽ viết ở ngoài. Ngoài ra, ta cũng nên nhớ một vài quy tắc như: tên object phải nằm cùng với dấu { đầu tiên trên cùng một hàng, sử dụng dấu hai chấm giữa key và value, không thêm dấu "," vào cặp key-value cuối cùng, v.v....

function Animal() {}
//don't
var dog = new Animal;
//do    
var dog = new Animal();

//Mỗi object nên chứa một getter khi setter được định nghĩa
//do
var person = {
  set name (value) {
    this._name = value
  },
  get name () {        
    return this._name
  }
}
//don't
var person = {
  set name (value) {    // ✗ avoid
    this._name = value
  }
}

//prototype cho object

function myPetName (options) {
  options || (options = {});
  this.name = options.name || 'no name';
}

myPetName .prototype.getName = function getName () {
   return this.name;
};

myPetName .prototype.toString = function toString () {
   return 'Jedi - ' + this.getName();
};

//với những object nào ngắn có thể ghi như thế này trên cùng một dòng
var person = {firstName:"Huan", lastName:"HH", age:50, eyeColor:"black"};

• Đối với các statements

//dùng break cho mỗi trường hợp của switch
//don't
switch (filter) {
  case 1:
    doSomething()    
  case 2:
    doSomethingElse()
}
//do
switch (filter) {
  case 1:
    doSomething()
    break           
  case 2:
    doSomethingElse()
}
/*
Giữ cho statement else ở cùng một dòng với dấu {}, và cho dù câu điều kiện if của bạn chỉ có một dòng thì cũng nên đặt nó ở trong dấu {}
*/
//do
if (condition) {
  console.log('hello world');
} else {
  // ...
}
//don't
if (condition)
  console.log('hello world');
else {
  // ...
}
​

Tạm kết

Bên trên là một vài chuẩn coding phổ biến mà mình nghĩ các anh em lập trình viên Javascript nên nhớ và áp dụng. Thật ra thì còn nhiều cái nữa lắm nhưng nếu mình liệt kê ra chắc một bài viết như thế này sẽ không đủ đâu. Và theo mình thì bấy nhiêu đó đủ để khiến code bạn trông clean hơn bao giờ hết rồi đấy!