Sự khác nhau giữa Var, Let và Const trong JavaScript

Khi nào nên sử dụng VAR, LET, CONST ???

Với việc ra mắt ES6, hai từ khóa khá quan trọng trong JavaScript cũng được giới thiệu là letconst. Trước khi ra đời ES6, cách duy nhất để khai báo một biến trong JavaScript là sử dụng var. Nhưng sự khác biệt giữa var, letconst là gì? Và khi nào chúng ta sử dụng cho phạm vi nào?

1. Var

Như bạn có thể biết, cách thức cũ để khai báo một biến trong JavaScript là sử dụng từ khóa var.

var name = "NhiTT";
console.log(name);

Khi bạn log biến name trong console, đầu ra rõ ràng sẽ là NhiTT . Biến name hiện tại là biến có phạm vi global. Sẽ thú vị hơn khi chúng ta thêm một hàm.

function setup() {
  var name = "Benjamin";
}

setup();
console.log(name);

Bạn nghĩ rằng output trong console sẽ là gì nào? Nếu bạn nghĩ rằng đầu ra sẽ là "NhiTT", thì sai rồi nhé. Điều này là do biến name được định nghĩa trong hàm setup và chỉ có phạm vi hàm. Điều này có nghĩa là biến chỉ có thể được sử dụng trong hàm setup. Đầu ra của ví dụ này sẽ là undefined .

Có thể sử dụng các biến có phạm vi toàn cầu bên trong một hàm. Điều này có nghĩa là biến age có thể được sử dụng bên trong hàm setup. Điều này sẽ in ra "NhiTT 16 tủi" trong console.

var age = 16;

function setup() {
  var name = "NhiTT";
  console.log(name + age + " tủi");
}

setup();

Bạn chỉ có thể truy cập các biến có cùng phạm vi hoặc phạm vi cao hơn. Vì vậy, trong một chức năng, bạn có thể truy cập phạm vi toàn cầu. Nhưng, trên toàn cầu, bạn không thể truy cập vào một biến chỉ được tạo trong một hàm.

Cũng tốt để biết rằng một biến có phạm vi toàn cầu có thể được thay đổi từ bên trong một hàm. Trong ví dụ dưới đây, biến age sẽ được đặt thành 15, do đó 15 sẽ được in ra trong console.

var age = 16;

function setup() {
  var name = "Benjamin";
  age = 15;
}

setup();
console.log(age);

Nó trở nên khó khăn hơn khi var được sử dụng trong một vòng lặp for hoặc trong một câu lệnh if. Vòng lặp for hoặc lệnh if sẽ không tạo ra các biến của riêng chúng.

Điều này có nghĩa là biến có thể truy cập rộng rãi hơn vòng lặp hoặc câu lệnh mà chúng được tạo. Trong ví dụ bên dưới, biến i có phạm vi toàn cục. Điều này sẽ in ra 10 trong console.

for (var i = 1; i <= 10; i++) {
  // Do something in this loop
}

console.log(i);

// The example above behaves the same as:

var i = 1;

for (i; i <= 10; i++) {
  // Do something in this loop
}

console.log(i);

2. Let

Let sử dụng phạm vi khối và không phạm vi từ vựng. Điều này có nghĩa là let không quan tâm đến toàn cầu hoặc cục bộ hoặc liệu bạn có ở trong một hàm hay không. Thay vào đó, let quan tâm đến khối bạn đang ở. Một khối về cơ bản là bất cứ thứ gì có dấu ngoặc nhọn. Đây có thể là một hàm, nhưng cũng là một vòng lặp for v hoặc một câu lệnh if.

let i = 5;

for (let i = 1; i <= 10; i++) {
  // Do something in this loop
}

console.log(i);

Trong ví dụ trên, biến i không được cập nhật trong phạm vi toàn cầu; do đó đầu ra sẽ là 5.

Let hữu ích khi bạn muốn có một biến trong phạm vi của nó. Có thể truy cập các biến từ một khối cao hơn, giống như var có thể truy cập các biến từ phạm vi cao hơn.

3. Const

Const hoạt động gần giống như let. Tuy nhiên, sự khác biệt duy nhất là một khi bạn đã gán một giá trị cho một biến const, bạn không thể gán lại nó cho một giá trị mới. Giống như từ khóa implies.

for (const i = 1; i <= 10; i++) {
  // Do something in this loop
}

console.log(i);

Ví dụ trên sẽ đưa ra một lỗi cho bạn biết rằng bạn đang cố gán giá trị mới cho 1 const.

Const là hữu dụng với bất cứ khi nào bạn biết rằng bạn có một biến mà bạn sẽ cố định. Và bây giờ bạn tự hỏi, tại sao chúng ta lại lưu trữ một giá trị trong một biến có giá trị không thay đổi?

Một phần của điều đó là đúng. Mặt khác, bạn có thể sử dụng nếu để dễ đọc. Bạn có thể chọn hard code một số giá trị trong code của mình ở nhiều nơi, nhưng sử dụng một biến const làm cho mã của bạn dễ bảo trì hơn. Bất cứ khi nào giá trị mã hóa thay đổi, bạn chỉ phải thay đổi biến const, thay vì đi qua toàn bộ mã tìm kiếm giá trị mã hóa cứng đó.

Trong ví dụ dưới đây, tên người dùng là giá trị mà chúng tôi nhận được từ đầu vào của người dùng và sẽ không thay đổi. Một biến const làm cho mã dễ đọc hơn nhiều.

const username = document.querySelect(‘input[name=”username”]).value;

Điều tương tự áp dụng cho ví dụ tiếp theo. Bất cứ khi nào bạn đang xử lý các đối tượng lớn, bạn cũng có thể sử dụng const để cải thiện khả năng đọc.

const books = api.data.sources[‘library’].books;

Sử dụng const có thể giúp làm cho code sau này của bạn rõ ràng hơn. Điều này đặc biệt hữu ích khi bạn làm việc trong một nhóm. Nếu ai đó nhìn thấy một mã const, người đó biết rằng giá trị có lẽ không nên thay đổi.

4. Ngoại lệ: Sự kết hợp của const và các đối tượng

Các declaration const tạo ra một tham chiếu chỉ đọc đến một giá trị. Điều đó không có nghĩa là giá trị mà nó giữ là bất biến, chỉ là định danh biến không thể được gán lại.

Điều này có nghĩa là không thể thực hiện được những điều sau vì chúng tôi cố gắng gán lại cho tên người dùng cho biến const.

const user = { 'name': 'NhiTT'};

user = { 'name': 'Truong Thi Nhi'};

console.log(user);

Nhưng có thể thay đổi các thuộc tính của đối tượng này. Điều này là do giá trị mà một const nắm giữ không phải là bất biến.

const user = { 'name': 'NhiTT'};

// This is possible and won't give any errors
user.name = 'Truong Thi Nhi';
user.age = 16;

5. Khi nào nên sử dụng loại biến nào?

Tôi nghĩ một trong những lý do duy nhất mà bạn nên sử dụng var là khi bạn làm việc trên một base code không hỗ trợ ES6.

Nói chung, let tốt hơn là var vì nó làm giảm phạm vi. Trong hầu hết các trường hợp, bạn sẽ có thể biến tất cả các câu lệnh var thành câu lệnh let mà không có bất kỳ thay đổi ngữ nghĩa nào.

Const được đánh giá là tốt hơn so với let. Từ góc độ kỹ thuật, const không bao giờ là bắt buộc. Mỗi const có thể được thay thế bằng một biến let, nhưng sử dụng const có thể làm cho mã sạch hơn. Trừ khi bạn cần thay đổi giá trị, hãy sử dụng const. Nó bao gồm tất cả lợi ích khi sử dụng let cùng với việc giảm sự hiện diện của các biến chưa được khởi tạo và làm cho mã dễ đọc và thiện cảm hơn. Nếu bạn không chắc chắn liệu mình có cần thay đổi giá trị hay không, hãy biến nó thành một const cho đến khi bạn cần thay đổi nó.

source:

https://medium.com/better-programming/javascript-variables-the-difference-between-var-let-and-const-10efef5d2728