Tại sao nên sử dụng let/const thay cho var trong javascript
Let, var, const

Tại sao nên sử dụng let/const thay cho var trong javascript

Viết code bằng Javascript thì dễ nhưng viết code tối ưu nhất, chuyên nghiệp nhất thì rất ư là khó. Với bản update ES2015 (ES6) ngôn ngữ Javascript đã được cộng đồng lập trình viên trên thế giới đánh giá cao vể nhiều mặt. Một trong những thay đổi đầu tiên và được hoan nghênh nhất trong phiên bản cập nhật ES6 là bổ sung thêm từ khóa let/const trong khai bao biến. Với let/const giờ đây các lập trình viên có thêm tùy chọn hợp lý hơn so với việc phải dùng var trong tất cả các trường hợp.

Tìm hiểu let/const/var trong javascript ES6

const: là từ khóa định nghĩa 1 biến sẽ là hằng số. Biến const lưu trữ giá trị không thể thay đổi được trong suốt vòng đời của biến.

const a = 10;

a = 20; // báo lỗi Uncaught TypeError: Assignment to constant variable

let: là từ khóa định nghĩa 1 biến có phạm vi truy cập trong 1 block – khối code. Biến let có phạm vi trong dấu 1 cặp dấu {} bao quanh nó

function foo() {
   let x = 10;
   if (true) {
      let x = 20; // biến x này khác với biến x phía trên
      console.log(x); // in ra 20
   }
   console.log(x); // in ra 10
}

var: là từ khóa định nghĩa 1 biến có pham vi truy cập trong 1 function. Biến var có tác dụng trong function mà nó được định nghĩa.

function foo() {
   var x = 10;
   if (true) {
      var x = 20; // x ở đây cũng là x ở trên
      console.log(x); // in ra 20
   }
   console.log(x); // vẫn là 20
}

Để tìm hiểu phạm vi và so sánh sự khác biệt giữa các khai báo let/var/const bạn xem thêm bảng so sánh dưới đây;

so sánh const/let/var trong javascript
so sánh const/let/var trong javascript

Tại sao nên sử dụng let/const thay cho var

Theo phân tích chung cũng như trải nghiệm riêng. Đa phần các biến khi sử dụng trong javascript đều phù hợp nhât với việc khai báo const. Bạn hãy thử nhớ lại biết bao nhiêu lần bạn khai báo biến trong javascript chỉ để lưu trữ 1 giá trị mà đa phần chúng ta thường chỉ tham chiếu đến nó mà không sửa đổi gì nhiều: biến tạm lưu trữ 1 đối tượng, biến tạm lưu trữ handle tới 1 đối tượng…

Từ khóa const trong javascript giúp đỡ chúng ta biết được lúc nào các biến bị đột biến về giá trị, từ đó giúp chúng ta xác hạn chế được các lỗi không mong muốn. Với yêu cầu này rõ ràng từ khóa var không phù hợp.

Tuy nhiên, việc cần khai báo một biến lưu trữ giá trị có thể thay đổi được cũng là một trong những nhu cầu cần thiết của lập trình viên. Vậy điểm khác biệt giữa let và var là gì, tại sao nên dùng let thay var trong khi cả 2 đều có tác dụng là khai báo biến có thể thay đổi được?

Điểm khác biệt sáng gái nhất là từ khóa let có tác dụng trong một khối block code. Để giải thích vấn đề này chúng ta sẽ xem xét 1 ví dụ thường thấy sau:

var callbacks = [];
(function() {
  for (var i = 0; i < 5; i++) {
    callbacks.push( function() { return i; } );
  }
})();
console.log(callbacks.map( function(cb) { return cb(); } ));

Màn hình console sẽ in ra nội dung gì cho đoạn lệnh phía trên? Theo phân tích sơ qua khi đọc code nội dung của hàm này sẽ như sau:

  1. Khai báo 1 biến callbacks lưu trữa các hàm callback trong array.
  2. Khởi tạo 1 hàm không tên.
  3. Bắt đấu vòng lặp 5 step
  4. Khởi tạo giá trị cho các elements trong array.
  5. Thoát hàm
  6. In ra giá trị trong biến callback.

Kết quả sẽ là [5,5,5,5,5] khác với yêu cầu [0,1,2,3,4] như thiết kế.

Tại sao lại có kết quả như vậy. Chúng ta cùng xem xét lại ví dụ trên với cách viết lại tường minh hơn.

var callbacks = [];
       (function() {
       var i = 0;
       for (i = 0; i < 5; i++) {
           callbacks.push( function() { return i; } );
       }
       })();
       console.log(callbacks.map( function(cb) { return cb(); } ));

Chúng ta định nghĩa một biến var i để lưu trữ giá trị index của vòng lặp for. Khi hết vòng lặp giá trị của i sẽ bằng 5. Trong phần thân hàm, các giá trị được gọi sẽ lấy giá trị i hiện tại sau cùng của i(vì i = 5 khi chay hết for, và hàm callback là hàm gọi hàm nên i = 5 trong các trường hợp).

Đối với trường hợp này bạn cần phải giải quyết rất nhiều để có thể fix được. Tuy nhiên, let cung cấp cho chúng ta một giải giáp lịch thiệp và đơn giản hơn rất nhiều.

var callbacks = [];
(function() {
  for (let i = 0; i < 5; i++) {
    callbacks.push( function() { return i; } );
  }
})();
console.log(callbacks.map( function(cb) { return cb(); } ));

Kết quả của đoạn code trên là [0,1,2,3,4] phù hợp với nhu cầu đặt ra. Điều này là nhờ phạm vi của let có hiệu lực trong khối {}. Thay vì được định nghĩa trong phạm vi của hàm, let nằm trong phạm vi khối của vòng lặp , gây ra một thể hiện riêng icho mỗi lần lặp.

Về mặt kỹ thuật, varvẫn hữu ích trong các tình huống bạn muốn duy trì phạm vi chức năng thay vì phạm vi chặn.

Một số lưu ý về const và let

Const chưa chắc là bất biến trong mọi trường hợp. Xem ví dụ sau:

const myNotQuiteImmutableObject = {
  thisCanBeChanged: "not immutable"
};
myNotQuiteImmutableObject.thisCanBeChanged = "see I changed it.";

Tuy nhiên trong đa phần các trường hợp const là phù hợp với yêu cầu. Nếu bạn khó tính, có thể dùng thư viện này của Facebook

const immutableString = "you can't change me";
immutableString = "D'OH!"; // error

Nhiêu trình duyệt chưa hỗ trợ let. Nếu tính năng let là cực kì hữu ích đối với bạn, nên sử dụng thư viện Babel trong dự án của minh

Trả lời

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

Close Menu
×
×

Cart