Công nghệ - Bảo mật

[Javascript] Kỹ thuật rút gọn code

Giới thiệu

Chào mọi người, hôm nay mình xin giới thiệu cho mọi người một vài lưu ý nho nhỏ để dần cải thiện hơn trong việc viết code javascript.
Giúp việc code javascript trở nên dễ dàng và trình bày code gọn gàng hơn bằng những cú pháp rút gọn code và đa phần là những tính năng của ES6 cung cấp cho chúng ta .

1. Toán tử 3 ngôi

Có khá là nhiều ngôn ngữ hỗ trợ cú pháp này như java, c++ , c#, php, ruby,… Đơn giản đây chỉ là cách viết gọn hơn của if...else chỉ trên 1 dòng code.

Longhand:

 
Shorthand:

2. Định nghĩa biến

Sẽ nhanh hơn và gọn hơn nếu chúng ta khai báo nhiều biến cũng một lúc.

Longhand:

Shorthand:

3. So sánh với giá trị kiểu boolean

Trong trường hợp giá trị so sánh được so sánh với giá trị true thì ta có thể bỏ qua toán tử so sánh đó.

Longhand:

Shorthand:

Note: Thực tế thì 2 cú pháp trên không hoàn toàn giống nhau. Với cú pháp rút gọn thì chỉ cần likeJavascript là truthy value thì sẽ đúng do mình khuyên bạn chỉ nên sử dụng với trường hợp so sánh điều kiện kiểu boolean.

Ngoài ra còn có cũng có thể áp dụng đối với trường hợp KHÔNG PHẢI là true

Longhand:

Shorthand:

4. Vòng lặp For

Mẹo này giúp bạn thật sự hữu ích đối với những người muốn viết JS thuần và không muốn dựa vào các thư viện bên ngoài như JQuery hay Lodash.

Longhand:

Shorthand:

Nếu bạn muốn lặp theo index thì có thể sử dụng cú pháp:

5. Arrow functions

Một trong những tính năng phải gọi là cực kỳ hữu ích của ES6 mà bạn không nên bỏ qua. Thay vì phải sử dụng cú pháp rờm rà để định nghĩa một funtion thì giờ đây ta có thể sử dụng dấu => nhìn trực quan và ngắn gọn hơn hẳn.
Thay vì bạn viết:

Thì hãy viết thành:

Ví dụ:

6. Implicit Return

Nếu bạn sử dụng cú pháp của arrow function thì sẽ không cần sử dụng từ khóa return vẫn có thể trả về kết quả mà ta mong muốn:

Longhand

Shorthand

7. Default Parameter Values

Cũng là một tính năng của ES6, việc này giúp bạn tránh giá trị của tham số truyền vào là undefined. Việc khởi tạo những tham số mặc định trong function cũng khá là quan trọng đấy.

Longhand

Shorthand

8. Template Literals

Bạn đã gặp khó khăn trong việc lấy là một đoạn chuỗi mà vừa có cả biến vừa có cả string chưa? Để giải quyết vấn đề này thì ES6 có đưa ra cú pháp ${} giúp việc thao tác với chuỗi trở nên đơn giản hơn.

9. Multi-line String

Bạn đã bao giờ viết một chuỗi trên nhiều dòng chưa, mình nghĩ là vẫn còn nhiều bạn vẫn viết theo cách sau:

thay vào đó hãy viết như sau nhé:

10. Spread Operator Shorthand (…)

Đây là cú pháp khá là mới và có thể nhiều bạn còn chưa từng biết và cú pháp này. Trong bài các phương thức xử lý về mảng mình cũng đã từng giới thiệu qua rồi. Về cơ bản Spread Operator cho phép ta chuyển 1 mảng thành nhiều phần tử đơn lẻ, một chuỗi thành nhiều kỹ tự rồi chúng ta có thể tùy ý thao tác với từng phần tử hoặc ký tự đó.

Longhand

Shorthand

Note: Không giống như concat() bạn có thể sử dụng spread operator để chèn vào bất kỳ vị trí vào bạn muốn chứ không phải nhất thiết ở cuối một mảng.

11. Double Bitwise NOT (~~ )

Double bitwise NOT (~~ ) có thể dùng thay thế cho hàm làm tròn xuống Math.floor().

12. Exponent Power (** )

Đây là cách viết tắt của hàm pow()

Shorthand

13. Chuyển đổi qua lại giữa chuỗi và số

Việc chuyển đổi này có vẻ không mấy là phức tạp cho lắm.

nhưng bạn có thể sử dụng cú pháp sau vừa đơn giản và dễ nhớ nữa:

Kết luận

Trên đây chỉ là một cách giúp bạn rút gọn code hơn và không hẳn phải áp dụng hết trong mọi trường hợp, vì có thể việc mình rút gọn code nhiều quá dẫn đến khi đọc lại code sẽ trở thành khó khăn vậy nên bạn thận trọng và linh hoạt trong việc trình bày code.

 

Leave a Comment