10 tip tối ưu code trên JavaScript mà web developer nào cũng nên biết

Tác giả: Gert Svaiko

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ọ.

Xem thêm các việc làm tuyển dụng Javascript hấp dẫn tại TopDev

10 tip tối ưu code trong JavaScript là gì?

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” giúp bạn thực hiện câu lệnh điều kiện của mình đơn giản hơ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 ~~

// 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ả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 mảng vẫn không gây quá tải dữ liệu cho máy chủ

Việc hợp nhất dữ liệu là vấn đề quan trọng, có thể gây ảnh hưởng nhiều đến máy chủ nếu khối lượng dữ liệu được hợp nhất quá 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 sẽ còn tùy thuộc vào kích thước mảng.

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

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)

Cách sử dụng filters với mảng

Lọc mảng rất hữu ích khi 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ể tóm gọn hoặc loại trừ dữ liệu dựa vào hàm sau 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)

Xem thêm các việc làm KMS Technology tuyển dụng hấp dẫn tại TopDev

Cách 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

Cách sử dụng phím tắt để thay thế 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"

Cách 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.

Xem thêm các việc làm tuyển dụng Tester hấp dẫn tại TopDev

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');

Cách 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 giảm độ lớn của 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ủ.

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

Có thể bạn quan tâm:

• JavaScript là gì? Internet có thể tồn tại mà không có JavaScript hay không?
• 7 lý do Product Manager vẫn sẽ nắm giữ vai trò quan trọng trong công nghệ SaaS
• Top 5 câu hỏi phỏng vấn JavaScript Developer nào cũng nên biết

Xem thêm việc làm tuyển dụng IT hấp dẫn tại TopDev