12 tips lập trình JavaScript dễ đọc, dễ hiểu, dễ bảo trì

Thứ Hai, 24/08/2020

Tram Ho

1. Lập trình javascript nguyên tắc tiêu chuẩn

Không cần cao siêu, ngay từ đầu bạn hãy làm tốt nhất có thể mà bạn đang làm. Chính vì vậy ở bài viết này không cần nhấn mạnh rằng, bạn phải thế này thế nọ, nhưng không nên bỏ qua những tiêu chuẩn trong code của bạn bao gồm 3 yếu tố sau đây:

Tính nhất quán về dữ liệu và code.
Dễ đọc và dễ hiểu cho người khác.
Dễ bảo trì khi gặp sự cố.

2. Sử dụng `===` thay vì `==` khi so sánh

Điều này rất quan trọng vì JavaScript là ngôn ngữ nhiều kiểu nhất, vì vậy sử dụng == có thể mang lại cho bạn kết quả không mong muốn vì nó cho phép các type khác nhau.

Không nên

<span class="token comment">// BAD </span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>x <span class="token operator">==</span> y<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// do something here</span>
<span class="token punctuation">}</span>

// BAD

if (x == y) {

// do something here

}

Nên thế này

<span class="token comment">// GOOD </span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>x <span class="token operator">===</span> y<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// do something here</span>
<span class="token punctuation">}</span>

// GOOD

if (x === y) {

// do something here

}

Trong một so sánh sử dụng toán tử ==, kết quả sẽ trả về true nếu hai điều được so sánh bằng nhau.

Nhưng có một nhược điểm quan trọng: Nếu việc so sánh được thực hiện là giữa hai loại giá trị khác nhau, các loại giá trị, thì sự ép buộc kiểu sẽ xảy ra. Mỗi giá trị JavaScript thuộc về một type cụ thể. Các loại này là: Numbers, strings, Booleans, functions, và objects. Vì vậy, nếu thử so sánh một chuỗi với một số, trình duyệt sẽ cố gắng chuyển đổi chuỗi thành một số trước khi thực hiện so sánh. Tương tự, nếu bạn so sánh true hoặc false với một số, giá trị true hoặc false sẽ được chuyển đổi thành 1 hoặc 0, tương ứng.

Với sự trợ giúp của browser thì những ví dụ trên đã đi lệch hướng của chúng ta

Ví dụ để thấy dùng == thì khó có thể đoán trước điều gì đang chờ đợi chúng ta

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">10</span> <span class="token operator">==</span> <span class="token string">"10"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">0</span> <span class="token operator">==</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">' nnn'</span> <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">' '</span> <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>

console.log(10 == "10"); // true

console.log(0 == false); // true

console.log(' nnn' == 0); // true

console.log(' ' == 0); // true

Với sự trợ giúp của browser thì những ví dụ trên đã đi lệch hướng của chúng ta. Vì lẽ này nên javascript luôn khuyên chúng ta sử dụng toán tử === thay cho ==.
Ta thử áp dụng lại sẽ thấy kết quả chính xác

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">0 === "</span><span class="token template-punctuation string">`</span></span><span class="token number">0</span>"<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">0</span> <span class="token operator">===</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">' nnn'</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">' '</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>

console.log(`0 === "`0"); // false

console.log(0 === false); // false

console.log(' nnn' === 0); // false

console.log(' ' === 0); // false

Tương tự thì có kiểu so sánh !=, kiểu này thì cũng k khác gì là sử dụng ==. Hãy thay bằng !== nha.

3. Không bao giờ sử dụng `var`, sử dụng `let` thay thế

Sử dụng let sẽ giúp tránh về vấn đề scope giống như var trong javascript.

Không nên

<span class="token comment">// BAD </span>
<span class="token keyword">var</span> myVar <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>

// BAD

var myVar = 1;

Nên

<span class="token comment">// GOOD </span>
<span class="token keyword">let</span> myVar <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>

// GOOD

let myVar = 1;

Vấn đề của var bị phát hiện rõ nhất trong Block Scope, ví dụ như

<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">10</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'inside block scope with Var &gt;&gt;'</span><span class="token punctuation">,</span> i<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'outside block scope with Var &gt;&gt;'</span><span class="token punctuation">,</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// Điều gì xảy ra ở console này???</span>

for(var i = 0; i < 10; i++){

console.log('inside block scope with Var >>', i)

}

console.log('outside block scope with Var >>', i); // Điều gì xảy ra ở console này???

Kết qủa:

Ơ sao nó lại chạy tiếp khi ra khỏi scope (i = 10)?

Để trả lời cho câu hỏi này bạn nên tìm hiểu về Scope closures trước nhé.

Đó là một bất lợi đầu tiên khi sử dụng var, nó sẽ làm thay đổi biến i dẫn đến kết quả sai lệch dù chúng ta rất cẩn thận trong việc lập trình, không ngoại trừ một ai

Bất lợi thứ 2 của việc khi sử dụng var đó chính là có thể redeclaring(khai báo lại)

VD:

<span class="token keyword">var</span> number <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>   <span class="token comment">// Khai báo đầu tiên</span>
<span class="token keyword">var</span> number <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>   <span class="token comment">// Khai báo lại lần nữa</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 3 </span>

var number = 2; // Khai báo đầu tiên

var number = 3; // Khai báo lại lần nữa

console.log(number); // 3

Ở vd này thì number = 3 chẳng có lỗi gì cả nhưng điều này lại dẫn đến hệ lụy hai người trong team oánh nhao chỉ vì tại sao tôi khai báo rồi mà ông còn khai báo nữa…

GIờ chúng ta chuyển sang dùng let để thấy sự khác biệt nha

<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">10</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'inside block scope with Var &gt;&gt;'</span><span class="token punctuation">,</span> i<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'outside block scope with Var &gt;&gt;'</span><span class="token punctuation">,</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Bạn nghĩ điều gì xảy ra ở console này??</span>

for(let i = 0; i < 10; i++){

}

Kết quả:

Ok, nó khác với var bằng việc sinh ra một lỗi để cho coder biết rằng, biến i đã kết thúc và hy sinh trong khi làm nhiệm vụ(block scope). Tiếp nữa nè :

<span class="token keyword">let</span> number <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>   <span class="token comment">// Khai báo lần đầu</span>
<span class="token keyword">let</span> number <span class="token operator">=</span> <span class="token number">3</span><span class="token punctuation">;</span>   <span class="token comment">// Khai báo lại lần nữa</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Identifier 'number' has already been declared</span>

let number = 2; // Khai báo lần đầu

let number = 3; // Khai báo lại lần nữa

Ta nhận được một câu

<span class="token string">"Uncaught SyntaxError: Identifier 'number' has already been declared"</span><span class="token punctuation">.</span>

1 2	<span class="token string">"Uncaught SyntaxError: Identifier 'number' has already been declared"</span><span class="token punctuation">.</span>

Hay quá, đỡ mất công uýnh lộn

4. Luôn sử dụng const nếu được

Điều này ngăn các coder cố gắng thay đổi những điều không nên làm và nó thực sự giúp cải thiện khả năng đọc. Và luôn nên viết hoa khi đặt tên.

Không nên

<span class="token comment">// BAD </span>
<span class="token keyword">let</span> <span class="token constant">VAT_PERCENT</span> <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>

// BAD

let VAT_PERCENT = 20;

Nên

<span class="token comment">// GOOD </span>
<span class="token keyword">const</span> <span class="token constant">VAT_PERCENT</span> <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>

// GOOD

const VAT_PERCENT = 20;

Ví dụ:

<span class="token keyword">const</span> number <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>   <span class="token comment">// Khai báo đầu tiên</span>
number <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>   <span class="token comment">// gán giá trị</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Uncaught TypeError: Assignment to constant variable.</span>

const number = 1; // Khai báo đầu tiên

number = 2; // gán giá trị

Bởi vì nó là một hằng số nên nó không thay đổi, nhưng sẽ có trường hợp đặc biệt const sẽ thay đổi (mình sẽ update vào bài sau)

5. Luôn sử dụng dấu chấm phẩy `;`

Mặc dù có những trường hợp chúng ta không để ; ở cuối câu lệnh không sai giống như ở các ngôn ngữ khác như Python. Nhưng tốt hơn hết để code nhìn có thân thuộc hơn thì chúng ta cũng nên sử dụng ; ở cuối câu lệnh như một thói quen hữu ích.

Không nên

<span class="token comment">// BAD </span>
<span class="token keyword">const</span> <span class="token constant">VAT_PERCENT</span> <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> amount <span class="token operator">=</span> <span class="token number">10</span>
<span class="token keyword">return</span> <span class="token function">addVat</span><span class="token punctuation">(</span>amount<span class="token punctuation">,</span> <span class="token constant">VAT_PERCENT</span><span class="token punctuation">)</span>

// BAD

let amount = 10

return addVat(amount, VAT_PERCENT)

nên

<span class="token comment">// GOOD </span>
<span class="token keyword">const</span> <span class="token constant">VAT_PERCENT</span> <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> amount <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token function">addVat</span><span class="token punctuation">(</span>amount<span class="token punctuation">,</span> <span class="token constant">VAT_PERCENT</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

// GOOD

let amount = 10;

6. Sử dụng Template strings khi nối String

Khi sử dụng Template literals (Template strings) trông code có vẻ lịch sử hơn và để lại ấn tượng nhiều hơn.

Không nên

<span class="token comment">// BAD </span>
<span class="token keyword">let</span> fullName <span class="token operator">=</span> firstName <span class="token operator">+</span> <span class="token string">" "</span> <span class="token operator">+</span> lastName<span class="token punctuation">;</span>

// BAD

let fullName = firstName + " " + lastName;

nên

<span class="token comment">// GOOD </span>
<span class="token keyword">let</span> fullName <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>firstName<span class="token interpolation-punctuation punctuation">}</span></span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>lastName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>

// GOOD

let fullName = `${firstName} ${lastName}`;

7. Sử dụng `function arrow` trong ES6 bất cứ khi nào có thể

function arrow là một cú pháp ngắn gọn hơn để viết biểu thức hàm. Nhưng cũng phải nên nhớ có những trường hợp không nên sử dụng arrow function nha. (Khi nào sử dụng ES5 regular và ES6 arrow functions )

Không nên

<span class="token comment">// BAD </span>
<span class="token keyword">var</span> <span class="token function-variable function">multiply</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> a<span class="token operator">*</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

// BAD

var multiply = function(a, b) {

return a* b;

};

nên

<span class="token comment">// GOOD </span>
<span class="token keyword">const</span> <span class="token function-variable function">multiply</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> a <span class="token operator">*</span> b<span class="token punctuation">}</span><span class="token punctuation">;</span>

// GOOD

const multiply = (a, b) => { return a * b};

8. Luôn sử dụng chế độ kiểm soát chặt chẽ nếu sử dụng if else

Tránh được else được thì càng tốt trong check điều kiện

Không nên

<span class="token comment">// BAD </span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>valid<span class="token punctuation">)</span>
   <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>amount <span class="token operator">&gt;</span> <span class="token number">100</span><span class="token punctuation">)</span> 
    <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>amount <span class="token operator">&gt;</span> <span class="token number">200</span><span class="token punctuation">)</span>
    <span class="token function">doSomethingElse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

// BAD

if (valid)

doSomething();

if (amount > 100)

doSomething();

else if(amount > 200)

doSomethingElse();

nên

<span class="token comment">// GOOD </span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>valid<span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>amount <span class="token operator">&gt;</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> 
<span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>amount <span class="token operator">&gt;</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">doSomethingElse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

// GOOD

if (valid) {

doSomething();

}

doSomething();

}

doSomethingElse();

}

9. Hãy chắc chắn rằng các dấu ngoặc bắt đầu trên cùng một dòng với khoảng trắng ở giữa

Không nên

<span class="token comment">// BAD </span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>myNumber <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span>
<span class="token punctuation">{</span>
    <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

// BAD

if (myNumber === 0)

{

doSomething();

}

nên

<span class="token comment">// GOOD </span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>myNumber <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

// GOOD

doSomething();

}

10. Cố gắng tránh lồng các điều kiện

if Trong if đó sẽ trở nên khó hiểu và khó đọc. Đôi khi bạn có thể không giải quyết được vấn đề, nhưng bạn có thể xem xét kỹ cấu trúc mã để xem liệu nó có thể được cải thiện hay không.

Không nên

<span class="token comment">// BAD </span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>myNumber <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>myNumber <span class="token operator">&gt;</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>hasDiscountAlready<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token function">addDiscountPercent</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token function">addDiscountPercent</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>myNumber <span class="token operator">&gt;</span> <span class="token number">50</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>hasDiscountAlready<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token function">addDiscountPercent</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>hasDiscountAlready<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token function">addDiscountPercent</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token function">addDiscountPercent</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token function">error</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

// BAD

if (myNumber > 0) {

if (myNumber > 100) {

if (!hasDiscountAlready) {

return addDiscountPercent(0);

} else {

return addDiscountPercent(10);

}

} else if (myNumber > 50) {

if (hasDiscountAlready) {

return addDiscountPercent(5);

}

} else {

return addDiscountPercent(1);

}

} else {

error();

}

nên

<span class="token comment">// GOOD </span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>myNumber <span class="token operator">&lt;=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> error<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>hasDiscountAlready<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">addDiscountPercent</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>myNumber <span class="token operator">&gt;</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">addDiscountPercent</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>myNumber <span class="token operator">&gt;</span> <span class="token number">50</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">addDiscountPercent</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token function">addDiscountPercent</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

// GOOD

if (myNumber <= 0) {

return error;

}

return addDiscountPercent(10);

}

if (myNumber > 50) {

return addDiscountPercent(5);

}

return addDiscountPercent(1);

11. Sử dụng tham số default bất cứ khi nào có thể

Trong JavaScript, nếu bạn không truyền tham số khi gọi hàm, giá trị của nó là undefined

Không nên

<span class="token comment">// BAD </span>
<span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

// BAD

myFunction(a, b) {

return a + b;

}

nên

<span class="token comment">// GOOD </span>
<span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token parameter">a <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> b <span class="token operator">=</span> <span class="token number">0</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 
   <span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

// GOOD

myFunction(a = 0, b = 0) {

return a + b;

}

12. Câu lệnh Switch nên sử dụng break và nên có default

Mình thường cố gắng không sử dụng switch câu lệnh, nhưng nếu muốn sử dụng nó thì hãy nhớ trong mỗi điều kiện có break và có sử dụng defalut nha.

Không nên

<span class="token comment">// BAD </span>
<span class="token keyword">switch</span> <span class="token punctuation">(</span>myNumber<span class="token punctuation">)</span>
<span class="token punctuation">{</span>
  <span class="token keyword">case</span> <span class="token number">10</span><span class="token operator">:</span> 
   <span class="token function">addDiscountPercent</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">case</span> <span class="token number">20</span><span class="token operator">:</span> 
   <span class="token function">addDiscountPercent</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">case</span> <span class="token number">30</span><span class="token operator">:</span>
   <span class="token function">addDiscountPercent</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

// BAD

switch (myNumber)

{

case 10:

addDiscountPercent(0);

case 20:

addDiscountPercent(2);

case 30:

addDiscountPercent(3);

}

nên

<span class="token comment">// GOOD </span>
<span class="token keyword">switch</span> <span class="token punctuation">(</span>myNumber<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">case</span> <span class="token number">10</span><span class="token operator">:</span>
        <span class="token function">addDiscountPercent</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token number">20</span><span class="token operator">:</span>
        <span class="token function">addDiscountPercent</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token number">30</span><span class="token operator">:</span>
        <span class="token function">addDiscountPercent</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
    <span class="token keyword">default</span><span class="token operator">:</span>
        <span class="token function">addDiscountPercent</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">break</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

// GOOD

switch (myNumber) {

case 10:

break;

case 20:

break;

case 30:

break;

default:

break;

}

Kết luận

Các tiêu chuẩn trong lập trình của bất kỳ ngôn ngữ nào thực sự có thể giúp cải thiện khả năng đọc và khả năng bảo trì của ứng dụng. Nếu bạn làm việc trong một nhóm, một trong những điều khó khăn là thực thi các tiêu chuẩn code sao cho toàn bộ trong nhóm đều có thể hiểu được chúng ta đang làm gì. Và các bạn có thể tham khảo bài viết này nhé. Nếu bạn cảm thấy chưa hài lòng về những gợi ý trên thì bạn có thể tìm thấy được nhiều hơn về Những nguyên tắc trong lập trình javascript.

Source:
https://medium.com/javascript-in-plain-english/19-simple-javascript-coding-stiterias-to-keep-your-code-clean-7422d6f9bc0?site=anonystick.com

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

12 tips lập trình JavaScript dễ đọc, dễ hiểu, dễ bảo trì

1. Lập trình javascript nguyên tắc tiêu chuẩn

2. Sử dụng `===` thay vì `==` khi so sánh

3. Không bao giờ sử dụng `var`, sử dụng `let` thay thế

4. Luôn sử dụng const nếu được

5. Luôn sử dụng dấu chấm phẩy `;`

6. Sử dụng Template strings khi nối String

7. Sử dụng `function arrow` trong ES6 bất cứ khi nào có thể

8. Luôn sử dụng chế độ kiểm soát chặt chẽ nếu sử dụng if else

9. Hãy chắc chắn rằng các dấu ngoặc bắt đầu trên cùng một dòng với khoảng trắng ở giữa

10. Cố gắng tránh lồng các điều kiện

11. Sử dụng tham số default bất cứ khi nào có thể

12. Câu lệnh Switch nên sử dụng break và nên có default

Kết luận

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

1. Lập trình javascript nguyên tắc tiêu chuẩn

2. Sử dụng === thay vì == khi so sánh

3. Không bao giờ sử dụng var, sử dụng let thay thế

4. Luôn sử dụng const nếu được

5. Luôn sử dụng dấu chấm phẩy ;

6. Sử dụng Template strings khi nối String

7. Sử dụng function arrow trong ES6 bất cứ khi nào có thể

8. Luôn sử dụng chế độ kiểm soát chặt chẽ nếu sử dụng if else

9. Hãy chắc chắn rằng các dấu ngoặc bắt đầu trên cùng một dòng với khoảng trắng ở giữa

10. Cố gắng tránh lồng các điều kiện

11. Sử dụng tham số default bất cứ khi nào có thể

12. Câu lệnh Switch nên sử dụng break và nên có default

Kết luận

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

2. Sử dụng `===` thay vì `==` khi so sánh

3. Không bao giờ sử dụng `var`, sử dụng `let` thay thế

5. Luôn sử dụng dấu chấm phẩy `;`

7. Sử dụng `function arrow` trong ES6 bất cứ khi nào có thể