JavaScript

Best Practices trong JavaScript

Best Practices trong JavaScript
Được viết bởi Minh Hoàng

Series lập trình JavaScript, ngôn ngữ lập trình linh động, thực thi phía client.

Best Practices trong JavaScript

1. Tránh sử dụng nhiều biến toàn cục

– Giảm thiểu sử dụng các biến toàn cục (global variables), cũng như các data types, objects, and functions toàn cục. Vì nó có thể bị ghi đè (overwritten) bởi các tập lệnh scripts khác.

– Thay vào đó hãy sử dụng các biến cục bộ (local variables).

2. Luôn khai báo biến cục bộ

– Tất cả các biến được sử dụng trong một hàm nên được khai báo dưới dạng biến cục bộ.

– Các biến cục bộ phải được khai báo với từ khóa var, nếu không chúng sẽ trở thành biến toàn cục.

– Trong chế độ nghiêm ngặt (strict mode) không cho phép sử dụng biến nếu biến đó chưa được khai báo.

3. Luôn khai báo trước khi sử dụng

– Đây là một cách lập trình tốt, nên đặt tất cả các khai báo ở đầu mỗi tập lệnh script hoặc function. Điều này sẽ giúp:

  • Nhìn code rõ ràng.
  • Dễ dàng tìm biến cục bộ, chỉ cần tìm ở một nơi duy nhất.
  • Tránh tạo ra các biến cục bộ ghi đè (overwritten) lẫn nhau.
  • Tránh việc khai báo lại các biến trùng tên.
Ví dụ:
// Khai báo đặt ở đầu
var firstName, lastName, price, discount, fullPrice;

// Sau đó sử dụng
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price * 100 / discount;

– Điều này cũng tương tự khi sử dụng biến vòng lặp

Ví dụ:
// Khai báo đặt ở đầu
var ii;

// Sau đó sử dụng
for (ii = 0; ii < 5; ii++) {

– Theo mặc định, JavaScript di chuyển tất cả các khai báo lên trên cùng.
– Xem thêm: Khái niệm Hoisting trong JavaScript.

4. Khởi tạo biến khi khai báo

Đây là một cách lập trình tốt, nên khởi tạo giá trị cho biến khi bạn khai báo chúng. Điều này sẽ giúp:

  • Nhìn code rõ ràng.
  • Xác định một nơi duy nhất để khởi tạo biến.
  • Tránh các giá trị không xác định.
Ví dụ:
// Khai báo và khởi tạo biến ngay từ đầu
var firstName = "",
    lastName = "",
    price = 0,
    discount = 0,
    fullPrice = 0,
    myArray = [],
    myObject = {};

5. Tránh các biến không cần thiết

Không tạo các biến mới nếu bạn không có kế hoạch lưu các giá trị để tính toán về sau.

Bad:
var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

Good:
document.getElementById("demo").innerHTML = firstName + " " + lastName

6. Giảm hoạt động cho vòng lặp

– Các vòng lặp thường được sử dụng trong lập trình.

– Mỗi câu lệnh trong một vòng lặp, bao gồm câu lệnh for, được thực hiện cho mỗi lần lặp của vòng lặp.

– Các câu lệnh hay các khai báo có thể được đặt bên ngoài vòng lặp sẽ làm cho vòng lặp chạy nhanh hơn.

Bad:
var ii;
for (ii = 0; ii < arr.length; ii++) {

Better Code:
var ii;
var len = arr.length;
for (ii = 0; ii < len; ii++) {

7. Giảm truy cập DOM

– Việc truy cập DOM HTML rất chậm so với các câu lệnh JavaScript khác.

– Nếu bạn muốn truy cập một phần tử DOM nhiều lần, hãy truy cập nó một lần và sử dụng nó như một biến cục bộ:

Ví dụ:
<p id="demo"></p>

<script>

var domId;
domId = document.getElementById("demo");
domId.innerHTML = "Hello World!";

</script>

8. Cẩn thận với chuyển đổi kiểu tự động

– Lưu ý rằng các số (numbers) có thể vô tình được chuyển đổi thành chuỗi (strings) hoặc NaN (Not a Number).

– JavaScript có kiểu dữ liệu của biến rất linh hoạt. Một biến có thể chứa các kiểu dữ liệu khác nhau và một biến có thể thay đổi kiểu dữ liệu của nó:

Ví dụ:
var x = "Hello";	// typeof x là một string
x = 5;				// thay đổi typeof x thành một number
Try it »

– Khi thực hiện các phép toán, JavaScript có thể chuyển đổi số thành chuỗi:

Ví dụ:
var x1 = 5 + 7;		// x1.valueOf() là 12,  typeof x1 là một number
var x2 = 5 + "7";	// x2.valueOf() là 57,  typeof x2 là một string
var x3 = "5" + 7;	// x3.valueOf() là 57,  typeof x3 là một string
var x4 = 5 - 7;		// x4.valueOf() là -2,  typeof x4 là một number
var x5 = 5 - "7";	// x5.valueOf() là -2,  typeof x5 là một number
var x6 = "5" - 7;	// x6.valueOf() là -2,  typeof x6 là một number
var x7 = 5 - "x";	// x7.valueOf() là NaN, typeof x7 là một number
Try it »

– Trừ một chuỗi từ một chuỗi, không tạo ra lỗi nhưng trả về NaN (Not a Number):

Ví dụ:
"Hello" - "World"	// return NaN
Try it »

9. Sử dụng so sánh ===

– Toán tử so sánh == luôn chuyển đổi (thành matching types) trước khi so sánh. Chỉ so sánh giá trị (value).

– Còn toán tử === so sánh cả giá trị (value) và kiểu (type):

Ví dụ:
0 == "";        	// true
1 == "1";       	// true
1 == true;      	// true
	
0 === "";       	// false
1 === "1";      	// false
1 === true;     	// false
Try it »

10. Sử dụng giá trị mặc định cho tham số

– Nếu một hàm được gọi với một tham số còn thiếu, giá trị của tham số bị thiếu đó sẽ được set là undefined.

– Giá trị undefined có thể làm lỗi code của bạn. Vì thế, một thói quen tốt là nên gán các giá trị mặc định cho các tham số:

Ví dụ:
function myFunction(x, y) {
    if (y === undefined) {
        y = 0;
    }
}
Try it »

ECMAScript 2015 cho phép gán trực tiếp giá trị mặc định của tham số:
function (a=1, b=1) { // function code }

11. Luôn kết thúc câu lệnh switch với default

Luôn luôn kết thúc câu lệnh switch với một default. Ngay cả khi bạn nghĩ rằng không có nhu cầu dùng nó.

Ví dụ:
switch (new Date().getDay()) {
    case 0:
        day = "Sunday";
        break;
    case 1:
        day = "Monday";
        break;
    case 2:
        day = "Tuesday";
        break;
    case 3:
        day = "Wednesday";
        break;
    case 4:
        day = "Thursday";
        break;
    case 5:
        day = "Friday";
        break;
    case 6:
        day = "Saturday";
        break;
    default:
        day = "Unknown";
}

12. Đừng bao giờ khai báo đối tượng Number, String, hay Boolean

– Luôn luôn coi các numbers, strings, hoặc booleans là giá trị nguyên thủy. Không phải là đối tượng.

– Khai báo các kiểu này làm đối tượng, làm chậm tốc độ thực thi. Hơn nữa, từ khóa new làm phức tạp code. Điều này có thể tạo ra một số kết quả không mong muốn như dưới đây:

Ví dụ:
var x = "John";             
var y = new String("John");
(x === y)	// return false
			// vì x là một string, còn y là một object.
Try it »

– Hoặc thậm chí tệ hơn:

Ví dụ:
var x = new String("John");             
var y = new String("John");
(x == y)	// return false
			// vì không thể so sánh object.
Try it »

13. Đừng sử dụng new Object()

Sử dụng object literals {} thay vì new Object().

Sử dụng string literals “” thay vì new String().

Sử dụng number literals 12345 thay vì new Number().

Sử dụng boolean literals true / false thay vì new Boolean().

Sử dụng array literals [] thay vì new Array().

Sử dụng pattern literals /()/ thay vì new RegExp().

Sử dụng function expressions () {} thay vì new Function().

Ví dụ:
var x1 = {};			// new object
var x2 = "";			// new primitive string
var x3 = 0;				// new primitive number
var x4 = false;			// new primitive boolean
var x5 = [];			// new array object
var x6 = /()/;			// new regexp object
var x7 = function(){};	// new function object
Try it »

14. Tránh sử dụng eval()

– Hàm eval() được sử dụng để thực thi văn bản dưới dạng mã. Trong hầu hết các trường hợp, bạn không cần phải sử dụng nó.

– Vì nó có thể thực thi mã tùy ý, đó cũng là một vấn đề bảo mật.

15. Tránh sử dụng with

– Tránh sử dụng từ khóa with. Vì nó có tác động tiêu cực đến tốc độ thực thi. Nó cũng làm xáo trộn các phạm vi JavaScript.

– Từ khóa with không được phép dùng ở chế độ nghiêm ngặt (strict mode).

Cảm ơn bạn đã theo dõi. Đừng ngần ngại hãy cùng thảo luận với chúng tôi!

Giới thiệu

Minh Hoàng

Xin chào, tôi là Hoàng Ngọc Minh, hiện đang làm BrSE, tại công ty Toyota, Nhật Bản. Những gì tôi viết trên blog này là những trải nghiệm thực tế tôi đã đúc rút ra được trong cuộc sống, quá trình học tập và làm việc. Các bài viết được biên tập một cách chi tiết, linh hoạt để giúp bạn đọc có thể tiếp cận một cách dễ dàng nhất. Hi vọng nó sẽ có ích hoặc mang lại một góc nhìn khác cho bạn[...]

Translate »