Trang chủ » Blog » 7 cách viết mã sạch bằng JavaScript

7 cách viết mã sạch bằng JavaScript

bởi CodeGym | 26/12/2023 14:58 | Blog

Viết mã sạch sẽ cải thiện khả năng bảo trì của ứng dụng và giúp các lập trình viên làm việc hiệu quả. Tuy nhiên, một số lập trình viên không biết về một số tính năng của ngôn ngữ lập trình giúp cho họ nâng cao kỹ năng code, khả năng tái sử dụng,…

Trong bài viết này, chúng ta sẽ thảo luận về 7 cách viết mã sạch bằng JavaScript dựa trên các tính năng của nó. Bắt đầu nào!!!

Nội dung

7 cách viết mã sạch bằng JavaScript
Video chia sẻ: Clean Code – Trở thành một lập trình viên tốt hơn
Kết luận

7 cách viết mã sạch bằng JavaScript

1. Sử dụng Object Destructuring

Object Destructuring cho phép bạn lấy các trường cụ thể từ một đối tượng và gán chúng cho một biến ngay lập tức. Nó làm giảm số lượng dòng mã chúng ta cần để trích xuất các thuộc tính đối tượng và làm cho mã của bạn dễ hiểu hơn.

Object Destructuring tiết kiệm rất nhiều tự việc khai báo biến rõ ràng và nó thực sự hữu ích trong các tình huống khi:

Sử dụng nhiều thuộc tính từ một đối tượng
Sử dụng cùng một thuộc tính nhiều lần
Sử dụng một thuộc tính được lồng sâu trong một đối tượng

const employee = {name: ‘ANE01’, email: ‘Anna@example.com’, phone:’0112–345–6789'};
 //with destucturing
 const {name, email, phone} = employee;
 //without destucturing
 const name = employee.name;
 const email = employee.email;
 const phone = employee.phone;

Code language: PHP (php)

Kết quả của hai ví dụ trên (có và không có Object Destructuring) là giống hệt nhau. Tuy nhiên, việc sử dụng Object Destructuring giúp bạn viết mã sạch và dễ hiểu hơn rất nhiều.

>> Xem thêm: Destructuring trong JavaScript

2. Sử dụng nhiều tham số thay vì 1 đối tượng

Khi khai báo một hàm, chúng ta nên sử dụng nhiều tham số đầu vào thay vì các đầu vào đối tượng đơn lẻ. Cách tiếp cận này giúp các lập trình viên dễ dàng hiểu được số lượng tham số tối thiểu cần được truyền bằng cách nhìn vào chữ ký của phương thức.

Ngoài ra, nó cải thiện hiệu suất ứng dụng vì không cần tạo các đối tượng

//recommended
 function CustomerDetail (CustomerName, CustomerType, Order){
 console.log('This is ${CustomerName} of ${CustomerType} and need ${Order}');
 }
 //not-recommended
 function CustomerDetail (User){
 console.log('This is ${User.CustomerName} of ${User.CustomerType} and need ${User.Order}');
 }

Code language: JavaScript (javascript)

Tuy nhiên, nếu số lượng tham số đầu vào tăng lên, bạn nên chuyển về sử dụng tham số đối tượng để tránh những phức tạp không cần thiết về mã.

Lưu ý: Nếu bạn sử dụng TypeScript và có nhiều tham số, thì việc define 1 interface của các tham số sẽ dễ dàng hơn khi kiểm tra kiểu hoặc gợi ý tự động.

3. Sử dụng các hàm mũi tên

Các hàm mũi tên cung cấp một cách ngắn gọn để viết các hàm JavaScript trong khi giải quyết vấn đề truy cập thuộc tính này bên trong callback.

Nếu bạn đang sử dụng các hàm mũi tên, mã của bạn trở nên ngắn gọn, dễ hiểu và rõ ràng hơn.

Ví dụ dưới đây cho thấy sự so sánh giữa một hàm mũi tên một dòng không có dấu ngoặc đơn và một hàm thông thường.

// Arrow function
 const myOrder = order => console.log(`Customer need ${order}`);
 // Regular Function
 function(order){
 console.log(`Customer need ${order}`);
 }

Code language: JavaScript (javascript)

Mặc dù các hàm mũi tên đơn giản hơn nhiều, nhưng chúng ta phải hiểu khi nào và cách sử dụng chúng. Đừng quá lạm dụng nó, không thì viết mã sạch sẽ trở thành viết mã bẩn đó.

Ví dụ, sử dụng các hàm mũi tên không phải là cách tiếp cận tốt nhất khi làm việc với các đối tượng, các lớp, prototype,…

Ngoài ra, không thể sử dụng các hàm mũi tên làm constructor. Bạn sẽ nhận được lỗi nếu bạn sử dụng từ khóa new để tạo một đối tượng mới từ một hàm mũi tên.

>> Xem thêm: Arrow Function là gì?

4. Sử dụng Template Literals để nối chuỗi

Template Literals là các ký tự được phân cách bằng dấu gạch ngược (`) để tạo chuỗi nhiều dòng và thực hiện nội suy chuỗi.

//before
 var name = 'Peter';
 var message = 'Hi'+ name + ',';
 //after
 var name = 'Peter';
 var message = `Hi ${name},`;

Code language: JavaScript (javascript)

>> Xem thêm: Template Literals trong JavaScript

5. Sử dụng Spread Operator

Spread Operator (…) là một tính năng khác được giới thiệu với ES6. Nó có khả năng mở rộng các ký tự như mảng thành các phần tử riêng lẻ với một dòng mã duy nhất.

Spread Operator thực sự hữu ích khi chúng ta cần đưa một mảng hoặc đối tượng vào một mảng hoặc đối tượng mới hoặc để kết hợp nhiều tham số trong mảng.

Đoạn mã dưới đây cho thấy cách kết hợp 2 mảng bằng cách sử dụng Spread Operator .

let x = [car, bus,van];
 let y = [bike, truck, ..x, lorry]
 console.log (y);
 // bike, truck, car, bus, van, lorry

Code language: JavaScript (javascript)

>> Xem thêm: Spread Operator trong JavaScript

6. Tránh sử dụng Callback

Callback từng rất phổ biến khi xử lý các hàm bất đồng bộ trong các chương trình JavaScript. Tuy nhiên, nếu bạn vẫn đang sử dụng nó, tôi hy vọng bạn đã biết nỗi đau của việc xử lý nhiều Callback lồng nhau.

Ví dụ: đoạn mã sau chứa 4 hàm Callback và nó sẽ càng khó hơn khi về sau có nhiều code hơn.

function1(function (err, data) {
 ...
 function2(user, function (err, data) {
 ...
 function3(profile, function (err, data) {
 ...
 function4(account, function (err, data) {
 ....
 });
 });
 });
 });

Code language: JavaScript (javascript)

ES6 và ES7 đã giới thiệu, Promises và Async/Await là giải pháp thay thế để xử lý các hàm bất đồng bộ và chúng dễ sử dụng hơn và dễ hiểu hơn đối với người khác.

Nếu bạn sử dụng Promises hoặc Async/Await, viết mã sạch hơn rất nhiều:

// Promises
 function1()
 .then(function2)
 .then(function3)
 .then(function2)
 .catch((err) => console.error(err));
 // Async/Await
 async function myAsyncFunction() {
 try {
 const data1= await function1();
 const data2= await function2(data1);
 const data3= await function3(data2);
 return function4(data4);
 }
 catch (e) {
 console.error(err);
 }}

Code language: JavaScript (javascript)

>> Xem thêm: Tìm hiểu về Callback Function trong JavaScript

7. Sử dụng Shorthand Operator nếu có thể

Khi làm việc với điều kiện, Shorthand Operator có thể giúp bạn tiết kiệm rất nhiều thời gian.

Ví dụ: nếu bạn viết một điều kiện để kiểm tra các điều kiện empty, null và undefined cho một biến, bạn phải viết 2 điều kiện trong câu lệnh if.

if (x !== “” && x !== null && x !== undefined) { ... }

Code language: JavaScript (javascript)

Tuy nhiên, nếu bạn đang sử dụng Shorthand Operator, bạn chỉ cần viết một điều kiện duy nhất như dưới đây:

if ( !!x ) { ... }

Video chia sẻ: Clean Code – Trở thành một lập trình viên tốt hơn

Bạn đã bao giờ:

“Ủa, gì đây, đứa nào viết vậy???? ….. aaa ~~~ khó hiểu quá ~~~~~”
Code chỗ này nhưng lại phát sinh bug ở chỗ kia?
Càng code thì hệ thống càng chậm?
Đọc mã nguồn của các hệ thống mã nguồn mở và không hiểu gì?
Phải viết thêm nhiều câu chú thích trong code của mình?
Cố gắng viết mã nguồn ngắn nhất có thể, bởi vì càng ngắn gọn càng tốt?
…

Trong video này, mọi câu hỏi “kinh điển” của các bạn sẽ được giải đáp. Viết code là một công việc nghệ thuật của một người nghệ nhân. Ai biết Clean Code thì sẽ được người khác sùng bái.

Video:

[CodeGym] Livestream "Clean Code - Trở thành một lập trình viên tốt hơn"

Watch this video on YouTube

Kết luận

Trong bài viết này, mình đã giới thiệu về cách chúng ta có thể sử dụng các tính năng của JavaScript để viết mã sạch.

Là 1 lập trình viên, chúng ta nên luôn viết mã sạch vì nó tăng khả năng đọc và giúp người khác đỡ vất vả hơn khi đọc và phát triển các chức năng tiếp theo.

Mình hy vọng những cách này sẽ giúp bạn cải thiện kỹ năng code và nếu bạn có bất kỳ đề xuất nào, hãy chia sẻ chúng với những người khác trong phần bình luận phía dưới nhé!

Nguồn: hocjavascript.net

Tags: JavaScript