JavaScript Tips, Tricks and Best Practices

Trong bài viết này mình sẽ chia sẻ một số thủ thuật JavaScript vô cùng hữu ích mà lập trình viên JavaScript cần biết.

Chú ý là tất cả các đoạn code trong bài viết này đều được chạy test trên phiên bản Google Chrome version 30, được sử dụng Javascript Engine V8 (V8 3.20.17.15).

Đừng quên từ khóa var cho lần gán giá trị của biến lần đầu tiên.

Gán giá trị cho biến không được khai báo sẽ tự động biến nó thành biến toàn cục. Dùng biến toàn cục không kiểm soát được là không nên.

Sử dụng toán tử === thay cho ==.

Toán tử == (hoặc !=) sẽ tự động ép kiểu khi cần, tuy nhiên khi dùng === (hoặc !==) sẽ không thực hiện ép kiểu cho dữ liệu so sánh. Nó sẽ so sánh giá trị và kiểu dữ liệu, về cơ bản sử dụng === sẽ nhanh hơn ==.

[10] === 10    // is false
[10]  == 10    // is true
'10' == 10     // is true
'10' === 10    // is false
 []   == 0     // is true
 [] ===  0     // is false
 '' == false   // is true but true == "a" is false
 '' ===   false // is false 

undefined, null, 0, false, NaN, '' (empty string) đều biểu thị dữ liệu sai.

Sử dụng ; để kết thúc dòng code.

Việc sử dụng dấu chấm phẩy để chấm dứt dòng code là một thói quen tốt. Bạn sẽ không bị cảnh báo nếu bạn quên nó, bởi vì trong nhiều trường hợp nó sẽ được cảnh báo bởi trình phân tích cú pháp JavaScript. Để biết thêm chi tiết về lý do tại sao bạn nên sử dụng dấu chấm phẩy, tham khảo bài viết sau: http://davidwalsh.name/javascript-semicolons.

Khởi tạo object với contructor

function Person(firstName, lastName){
    this.firstName =  firstName;
    this.lastName = lastName;        
}  

var Saad = new Person("Saad", "Mousliki");

Hãy cẩn thận khi sử dụng typeof, instanceof and constructor.

• typeof: là toán tử được Javascript thống nhất dùng để trả về 1 chuỗi đại diện cho loại nguyên thủy của biến. Bạn đừng quên typeof null sẽ trả về "object" và đối với phần lớn các đối tượng (Array, Date, ...) cũng sẽ trả về "object".
• instanceof: là một toán tử của JavaScript để kiểm tra tất cả các chuỗi nguyên mẫu của hàm constructor, trả về true nếu nó được tìm thấy và false nếu không.
• constructor: là thuộc tính của thuộc tính được khởi tạo bên trong đối tượng, có thể được ghi đè bằng code.

var arr = ["a", "b", "c"];
typeof arr;   // return "object" 
arr  instanceof Array // true
arr.constructor();  //[]

Xây dựng hàm tự gọi (Self-calling Function)

Điều này thường được gọi là Self-Invoked Anonymous Function hoặc Immediately Invoked Function Expression (IIFE). Chức năng sẽ tự động thực thi khi bạn tạo ra nó.

(function(){
    // some private code that will be executed automatically
})();  
(function(a,b){
    var result = a+b;
    return result;
})(10,20)

Get a random item from an array

var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];

var  randomItem = items[Math.floor(Math.random() * items.length)];

Get a random number in a specific range

Đoạn code này có thể hữu ích khi tạo dữ liệu fake cho mục đích testing, chẳng hạn:

var x = Math.floor(Math.random() * (max - min + 1)) + min;

Generate an array of numbers with numbers from 0 to max

var numbersArray = [] , max = 100;

for( var i=1; numbersArray.push(i++) < max;);  // numbers = [1,2,3 ... 100] 

Tạo ra 1 tập random các ký tự chữ và số

function generateRandomAlphaNum(len) {
    var rdmString = "";
    for( ; rdmString.length < len; rdmString  += Math.random().toString(36).substr(2));
    return  rdmString.substr(0, len);
}

Xáo trộn mảng numbers

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function(){ return Math.random() - 0.5});
/* the array numbers will be equal for example to [120, 5, 228, -215, 400, 458, -85411, 122205]  */

Append an array to another array

var array1 = [12 , "foo" , {name "Joe"} , -2458];

var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* array1 will be equal to  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

Chuyển arguments object thành array

var argArray = Array.prototype.slice.call(arguments);

Lấy giá trị min hoặc max trong mảng numbers

var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
var maxInNumbers = Math.max.apply(Math, numbers); 
var minInNumbers = Math.min.apply(Math, numbers);

Làm rỗng (empty) 1 array

var myArray = [12 , 222 , 1000 ];  
myArray.length = 0; // myArray will be equal to [].

Không nên sử dụng delete để xóa 1 item trong array

Thay vì dùng

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 
items.length; // return 11 
delete items[3]; // return true 
items.length; // return 11 
/* items will be equal to [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154,       119]   */

Hãy dùng

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 
items.length; // return 11 
items.splice(3,1) ; 
items.length; // return 10 
/* items will be equal to [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154,       119]   */

Phương thức delete chỉ nên dùng khi xóa 1 object property.

Bỏ bớt phần tử trong array sử dụng length

var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];  
myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].

Sử dụng toán tử AND/ OR thay cho If

var foo = 10;  
foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething(); 
foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();

Làm tròn số thập phân

var num =2.443242342;
num = num.toFixed(4);  // num will be equal to 2.4432

NOTE: toFixed() function sẽ trả về chuỗi (string) thay vì trả về số (number)

Tránh sử dụng for-in khi loop array

Hãy sử dụng

var sum = 0;  
for (var i in arrayNumbers) {  
    sum += arrayNumbers[i];  
}

Sẽ tốt hơn khi dùng

var sum = 0;  
for (var i = 0, len = arrayNumbers.length; i < len; i++) {  
    sum += arrayNumbers[i];  
}

Tại sao? Vì hàm tính length mảng arrayNumbers sẽ tính toán lại cho mỗi lần loop. NOTE : Vấn dề tính toán lại độ dài của mảng sau mỗi lần lập đã được fix trong phiên bản JavasScript mới nhất

Kết luật

Trên đây là những thủ thuật nhỏ mà tôi sưu tầm được trong quá trình coding, tôi biết còn rất nhiều thủ thuật khác hoặc có những điều tôi chia sẽ hiện không còn đúng và được áp dụng. Vì vậy nếu có bất kỳ chia sẻ hay feedback nào hãy comment ở phía dưới nhé.

References

• 45 Useful JavaScript Tips, Tricks and Best Practices
• JavaScript Performance Best Practices (CC) * StackOverFlow tips and tricks