Var, let và const – Sự khác nhau trong JavaScript là gì?

1. Sự xuất hiện của let và const

ES6 (ECMAScript 6) ra đời kèm theo nhiều tính năng mới đi kèm, một trong số đó là bổ sung let const trong việc khai báo biến. Vậy tại sao chúng ta lại cần let const dù trước đó đã có var để khai báo biến? Chúng ta sẽ cúng tìm hiểu lý do qua sự khác biệt giữa chúng trong bài viết này nhé.

2. Var

2.1 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ử dụng. Khai báo var có phạm vi là function/locally scoped (khai báo bên trong một function) hoặc phạm vi globally scoped.

Để hiểu thêm, hãy xem vi dụ dưới đây:

Ở đây, test có phạm vi globally scoped bởi vì nó nằm ngoài function, còn biến hi có phạm vi function/locally scoped. Chúng ta không thể truy cập biến hi ở bên ngoài hàm newFunction(). Vì vậy nếu chúng ta làm như sau:

Chúng ta sẽ gặp lỗi do hi không được định nghĩa bên ngoài hàm newFunction().

2.2 Var -khai báo lại và cập nhật

Chúng ta có thể khai báo lại và cập nhật lại giá trị của biến khai báo bằng var trong cùng phạm vi và sẽ không gặp lỗi:

Khai báo lại giá trị biến:

Cập nhật lại giá trị biến:

2.3 Tính chất hoisting

Hosting là một cơ chế JavaScript trong đó các khai báo biến và khai báo hàm được di chuyển lên đầu phạm vi của chúng trước khi thực thi mã.

Nếu chúng ta thực hiện:

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

Biến var sẽ được đưa lên đầu phạm vi của nó và được khởi tạo với giá trị không xác định.

2.4 Vấn đề với var

Chúng ta cùng xem ví dụ sau :

If (times > 3) trả về true nên biến hi sẽ được định nghĩa lại “hey hey hey”. Đây sẽ không là vấn đề nếu bạn thật sự muốn hi được định nghĩa lại, nhưng nó sẽ trở thành vấn đề nếu bạn không nhận ra rằng một biến hi đã được định nghĩa trước đó, trong trường hợp code chúng ta có hàng trăm ,hàng nghìn dòng code chúng ta sẽ không biết được rằng liệu giá trị của biến có bị thay đổi ở đoạn code nào dẫn đến việt debug là vô cùng khó khăn. Đây chính là lý do sự ra đời của let const.

3. Let

Khai báo let đang được ưa thích để khai báo biến trong thời điểm hiện tại. Nó là một cải tiến của khai báo var, nó giải quyết được vấn đề của var được đề cập trong phần trên. Chúng ta cúng xem tại sao lại như vậy?

3.1 Let là phạm vi khối

Một khối là đoạn mã được giới hạn bởi {}. 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 đó.

Chúng ta cùng xem ví dụ sau:

Việc sử dụng biến hello bên ngoài khối của nó sẽ trả về lỗi. Điều này do các biến let được đặt phạm vi khối.

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

Giống như var, một khai báo biến với let có thể được cập nhật trong phạm vi của nó. Không giống như var, một biến let không thể được khai báo lại trong phạm vi của nó.

Có thể cập nhật :

Không thể khai báo lại:

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

Điều này là do các biến được khai báo trong phạm vi khác nhau nên được xem là 2 biến khác nhau.

Thực tế thì khai báo let là một lựa chọn tốt hơn var. Khi sử dụng let chúng ta không phải bận tâm nếu đã sử dụng tên cho một biến trước đó vì một biến chỉ tồn tại trong phạm vi của nó. Ngoài ra, một biến không thể khai báo lại trong cũng một phạm vi, nên đã khắc phục được vấn đề trước đó đối với var.

3.3 Hosting of let

Giống như var, khai báo let được nâng lên hàng đầu khi thực thi.

Nhưng khác với var được khởi tạo là undefined, biến let không được khởi tạo. Vì vậy, nếu cố gắng sử dụng một biến let trước khai báo, bạn sẽ nhận được một Reference Error.

4. Const

Các biến được khai báo với const có giá trị không đổi, không thể cập nhật hay khai báo lại.

4.1 Const là phạm vi khối

Giống như khai báo let, khai báo const chỉ có thể được truy cập trong phạm vi khối được khai báo.

4.2 Const không thể được cập nhật, hoặc khai báo lại

Như đã đề cập ở trên, giá trị của biến được khai báo const sẽ được giữ nguyên trong phạm vi của nó. Nó không thể được cập nhật hay khai báo lại. Đây là điểm lưu ý khi bạn khai báo với const .

Chúng ta không thể làm những điều này với khai báo const :

và cũng không:

Đối với trường hợp biến là reference (object, array và function) thì tuy không thể khai báo hay cập nhật giá trị của biến nhưng chúng ta vẫn có thể cập nhật lại giá trị cho thuộc tính của biến đó.

4.3 Hosting of const

Cũng giống như let, các khai báo const được đưa lên đầu khi thực thi nhưng không được khởi tạo

Cảm ơn các bạn đã đọc ^ – ^…

Tham khảo:

https://dev.to/sarah_chima/var-let-and-const–whats-the-difference-69e