12 tips hay cho JavaScript

Trong bài post này tôi sẽ chia sẻ về 12 tip về JavaScript khủng giúp bạn giảm code và chạy code tối ưu hóa.

Tham khảo thêm Mẹo với Javascript (ES6) và thủ thuật để làm cho code sạch hơn, ngắn hơn, và dễ đọc hơn ( Phần 1)

1) Convert sang boolean dùng operator !! 

Đôi khi bạn cần check xem variable có tồn tại hay có giá trị không, để xem chúng như giá trị thực. Để làm vậy bạn có thể dùng !!, sẽ tự động chuyển bất kì loại data nào thành boolean và biến này sẽ trả về false chỉ khi nó nhận được các giá trị: 0, null, “”, undefined hoặc NaN, còn lại nó sẽ trả về true. Để hiểu rõ hơn hãy xem ví dụ dưới đây:

function Account(cash) {
    this.cash = cash;
    this.hasMoney = !!cash;
}
var account = new Account(100.50);
console.log(account.cash); // 100.50
console.log(account.hasMoney); // true
var emptyAccount = new Account(0);
console.log(emptyAccount.cash); // 0
console.log(emptyAccount.hasMoney); // false

Trong trường hợp này, nếu giá trị account.cash lớn hơn 0, account.hasMoney sẽ trả về true.

2) Convert sang số dùng operator +

Đây là điều khá kì diệu! Và đơn giản dễ làm, nhưng chỉ hiệu quả với các string number, còn lại nó sẽ trả về NaN(Not a Number). Xem thêm ví dụ dưới đây:

function toNumber(strNumber) {
    return +strNumber;
}
console.log(toNumber("1234")); // 1234
console.log(toNumber("ACB")); // NaN
This magic will work with Date too and, in this case, it will return the timestamp number:
console.log(+new Date()) // 1461288164385

3) Các conditional short-circuits

if (conected) {
    login();
}

Nếu bạn thấy dòng code như trên, bạn có thể shorten nó bằng cách dùng bộ kết hợp variable và một function dùng && (AND operator) giữa chúng. Ví dụ, code trước sẽ trở nên ngắn hơn chỉ với một dòng:

conected && login();

Bạn có thể làm cách tương tự để check xem attribute hay function có tồn tại trong object hay không. Tương tự như code dưới đây:

user && user.login();

4) Các giá trị mặc định dùng operator ||

Trong ES6 hiện tại đang có feature default argument. Để mô phỏng feature này trong các browser cũ bạn có thể dùng || (OR operator) bằng cách đưa default value như một parameter thứ hai. Nếu parameter đầu tiên trả về false thì cái thứ 2 sẽ được dùng như default value. Xem ví dụ sau:

function User(name, age) {
    this.name = name || "Oliver Queen";
    this.age = age || 27;
}
var user1 = new User();
console.log(user1.name); // Oliver Queen
console.log(user1.age); // 27
var user2 = new User("Barry Allen", 25);
console.log(user2.name); // Barry Allen
console.log(user2.age); // 25

5) Cache array.length trong loop’

Tip này rất đơn giản và ảnh hưởng nhiều hơn đến hiệu suất khi xử lý các array lớn trong loop. Căn bản là, hầu như mọi người đều viết cái forto đồng bộ này dưới dạng một array:

for (var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

Nếu bạn làm việc với các array nhỏ hơn – không sao cả, nhưng nếu bạn xử lý các array lớn hơn, code này sẽ tính toán lại size của array trong mỗi vòng lặp của loop và sẽ gây ra gián đoạn nhỏ. Để tránh việc này xảy ra, bạn nên cache array.length trong một variable để dùng thay vì đụng tới array.length mọi lúc trong loop:

var length = array.length;
for (var i = 0; i < length; i++) {
    console.log(array[i]);
}

Để làm nó nhỏ lại, hãy viết code sau:

for (var i = 0, length = array.length; i < length; i++) {
    console.log(array[i]);
}

6) Detect các property trong một object

Mẹo này rất hữu ích với JavaScript khi bạn cần check xem attribute có tồn tại không và giúp tránh các function hoặc attribute undefined. Nếu bạn định viết code cross browser, có lẽ nạn sẽ dùng phương pháp này. Ví dụ, hãy tưởng tượng bạn cần viết code tương thích với Internet Explorer 6 và muốn dùng document.querySelector() để lấy một vài element bằng id của nó. Tuy nhiên, trong browser này function chưa tồn tại, vì thế để check sự tồn tại cảu nó bạn có thể dùng in operator, xem ví dụ dưới đây:

if ('querySelector' in document) {
    document.querySelector("#id");
} else {
    document.getElementById("id");
}

Trong trường hợp này, nếu không có function querySelector trong object, ta có thể dùng document.getElementById() thay thế.

7) Lấy item cuối trong array

Array.prototype.slice(begin, end) có thể cắt các array khi bạn đặt các argument begin và end. Nhưng nếu bạn không cài end argument, function này sẽ tự động gán giá trị lớn nhất cho array. Tôi nghĩ không nhiều người biết rằng function này có thể nhận giá trị âm, và nếu bạn set một số âm vào begin argument bạn sẽ nhận các element cuối cùng trong array:

var array = [1, 2, 3, 4, 5, 6];
console.log(array.slice(-1)); // [6]
console.log(array.slice(-2)); // [5,6]
console.log(array.slice(-3)); // [4,5,6]

8) Cắt array 

Phương pháp này có thể khóa size của array, rất hữu ích để xóa các elemnt của array dựa trên số element bạn muốn set. Ví dụ, nếu bạn có một array khoảng 10 element, nhưng bạn chỉ muốn lấy 5 element đầu tiên, bạn có thể cắt array, làm nó nhỏ lại bằng cách set array.length = 5. Xem ví dụ sau:

var array = [1, 2, 3, 4, 5, 6];
console.log(array.length); // 6
array.length = 3;
console.log(array.length); // 3
console.log(array); // [1,2,3]

9) Thay thế toàn bộ

Function String.replace() cho phép dùng String và Regex để thay thế các string, căn bản thì chỉ thay thế được phần đầu tiên. Nhưng bạn có thể mô phỏng function replaceAll() bằng cách dùng /g ở cuối Regex:

var string = "john john";
console.log(string.replace(/hn/, "ana")); // "joana john"
console.log(string.replace(/hn/g, "ana")); // "joana joana"

10) Gộp các array

Nếu bạn cần gộp 2 array Bạn có thể dùng function Array.concat():

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];

Tuy nhiên, function này không phù hợp để gộp các array lớn vì nó sẽ tiêu tốn nhiều dung lượng bằng cách tạo ra array mới. Trong trường hợp này, bạn có thể dùng Array.push.apply(arr1, arr2) để tạo array mới – nó sẽ gộp array thứ hai vào cái đầu tiên để giảm tiêu hao bộ nhớ:

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];

11) Convert NodeList thành các Arrays

Nếu bạn chạy function document.querySelectorAll("p"), nó trả về một array các DOM element, một object NodeList. Nhưng object này không có tất cả các function của array, như là: sort(), reduce(), map(), filter(). Để mở nó và nhiều function array khác bạn cần phải convert NodeList thành Array. Để chạy lĩ thuật này chỉ cần dùng function này: [].slice.call(elements):

var elements = document.querySelectorAll("p"); // NodeList
var arrayElements = [].slice.call(elements); // Now the NodeList is an array
var arrayElements = Array.from(elements); // This is another way of converting NodeList to Array

12) Shuffle các element của array

Để shuffle các elemnt của array mà không dùng các library ngoài như Lodash, chỉ cần chạy cái này:

var list = [1, 2, 3];
console.log(list.sort(function() {
    return Math.random() - 0.5
})); // [2,1,3]

Bài viết gốc được đăng tải tại TopDev