Login

10 lỗi JavaScript người mới hay gặp và cách tránh

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Ai học JavaScript cũng từng ngồi nhìn màn hình mà không hiểu vì sao mã chạy ra kết quả kỳ lạ. Phần lớn những khoảnh khắc đó đến từ một nhóm lỗi quen thuộc. Biết trước chúng, bạn sẽ tiết kiệm được rất nhiều thời gian gỡ lỗi.

1. Dùng == thay vì ===

Toán tử == tự ép kiểu trước khi so sánh, gây ra kết quả khó đoán:

0 == '';       // true
0 == '0';      // true
'' == '0';     // false
null == undefined; // true
null === undefined; // false

Hãy mặc định dùng === và !==. Bạn sẽ ít khi phải nghĩ đến quy tắc ép kiểu phức tạp.

2. Cộng chuỗi với số

'10' + 5;   // '105'
'10' - 5;   // 5
Number('10') + 5; // 15

Giá trị lấy từ ô nhập (input) luôn là chuỗi. Hãy chuyển sang số bằng Number() hoặc parseFloat() trước khi tính toán.

3. Sắp xếp mảng số bằng sort mặc định

[10, 2, 33, 4].sort();                 // [10, 2, 33, 4], sắp xếp theo chuỗi
[10, 2, 33, 4].sort((a, b) => a - b);  // [2, 4, 10, 33]

Đồng thời sort thay đổi trực tiếp mảng gốc. Muốn giữ nguyên bản gốc, hãy sao chép trước: [...mang].sort(...).

4. Quên rằng NaN không bằng chính nó

NaN === NaN;            // false
Number.isNaN(NaN);      // true
Number('abc');          // NaN

Dùng Number.isNaN() để kiểm tra, và kiểm tra dữ liệu đầu vào trước khi tính toán.

5. Sai số số thực

0.1 + 0.2;                  // 0.30000000000000004
(0.1 + 0.2).toFixed(2);     // '0.30'

Máy tính lưu số thực theo hệ nhị phân nên có sai số nhỏ. Với tiền tệ, hãy tính bằng đơn vị nhỏ nhất (như đồng hoặc xu, dạng số nguyên) rồi định dạng khi hiển thị.

6. "Cannot read properties of undefined"

Đây là thông báo lỗi bạn sẽ gặp nhiều nhất. Nó xảy ra khi truy cập thuộc tính của undefined hoặc null:

const user = {};
// user.diaChi.thanhPho  // lỗi
const tp = user.diaChi?.thanhPho; // an toàn, trả về undefined

Hãy đọc kỹ thông báo: nó cho biết thuộc tính nào đang được đọc, từ đó bạn lần ngược xem giá trị nào là undefined.

7. Quên return hoặc gọi hàm không đúng

Một arrow function với ngoặc nhọn cần return rõ ràng. Quên nó, hàm trả về undefined. Ngoài ra, truyền ham khác với truyền ham(): cái thứ hai gọi ngay và truyền kết quả. Ví dụ button.onclick = chao() chạy hàm ngay lúc gán, rồi gán kết quả của nó.

8. Sửa đổi mảng hoặc object khi đang duyệt

Xóa phần tử trong lúc lặp qua mảng làm bạn bỏ sót phần tử. Hãy dùng filter để tạo mảng mới, hoặc duyệt từ cuối về đầu nếu bắt buộc phải xóa tại chỗ.

9. Quên await hoặc xử lý lỗi bất đồng bộ

Không có await, bạn nhận một promise thay vì dữ liệu. Không có catch, lỗi mạng sẽ trở thành lỗi unhandled. Luôn bọc trong try/catch hoặc nối .catch().

10. Khai báo biến toàn cục ngoài ý muốn

Gán giá trị cho biến chưa khai báo ở chế độ lỏng sẽ tạo ra biến toàn cục. Hãy luôn khai báo bằng const hoặc let và bật 'use strict' (hoặc dùng module) để trình duyệt báo lỗi thay vì âm thầm cho qua.

Công cụ phòng tránh

  • ESLint: bắt nhiều lỗi ngay khi bạn gõ.
  • Prettier: thống nhất định dạng, đỡ bàn cãi.
  • TypeScript: phát hiện sai kiểu từ lúc viết mã.
  • DevTools: đặt breakpoint và xem giá trị biến thay vì đoán.

Thói quen gỡ lỗi hiệu quả

Thay vì rải console.log khắp nơi, hãy tập dùng breakpoint trong tab Sources của DevTools: bấm vào số dòng để dừng chương trình tại đó, rồi xem giá trị mọi biến, đi từng bước với nút Step over. Từ khóa debugger; trong code có tác dụng tương tự khi DevTools đang mở.

Khi gặp lỗi, hãy đọc thông báo từ đầu đến cuối, chú ý tên file và số dòng trong stack trace. Hãy thu nhỏ vấn đề: chép đoạn mã gây lỗi ra một file riêng, bỏ dần từng phần cho đến khi lỗi biến mất, bạn sẽ biết nguyên nhân nằm ở đâu. Và nếu vẫn bí, hãy tóm tắt vấn đề thành lời, chính việc diễn đạt đôi khi tự gợi ra lời giải.

Kết luận

Không ai viết mã không lỗi, nhưng người giỏi biết nhận ra mẫu lỗi quen thuộc rất nhanh. Hãy lưu lại danh sách này và đối chiếu mỗi khi gặp kết quả khó hiểu.

Nếu bạn muốn được dẫn dắt qua các bài tập có đáp án và giải thích, hãy tham khảo các khóa học tại codebem.com.

author_photo
Nguyễn Đình Cường

0 comment