Phân biệt var và let trong JavaScript

Posted on September 19th, 2017

Từ trước tới giờ, có thể bạn đã quen dùng var để khai báo biến trong JavaScript. Tuy nhiên, từ phiên bản ES6, bạn có thêm một sự lựa chọn nữa là let. Vậy let giống và khác var như thế nào? Bài viết này sẽ giúp bạn phân biệt varlet trong JavaScript. Qua đó, bạn biết cách sử dụng chúng sao cho phù hợp nhất.

Giống nhau

  • Varlet đều là từ khoá - keyword.
  • Varlet cùng được dùng để khai báo biến trong JavaScript

Khác nhau

  • Phạm vi của biến số sử dụng var là phạm vi hàm số hoặc bên ngoài hàm số, toàn cục.
  • Phạm vi của biến số sử dụng let là phạm vi một khối, xác định bởi cặp {}

Ví dụ phân biệt var và let

function varvslet() {
  console.log(i); // i is undefined due to hoisting
  console.log(j); // ReferenceError: j is not defined

  for( var i = 0; i < 3; i++ ) {
    console.log("i inside ", i); // 0, 1, 2
  };

  console.log("i outside ", i); // 3
  console.log(j); // ReferenceError: j is not defined

  for( let j = 0; j < 3; j++ ) {
    console.log("j inside ", j); // 0, 1, 2
  };

  console.log("i outside ", i); // 3
  console.log("j outside ", j); // ReferenceError: j is not defined
}
varvslet();
  • Let: trong ví dụ trên biến j được khai báo sử dụng let. Bạn có thể thấy rằng biến j chỉ được phép sử dụng trong vòng lặp for. Nếu bạn gọi biến j ngoài vòng lặp for thì đều bị lỗi ReferenceError: j is not defined.
  • Var: phạm vi của biến var là phạm vi của hàm số chứa phần khai báo biến. Do đó, mặc dù biến i được khai báo trong vòng lặp for, nhưng bạn vẫn có thể gọi đến biến i ở mọi vị trí trong hàm số này. Lúc đầu, giá trị của biến i là undefined, nên khi bạn gọi console.log(i) lần đầu tiên, giá trị in ra là undefined chứ không phải là lỗi ReferenceError: i is not defined.

Nên sử dụng var hay let?

Câu trả lời là cả hai. Mặc dù, việc sử dụng let có vẻ giống với việc khai báo biến trong c/c++. Tuy nhiên, trong nhiều trường hợp, việc sử dụng var giúp code ngắn gọn hơn.

Hy vọng qua bài viết ngắn gọn này bạn có thể phân biệt varlet trong JavaScript.

Cuối cùng, hẹn gặp lại bạn trong bài viết tiếp theo, thân ái!

Tham khảo


★ Nếu bạn thấy bài viết này hay thì hãy theo dõi mình trên Facebook để nhận được thông báo khi có bài viết mới nhất nhé: