Giới thiệu

JavaScript là gì? Đây là một ngôn ngữ lập trình quen thuộc và được nhiều dev sử dụng. Nếu muốn tối ưu code trong ngôn ngữ JavaScript thì việc sử dụng những mẹo hack này chắc chắn sẽ giúp bạn rất nhiều. Nó vừa giúp code của bạn sạch hơn, vừa tiết kiệm thời gian và tối ưu thời gian lập trình.

Theo thống kê của RedMonk, JavaScript là ngôn ngữ lập trình phổ biến nhất thế giới hiện nay. Hơn nữa, SlashData ước tính rằng khoảng 12,4 triệu dev sử dụng JavaScript, bao gồm cả CoffeeScript và TypeScript của Microsoft.

Điều này có nghĩa là hàng triệu dev đang sử dụng JavaScript để làm việc thông qua các trang web như UpWork và Freelancer, hoặc thậm chí bắt đầu kinh doanh phát triển web của riêng họ.

• Sử dụng phím tắt cho câu lệnh điều kiện

Phím tắt trong JavaScript là gì? Đó là những lệnh cho phép bạn sử dụng để viết hàm. JavaScript cho phép bạn sử dụng các phím tắt nhất định để làm cho code dễ nhìn hơn. Trong một số trường hợp đơn giản, bạn có thể sử dụng toán tử logic && và || thay if và else.

Hãy xem && toán tử đang hoạt động với cách với đoạn code dưới đây

// instead of
if (accessible) {
console.log(“It’s open!”);
}
// use
accessible && console.log(“It’s open!”);

|| mang ý nghĩa là “hoặc”. Bây giờ, việc sử dụng toán tử này phức tạp hơn một chút vì nó có thể ngăn ứng dụng thực thi. Tuy nhiên, chúng ta có thể thêm một điều kiện để vượt qua nó :

// instead of
if (price.data) {
return price.data;
} else {
return 'Getting the price’';
}
// use
return (price.data || 'Getting the price');

• ​​​Chuyển đổi thành tích phân thông qua toán tử

Các dev có thể loại bỏ số thập phân để trả về kết quả là một tích phân bằng cách sử dụng math.floor hoặc math.round để sử dụng dữ liệu. Một cách hiệu quả hơn là sử dụng toán tử ~~

// instead of
math.round(math.random*50)
// use
~~(math.random*50)
You can also use the “~~” operator to convert anything into a number value.
Example snippet:
~~('whitedress') // returns 0
~~(NaN) // returns 0

• Thay đổi kích thước hoặc làm trống một mảng bằng cách sử dụng array.length

Đôi khi các dev sẽ cần điều chỉnh kích thước mảng của mình hoặc làm trống nó. Và cách hiệu quả nhất để làm điều này là sử dụng array.length

array.length = n
var array = [a, b, c, d, e, f, g, h, i , j];
console.log(array.length); // returns the length as 10
array.length = 4;
console.log(array.length); // returns the length as 4
console.log(array); // returns “a,b,c,d”

Bạn cũng có thể sử dụng array.length để xóa tất cả các giá trị khỏi một mảng được chỉ định.

var array = [a, b, c, d, e, f, g, h, i , j];
array.length = 0;
console.log(array.length); // returns the length as 0
console.log(array);

• Hợp nhất các mảng mà không gây quá tải cho máy chủ

Nó có thể gây căng thẳng nghiêm trọng cho máy chủ khi hợp nhất các mảng, đặc biệt nếu bạn đang xử lý các tập dữ liệu lớn. Để giữ mọi thứ đơn giản và duy trì mức hiệu suất, hãy sử dụng các hàm array.concat() và array.push.apply(arr1, arr2).  Việc sử dụng một trong hai hàm này tùy thuộc vào kích thước mảng của bạn. 

Hãy xem cách xử lý các mảng nhỏ hơn:

var list1 = [a, b, c, d, e];
var list2 = [f, g, h, i, j];
console.log(list1.concat(list2)); // returns the merged values of both arrays (a, b, c, d, e,f, g, h, i, j)

Ngược lại, khi sử dụng array.concat() đối với các tập dữ liệu lớn hơn, nó sẽ tiêu tốn nhiều bộ nhớ trong khi tạo một mảng mới. Để tránh tình trạng giảm hiệu suất, hãy sử dụng cách array.push.apply(arr1, arr2) hợp nhất mảng thứ hai thành mảng đầu tiên mà không cần tạo mảng mới.

var list1 = [a, b, c, d, e];
var list2 = [f, g, h, i, j];
console.log(list1.push.apply(list1, list2)); // returns the merged values of both arrays (a, b, c, d, e,f, g, h, i, j)

• Sử dụng bộ lọc với mảng

Lọc một mảng rất hữu ích khi bạn đang làm việc với nhiều cột dữ liệu tương ứng. Trong trường hợp này, bạn có thể bao gồm và loại trừ dữ liệu dựa trên bất kỳ đặc điểm nào mô tả một nhóm trong mảng của bạn. Để lọc một mảng, hãy sử dụng hàm filter()

const cars = [
{ make: 'Opel', class: 'Regular' },
{ make: 'Bugatti', class: 'Supercar' },
{ make: 'Ferrari', class: 'Supercar' },
{ make: 'Ford', class: 'Regular' },
{ make: 'Honda', class: 'Regular' },
]
const supercar = cars.filter(h => h.class === 'Supercar');
console.table(supercar); // returns the supercar class data in a table format

Bạn cũng có thể sử dụng filter() cùng với Boolean để trả về tất cả các giá trị null hoặc không xác định từ mảng của bạn.

cars.filter(Boolean)

• Xuất ra giá trị duy nhất

Giả sử bạn có một tệp dữ liệu gồm các giá trị lặp lại và bạn cần tạo ra các giá trị duy nhất từ ​​tập hợp này. Bạn có thể làm như vậy khi sử dụng lệnh syntax ... và kiểu đối tượng Set. Cách làm này có thể thực hiện với cả dữ liệu số và chữ.

const cars = ['Opel', 'Bugatti', 'Opel', 'Ferrari', 'Ferrari', 'Opel'];
var unrepeated_cars = [...new Set(cars)];
console.log(unrepeated_cars); // returns the values Opel, Bugatti, Ferrari

• Sử dụng phím tắt thay thế chức năng (Function Shortcut)

Hãy làm quen với hàm string.replace() để việc coding của bạn trở nên nhẹ nhàng hơn. Tuy nhiên, nó chỉ thay thế một chuỗi bằng một dòng được chỉ định một lần và dừng lại từ đó. Giả sử bạn có tập dữ liệu lớn hơn và bạn cần nhập hàm này nhiều lần, nó sẽ trở nên kém hiệu quả hơn.

Ngoài ra, để đơn giản hơn bạn cũng có thể thêm /g vào cuối regex, để hàm chạy và thay thế tất cả các điều kiện phù hợp mà không dừng lại ở điều kiện đầu tiên

var grammar = "synonym synonym";
console.log(grammar.replace(/syno/, "anto")); // this returns "antonym synonym"
console.log(grammar.replace(/syno/g, "anto")); // this returns "antonym antonym"

• Lưu các biến vào bộ nhớ cache

Khi bạn đang làm việc với các mảng lớn và cần phân loại các phần tử theo ID bằng cách sử dụng getElementById() hoặc theo tên lớp bằng cách sử dụng getElementsByClassName(), thì JavaScript chạy qua mảng trên một vòng lặp với mỗi yêu cầu phần tử tương tự. Điều này có thể chiếm rất nhiều tài nguyên.

Tuy nhiên, bạn có thể tăng hiệu suất bằng cách lưu vào bộ nhớ đệm một biến nếu dữ liệu đó được bạn sử dụng thường xuyên.

var carSerial = serials.getElementById('serial1234');
carSerial.addClass('cached-serial1234');

• Kiểm tra giá trị đối tượng

Khi bạn đang làm việc với nhiều object, sẽ khó theo dõi xem đối tượng nào chứa giá trị thực và đối tượng nào bạn có thể xóa. Đây là một thủ thuật nhanh về cách kiểm tra xem một đối tượng trống hoặc có giá trị với hàm Object.keys().

Object.keys(objectName).length // if it returns 0 then the Object is empty, otherwise it displays the number of values

• Cách thu nhỏ tệp JavaScript

Các tệp JavaScript lớn sẽ ảnh hưởng đến hiệu suất tải và tốc độ phản hồi trang. Trong khi coding bạn có thể bị ảnh hưởng với các nhận xét và dead code không cần thiết. Tùy thuộc vào kích thước tệp của bạn, nó có thể trở nên nhiều hơn và nặng hơn với bộ nhớ của máy.

Có một số công cụ giúp bạn làm sạch mã và làm cho các tệp JS nhẹ hơn – hoặc giảm độ lớn của file. Mặc dù việc thu nhỏ tệp JS không phải là một sự cố nghiêm trọng nhưng nó vẫn có lợi cho các dev hơn khi biết và thực hiện.

Một trong những ứng dụng đó là Google Closure Compiler của Google, nó cho phép người dùng phân tích cú pháp JavaScript, loại bỏ dead code, viết lại và giảm dung lượng những phần còn lại. Ứng dụng thứ hai là Microsoft Ajax Minifier cho phép cải thiện hiệu suất của ứng dụng web bằng cách giảm kích thước tệp JavaScript.

Kết luận 

Trên đây là 10 thủ thuật hay ho mà các dev có thể sử dụng để code của mình sạch sẽ và gọn gàng hơn. Từ đó sẽ vừa tiết kiệm thời gian vừa duy trì khả năng lập trình tốt hơn trên máy chủ.

Tham khảo freecodecamp.org

Devmaster Academy