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
1 2 3 4 5 |
<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> |
Nên thế này
1 2 3 4 5 |
<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> |
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
1 2 3 4 5 6 |
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> |
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
1 2 3 4 5 |
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> |
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
1 2 3 |
<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> |
Nên
1 2 3 |
<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> |
Vấn đề của var
bị phát hiện rõ nhất trong Block Scope, ví dụ như
1 2 3 4 5 |
<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"><</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 >>'</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 >>'</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> |
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:
1 2 3 4 5 |
<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> |
Ở 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
1 2 3 4 5 |
<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"><</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 >>'</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 >>'</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> |
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è :
1 2 3 4 |
<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> |
Ta nhận được một câu
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
1 2 3 |
<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> |
Nên
1 2 3 |
<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> |
Ví dụ:
1 2 3 4 5 |
<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> |
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
1 2 3 4 5 |
<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> |
nên
1 2 3 4 5 |
<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> |
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
1 2 3 |
<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> |
nên
1 2 3 |
<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> |
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
1 2 3 4 5 |
<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> |
nên
1 2 3 |
<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">=></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> |
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
1 2 3 4 5 6 7 8 |
<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">></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">></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> |
nên
1 2 3 4 5 6 7 8 9 10 11 |
<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">></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">></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> |
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
1 2 3 4 5 6 |
<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> |
nên
1 2 3 4 5 |
<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> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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 keyword">if</span> <span class="token punctuation">(</span>myNumber <span class="token operator">></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">></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> |
nên
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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 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">></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">></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> |
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
1 2 3 4 5 |
<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> |
nên
1 2 3 4 5 |
<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> |
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
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
nên
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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> |
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.