Các lỗi thường gặp trong JavaScript

Dưới đây là một số lỗi cơ bản bạn có thể gặp trong khi lập trình JavaScript.

Vô tình sử dụng toán tử gán

Các chương trình JavaScript có thể tạo ra các kết quả không mong muốn nếu một lập trình vô tình sử dụng toán tử gán (=), thay vì toán tử so sánh (==) trong câu lệnh if.

Câu lệnh if này trả về false (như mong đợi) bởi vì x không bằng 10:

var x = 0;
if (x == 10)

Câu lệnh if này trả về true (có thể không như mong đợi), bởi vì 10 là đúng:

var x = 0;
if (x = 10)

Câu lệnh if này trả về false (có thể không như mong đợi), bởi vì 0 là false:

var x = 0;
if (x = 0)

Một phép gán sẽ luôn trả về giá trị của phép gán đó.

Sai kiểu dữ liệu khi so sánh

Trong so sánh thông thường, kiểu dữ liệu không quan trọng. Câu lệnh if này trả về true:

var x = 10;
var y = “10”;
if (x == y)

Trong so sánh chặt chẽ, kiểu dữ liệu là vấn đề quan trọng. Câu lệnh if này trả về false:

var x = 10;
var y = “10”;
if (x === y)

Đó là một sai lầm phổ biến khi quên mất câu lệnh chuyển đổi sử dụng so sánh chặt chẽ. Trường hợp dưới đây sẽ cho một cảnh báo:

var x = 10;
switch(x) {
case 10: alert(“Hello”);
}

Ví dụ sau sẽ không hiển thị cảnh báo:

var x = 10;
switch(x) {
case “10”: alert(“Hello”);
}

Nhầm lẫn giữa thêm vào và phép nối

Bổ sung là về việc thêm số. Kết nối là về thêm chuỗi. Trong JavaScript, cả hai thao tác sử dụng cùng một toán tử +. Vì lý do này, việc thêm một số do một số sẽ cho kết quả khác nhau bằng cách thêm một số như một chuỗi:

var x = 10 + 5;          // kết quả x là 15
var x = 10 + “5”;        // kết quả x là “105”

Khi thêm hai biến, có thể khó dự đoán được kết quả:

var x = 10;
var y = 5;
var z = x + y;           // kết quả z là 15

var x = 10;
var y = “5”;
var z = x + y;           // kết quả z là “105”

Hiểu nhầm Floats

Tất cả các số trong JavaScript được lưu trữ dưới dạng Floating point numbers 64-bit. Tất cả các ngôn ngữ lập trình, bao gồm JavaScript, đều gặp khó khăn với các giá trị floating point chính xác:

var x = 0.1;
var y = 0.2;
var z = x + y // kết quả z sẽ không phải là 0.3

Để giải quyết vấn đề trên, bạn có thể viết như sau:

var z = (x * 10 + y * 10) / 10;       // z là 0.3

Cắt một chuỗi JavaScript

JavaScript sẽ cho phép bạn cắt một câu lệnh thành hai dòng:

var x =
“Hello World!”;

Nhưng, phá vỡ một câu lệnh ở giữa một chuỗi sẽ gây ra lỗi:

var x = “Hello
World!”;

Bạn phải sử dụng một dấu gạch chéo ngược nếu bạn phải cắt một câu lệnh trong một chuỗi:

var x = “Hello
World!”;

Dấu chấm phẩy đặt sai chỗ

Do một dấu chấm phẩy sai vị trí, khối mã này sẽ thực hiện bất kể giá trị của x:

if (x == 19);
{
// khối mã
}

Ngắt dòng một câu lệnh return

Đó là hành vi JavaScript mặc định để đóng một câu lệnh tự động ở cuối một dòng. Vì lý do này, hai ví dụ này sẽ trả lại kết quả tương tự:

function myFunction(a) {
var power = 10
return a * power
}

hay

function myFunction(a) {
var power = 10;
return a * power;
}

JavaScript cũng sẽ cho phép bạn ngắt câu lệnh thành hai dòng. Do đó, ví dụ dưới cũng sẽ trả lại kết quả tương tự:

function myFunction(a) {
var
power = 10;
return a * power;
}

Nhưng, điều gì sẽ xảy ra nếu bạn ngắt câu lệnh return trong hai dòng như sau:

function myFunction(a) {
var
power = 10;
return
a * power;
}

Hàm sẽ trả về giá trị không xác định. Vì JavaScript hiểu thành:

function myFunction(a) {
var
power = 10;
return;
a * power;
}

Giải trình

Nếu một câu lệnh không đầy đủ như:

var

JavaScript sẽ cố gắng hoàn thành câu lệnh bằng cách đọc dòng tiếp theo:

power = 10;

Nhưng  khi câu lệnh này hoàn tất:

return

JavaScript sẽ tự động đóng nó như sau:

return;

Điều này xảy ra vì các câu kết thúc (kết thúc) với dấu chấm phẩy là tùy chọn trong JavaScript. JavaScript sẽ đóng câu lệnh return ở cuối dòng, bởi vì nó là một câu lệnh đầy đủ.

Không bao giờ được ngắt một câu lệnh return.

Truy cập mảng với các tên chỉ mục

Nhiều ngôn ngữ lập trình hỗ trợ mảng với các chỉ mục được đặt tên. Mảng với các chỉ mục được đặt tên được gọi là mảng kết hợp.

JavaScript không hỗ trợ mảng với các chỉ mục được đặt tên. Trong JavaScript, các mảng sử dụng các chỉ mục được đánh số:

var person = [];
person[0] = “John”;
person[1] = “Doe”;
person[2] = 46;
var x = person.length;         // person.length sẽ trả về 3
var y = person[0];             // person[0] sẽ trả về “John”

Trong JavaScript, các đối tượng sử dụng các chỉ mục được đặt tên. Nếu bạn sử dụng một chỉ mục tên, khi truy cập vào mảng, JavaScript sẽ định nghĩa lại mảng đó cho một đối tượng chuẩn. Sau khi xác định lại tự động, các phương thức và thuộc tính mảng sẽ cho kết quả không xác định hoặc không chính xác:

var person = [];
person[“firstName”] = “John”;
person[“lastName”] = “Doe”;
person[“age”] = 46;
var x = person.length;         // person.length trả về 0
var y = person[0];             // person[0] sẽ trả về undefined

Kết thúc định nghĩa bằng dấu phẩy

Các dấu phẩy nằm trong định nghĩa đối tượng và mảng là hợp lệ trong ECMAScript 5.

Ví dụ đối tượng:

person = {firstName:”John”, lastName:”Doe”, age:46,}

Ví dụ mảng:

points = [40, 100, 1, 5, 25, 10,];

Cảnh báo: trên IE 8 sẽ xuất hiện tình trạng crash vì JSON không cho phép dấu phẩy sau.

JSON:

person = {firstName:”John”, lastName:”Doe”, age:46}

points = [40, 100, 1, 5, 25, 10];

Undefined không phải là Null

Với JavaScript, null dành cho các đối tượng, Undefined được cho các biến, thuộc tính và phương thức. Để có giá trị null, một đối tượng phải được xác định, nếu không nó sẽ được undefined.

Nếu bạn muốn kiểm tra nếu một đối tượng tồn tại, điều này sẽ tạo một lỗi nếu đối tượng là undefined.

Không chính xác:

if (myObj !== null && typeof myObj !== “undefined”)

Vì lý do này, bạn phải kiểm tra kiểu typeof() đầu tiên. Đúng sẽ là:

if (typeof myObj !== “undefined” && myObj !== null)

Phạm vi mỗi khối mã

JavaScript không tạo ra một phạm vi mới cho mỗi khối mã. Điều này đúng trong nhiều ngôn ngữ lập trình, nhưng không đúng trong JavaScript.

Mã này sẽ hiển thị giá trị của i(10), ngay cả bên ngoài khối vòng lặp for:

for (var i = 0; i < 10; i++) {
// some code
}
return i;