[Javascript cơ bản] Common Mistakes

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

Sử dụng Assignment Operator không đúng

  • Nhiều lỗi xảy ra chỉ vì bạn nhầm lẫn dùng toán tử = thay vì toán tử == trong so sánh điều kiện.
  • Ví dụ sau là cách dùng đúng:
var x = 0;
if (x == 10)

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

  • Ví dụ trên cho thấy x == 10 trả về giá trị là false.
  • Ví dụ dưới đây cho thấy kết quả sai. Biểu thức if sẽ trả về true:
var x = 0;
if (x = 10)

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

  • Ví dụ dưới đây cho thấy biểu thức if trả về là false:
var x = 0;
if (x = 0)

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

Lỗi trong so sánh

  • Xét ví dụ sau:
var x = 10;
var y = "10";
if (x == y)

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

  • Ví dụ trên, if sẽ trả về giá trị là true bởi vì giá trị của x và y bằng nhau (mặc dù khác kiểu dữ liệu).
  • Ví dụ sau if sẽ trả về giá trị là false dù cho giá trị x và y bằng nhau nhưng chúng khác kiểu dữ liệu.

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

  • Với biểu thức switch, điều kiện luôn luôn được so sánh cả giá trị và kiểu dữ liệu.
var x = 10;
switch(x) {
    case 10: alert("Hello");
}

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

  • Ví dụ trên sẽ alert(“Hello”). Tuy nhiên, ví dụ dưới đây sẽ không alert:
var x = 10;
switch(x) {
    case "10": alert("Hello");
}

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

Nhầm lẫn giữa phép cộng (Addition) và phép nối (Concatenation)

  • Phép cộng là cộng giữa các số lại với nhau
  • Phép nối là nối giữa các chuỗi lại với nhau
  • Trong Js, cả 2 phép cộng và nối đều dùng toán tử +
  • Do vậy, bạn lưu ý cộng giữa số với số sẽ cho ra kết quả khác với cộng số với chuỗi
var x = 10 + 5;          // the result in x is 15
var x = 10 + "5";        // the result in x is "105"

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

  • Ví dụ sau là cộng 2 biến x và y:
var x = 10;
var y = 5;
var z = x + y;           // the result in z is 15

var x = 10;
var y = "5";
var z = x + y;           // the result in z is "105"

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

Hiểu lầm về Floats

  • Tất cả số trong Js đều được lưu giữ dưới dạng 64 bits (số thực).
var x = 0.1;
var y = 0.2;
var z = x + y            // the result in z will not be 0.3

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

  • Xử lý vấn đề trên bằng cách sau:
var z = (x * 10 + y * 10) / 10;       // z will be 0.3

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

Cách dòng trong chuỗi

  • Js cho phép bạn cách dòng:
var x =
"Hello World!";

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

  • Tuy nhiên, bạn không được phép cách dòng ngay trong chuỗi:
var x = "Hello
World!";

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

  • Để giải quyết vấn đề trên, bạn sử dung dấu \
var x = "Hello \
World!";

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

Đặt sai dấu chấm phẩy

  • Trong ví dụ sau, đoạn code trong dấu {} sẽ không được thực thi vì bạn đặt sai dấu ;
if (x == 19);
{
    // code block  
}

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

Ngắt dòng và từ khóa return

  • Mặc định Js sẽ tự hiểu kết thúc 1 biểu thức ngay tại cuối dòng.
  • Do vậy, 2 ví dụ sau sẽ cho ra cùng 1 kết quả.
function myFunction(a) {
    var power = 10  
    return a * power
}

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

  • Js cũng cho phép bạn cắt dòng code thành 2 dòng.
  • Ví dụ dưới đây cũng cho ra kết quả tương tự 2 ví dụ trên.
function myFunction(a) {
    var
    power = 10;  
    return a * power;
}

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

  • Tiếp theo, bạn sẽ xem thử 2 ví dụ sau đây bằng cách ngắt dòng có từ khóa return
function myFunction(a) {
    var
    power = 10;  
    return
    a * power;
}

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

  • Kết quả hàm sẽ trả về là undefined! Bởi vì Js sẽ hiểu ví dụ trên là như sau:
function myFunction(a) {
    var
    power = 10;  
    return;
    a * power;
}

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

  • Trong Js, nếu biểu thức chưa đầy đủ như sau:
var
  • Js sẽ đọc tiếp dòng tiếp theo:
power = 10;
  • Tiếp theo là từ khóa return. Bản thân return là 1 biểu thức hoàn thiện. Cho nên, dòng code sau:
return

sẽ được hiểu là:

return;
  • Bạn nên nhớ Js không bắt buộc phải kết thúc biểu thức bằng dấu ; (Js nó sẽ tự hiểu)
  • Tuy nhiên, vì return là 1 biểu thức đầy đủ cho nên bạn tránh ngắt dòng khi có return.

Truy xuất mảng với chỉ mục là tên (Named indexes)

  • Js không hỗ trợ truy xuất mảng bằng chỉ mục là tên.
  • Mảng trong Js chỉ hỗ trợ chỉ mục là số (bắt đầu từ 0).
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length will return 3
var y = person[0];             // person[0] will return "John"

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

  • Trong Js, đối tượng sử dụng chỉ mục là tên.
  • Nếu bạn sử dụng chỉ mục là tên để truy xuất mảng, Js sẽ tự định nghĩa mảng đó thành 1 đối tượng.
  • Sau khi tự chuyển mảng thành đối tượng, bạn sẽ gặp lỗi:
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length will return 0
var y = person[0];             // person[0] will return undefined

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

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

  • Ví dụ sau là sai:
points = [40, 100, 1, 5, 25, 10,];
  • Ví dụ đúng:
points = [40, 100, 1, 5, 25, 10];
  • Kết thúc định nghĩa đối tượng bằng dấu phẩy

Ví dụ sai:

person = {firstName:"John", lastName:"Doe", age:46,}
  • Ví dụ đúng:
person = {firstName:"John", lastName:"Doe", age:46}

Undefined không phải là Not Null

  • Trong Js, chỉ có đối tượng mới có giá trị null, undefined được dùng cho biến, phương thức và thuộc tính mà thôi.
  • Nếu đối tượng được khởi tạo nhưng không có giá trị, nó sẽ có giá trị là undefined (chứ không phải là null).
  • Nếu bạn muốn kiểm tra tham số truyền vào có phải đối tượng hay không, bạn dùng if như sau:
if (typeof myObj !== "undefined" && myObj !== null) 
  • Nếu bạn đảo ngược lại như sau sẽ bị báo lỗi:
if (myObj !== null && typeof myObj !== "undefined") 

Hiểu sai về Scope

  • Js không tạo scope mới cho mỗi block code.
  • Ví dụ sau sẽ trả về 10:
for (var i = 0; i < 10; i++) {
    // some code
}
return i;

See the Pen [Javascript cơ bản] Common Mistakes by Vo Thanh Duy (@duyvo) on CodePen.

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *