Var, Let và Const - Sự khác biệt là gì?

Rất nhiều tính năng mới sáng bóng ra mắt với ES2015 (ES6). Và bây giờ, kể từ năm 2020, người ta cho rằng rất nhiều nhà phát triển JavaScript đã trở nên quen thuộc và bắt đầu sử dụng các tính năng này.

Mặc dù giả định này có thể đúng một phần, nhưng vẫn có thể một số tính năng này vẫn còn là một bí ẩn đối với một số nhà phát triển.

Một trong những tính năng đi kèm với ES6 là bổ sung letconst, có thể được sử dụng để khai báo biến. Câu hỏi đặt ra là, điều gì khiến chúng khác biệt với những thứ tốt varmà chúng ta đang sử dụng? Nếu bạn vẫn chưa rõ về điều này, thì bài viết này là dành cho bạn.

Trong bài viết này, chúng tôi sẽ thảo luận var, letconst  liên quan đến phạm vi của họ, sử dụng và treo với. Khi bạn đọc, hãy lưu ý sự khác biệt giữa chúng mà tôi sẽ chỉ ra.

Var

Trước khi ES6 ra đời, các vartuyên bố đã có hiệu lực. Tuy nhiên, có những vấn đề liên quan đến các biến được khai báo var. Đó là lý do tại sao cần có những cách mới để khai báo biến. Đầu tiên, chúng ta hãy hiểu varthêm trước khi thảo luận về những vấn đề đó.

Phạm vi của var

Phạm vi về cơ bản có nghĩa là nơi các biến này có sẵn để sử dụng. varkhai báo là phạm vi toàn cầu hoặc chức năng / phạm vi cục bộ.

Phạm vi là toàn cục khi một varbiến được khai báo bên ngoài một hàm. Điều này có nghĩa là bất kỳ biến nào được khai báo varbên ngoài một khối chức năng đều có sẵn để sử dụng trong toàn bộ cửa sổ.

varlà phạm vi hàm khi nó được khai báo trong một hàm. Điều này có nghĩa là nó có sẵn và chỉ có thể được truy cập trong chức năng đó.

Để hiểu thêm, hãy xem ví dụ bên dưới.

 var greeter = "hey hi"; function newFunction() { var hello = "hello"; } 

Ở đây, greeterlà phạm vi toàn cầu vì nó tồn tại bên ngoài một chức năng trong khi đó hellolà phạm vi chức năng. Vì vậy, chúng ta không thể truy cập biến hellobên ngoài một hàm. Vì vậy, nếu chúng ta làm điều này:

 var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined 

Chúng tôi sẽ gặp lỗi do hellokhông có sẵn bên ngoài chức năng.

Các biến var có thể được khai báo lại và cập nhật

Điều này có nghĩa là chúng tôi có thể thực hiện việc này trong cùng một phạm vi và sẽ không gặp lỗi.

 var greeter = "hey hi"; var greeter = "say Hello instead"; 

và điều này cũng

 var greeter = "hey hi"; greeter = "say Hello instead"; 

Palăng của var

Hoisting là một cơ chế JavaScript nơi các biến và khai báo hàm được chuyển lên đầu phạm vi của chúng trước khi thực thi mã. Điều này có nghĩa là nếu chúng ta làm điều này:

 console.log (greeter); var greeter = "say hello" 

nó được hiểu như sau:

 var greeter; console.log(greeter); // greeter is undefined greeter = "say hello" 

Vì vậy, varcác biến được đưa lên đầu phạm vi của chúng và được khởi tạo với giá trị là undefined.

Sự cố với var

Có một điểm yếu đi kèm   var. Tôi sẽ sử dụng ví dụ dưới đây để giải thích:

 var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead" 

Vì vậy, vì times > 3trả về true, greeterđược định nghĩa lại thành "say Hello instead". Mặc dù đây không phải là vấn đề nếu bạn cố ý muốn greeterđược xác định lại, nhưng nó sẽ trở thành vấn đề khi bạn không nhận ra rằng một biến greeterđã được xác định trước đó.

Nếu bạn đã sử dụng greetertrong các phần khác của mã, bạn có thể ngạc nhiên về kết quả mà bạn có thể nhận được. Điều này có thể sẽ gây ra rất nhiều lỗi trong mã của bạn. Đây là lý do tại sao letconstlà cần thiết.

Để cho

letbây giờ được ưu tiên cho khai báo biến. Không có gì ngạc nhiên vì nó được coi là một cải tiến cho các varkhai báo. Nó cũng giải quyết vấn đề varmà chúng tôi vừa đề cập. Hãy xem xét lý do tại sao điều này là như vậy.

hãy để phạm vi khối

Một khối là một đoạn mã được giới hạn bởi {}. Một khối nằm trong dấu ngoặc nhọn. Bất cứ thứ gì trong dấu ngoặc nhọn đều là một khối.

Vì vậy, một biến được khai báo trong một khối với let  chỉ có sẵn để sử dụng trong khối đó. Hãy để tôi giải thích điều này bằng một ví dụ:

 let greeting = "say Hi"; let times = 4; if (times > 3) { let hello = "say Hello instead"; console.log(hello);// "say Hello instead" } console.log(hello) // hello is not defined 

Chúng ta thấy rằng việc sử dụng hellobên ngoài khối của nó (dấu ngoặc nhọn nơi nó được định nghĩa) trả về một lỗi. Điều này là do letcác biến có phạm vi khối.

let có thể được cập nhật nhưng không được khai báo lại.

Giống như var, một biến được khai báo với letcó thể được cập nhật trong phạm vi của nó. Không giống như var, một letbiến không thể được khai báo lại trong phạm vi của nó. Vì vậy, trong khi điều này sẽ hoạt động:

 let greeting = "say Hi"; greeting = "say Hello instead"; 

điều này sẽ trả về một lỗi:

 let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared 

Tuy nhiên, nếu cùng một biến được xác định trong các phạm vi khác nhau, sẽ không có lỗi:

 let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi" 

Tại sao không có lỗi? Điều này là do cả hai trường hợp đều được coi là các biến khác nhau vì chúng có phạm vi khác nhau.

This fact makes let a better choice than var. When using let, you don't have to bother if you have used a name for a variable before as a variable exists only within its scope.

Also, since a variable cannot be declared more than once within a scope, then the problem discussed earlier that occurs with var does not happen.

Hoisting of let

Just like  var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.

Const

Variables declared with the const maintain constant values. const declarations share some similarities with let declarations.

const declarations are block scoped

Like let declarations, const declarations can only be accessed within the block they were declared.

const cannot be updated or re-declared

This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const, we can neither do this:

 const greeting = "say Hi"; greeting = "say Hello instead";// error: Assignment to constant variable. 

nor this:

 const greeting = "say Hi"; const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared 

Every const declaration, therefore, must be initialized at the time of declaration.

This behavior is somehow different when it comes to objects declared with const. While a const object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const object as this:

 const greeting = { message: "say Hi", times: 4 } 

while we cannot do this:

 const greeting = { words: "Hello", number: "five" } // error: Assignment to constant variable. 

we can do this:

 greeting.message = "say Hello instead"; 

This will update the value of greeting.message without returning errors.

Hoisting of const

Just like let, const declarations are hoisted to the top but are not initialized.

So just in case you missed the differences, here they are:

  • var declarations are globally scoped or function scoped while let and const are block scoped.
  • var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
  • They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
  • Trong khi varletcó thể được khai báo mà không được khởi tạo, constphải được khởi tạo trong quá trình khai báo.

Có bất kỳ câu hỏi hoặc bổ sung? Làm ơn cho tôi biết.

Cảm ơn bạn đã đọc :)