Một vài mẹo JavaScript bỏ túi cho Web Developer

Một vài mẹo JavaScript bỏ túi cho Web Developer

Giới thiệu

Xin chào các bạn. Trong bài viết này mình sẽ chia sẻ một số mẹo JavaScript được tích góp từ kinh nghiệm bản thân cộng với các bài viết chia sẻ của một số Developer khác khi sử dụng JavaScript, hy vọng có thể phần nào giúp cho việc sử dụng JavaScript của bạn trở nên dễ dàng và thuận tiện hơn.


1. Tránh những lỗi không đáng có khi dùng default function

Các default array function của JavaScript như map, forEach, filter,… sẽ bị lỗi nếu như trường hợp array của bạn null hoặc undefined (VD: nhận dữ liệu từ server), nó khá nguy hiểm nếu bạn nào quên, khiến ứng dụng mình tự nhiên đột tử. Các bạn nên kiểm tra trước khi gọi các function đó. Bạn có thể lồng nó vào scope của if hoặc gọn hơn thì viết như này:

var newArr = array && array.map(function(item) {
    // do something
});Code language: PHP (php)

2. Sử dụng Ternary Operator cho gọn gàng

What do you think about the ternary operator? - DEV Community

Hay dễ hiểu là sử dụng dấu ? : đấy ạ =)) Ternary Operator (toán tử ba ngôi) tùy từng trường hợp có thể không được khuyến khích, nhưng bất kì lúc nào bạn cần tìm kiếm một giải pháp khiến code bạn trở nên ngắn gọn hơn, bạn có thể ngay lập tức nghĩ đến nó.

$element.css('color', per$.isFirstTab ? 'red' : 'green');Code language: JavaScript (javascript)

3. Hãy dùng === thay cho ==

Trong JavaScript, ta có thể dùng hai loại toán tử so sánh bằng: === (hay !==) và == (hay !=). Mình khuyên bạn chỉ nên dùng cái trước thôi. Cụ thể hơn, nếu cả hai toán hạng (operand) có cùng kểu và giá trị, code === sẽ cho kết quả true trong khi code !== sẽ cho kết quả false. Nếu bạn áp dụng code == (hay !=), bạn sẽ gặp nhiều vấn đề liên quan đến các kiểu toán hạng khác nhau; code == (hay !=) sẽ cố ép giá trị (một cách vô ích) khi thực thi chuyển đổi kiểu tự động. Mặt khác toán tử === (hay !==) sẽ không chuyển đổi mà sẽ cân bằng giá trị và kiểu của toán hạng, nhanh hơn nhiều so với == (hay !=).

[10] === 10 // is false
[10] == 10 // is true
'10' == 10 // is true
'10' === 10 // is false
[] == 0 // is true
[] === 0 // is false
'' == false // is true but true == "a" is false
'' === false // is falseCode language: JavaScript (javascript)

Xem thêm bài viết Phân biệt toán tử == và === trong JavaScript.


4. Tận dụng những hàm có sẵn

Thấy nhiều bạn cứ hay search forEach, Map, filter,… kèm với jQuery. Đúng là jQuery support chúng ta nhiều thứ nhưng nếu đọc tài liệu của JavaScript thì thật sự nó support chúng ta khá nhiều thứ để làm việc với Object, Array, String,… rồi. Nhiều khi chúng ta cũng chẳng cần phải sử dụng third party cho những vấn đề đó.

Các bạn có thể lên Mozilla Developer Network để tham khảo cũng như có cái nhìn tổng quan về toàn bộ JavaScript trước khi làm một điều gì đó. Nhiều khi trong native đã có sẵn rồi. Đọc thêm 10 Array method trong JavaScript Coder cần biết để có thể sử dụng linh hoạt các hàm có sẵn của mảng.


5. Hạn chế sử dụng try-catch-finally trong vòng lặp

Exception Handling in JavaScript

Lệnh try-catch-finally sẽ tạo biến mới trong phạm vi nhất định khi catch clause được áp dụng. Đều này sẽ gây caught exception object gán với một biến số. Thay vì như thế này:

var object = ['foo', 'bar'], i;
for (k = 0, len = object.length; k <len; k++) {
     try {
          // do something that throws an exception
     }
     catch (e) {
          // handle exception
     }
}Code language: JavaScript (javascript)

Bạn có thể thử thế này:

var object = ['foo', 'bar'], i;
try {
    for (p = 0, len = object.length; p < len; p++) {
        // do something that throws an exception
    }
} catch (e) {
        // handle exception
}Code language: JavaScript (javascript)

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Bình luận