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

Trong bài viết này, chúng ta sẽ cùng nhau đi phân biệt var, let và const trong JavaScript.

Giới Thiệu

ES6 (viết tắt của ECMAScript 6) là một tập hợp các kỹ thuật nâng cao của JavaScript. ECMAScript do hiệp hội các nhà sản xuất máy tính Châu Âu đề xuất làm tiêu chuẩn của ngôn ngữ JavaScript. Bạn cứ nghĩ xem hiện nay có khá nhiều trình duyệt Browser ra đời và nếu mỗi Browser lại có cách chạy JavaScript khác nhau thì các trang web không thể hoạt động trên tất cả các trình duyệt đó được, vì vậy cần có một chuẩn chung để bắt buộc các browser phải phát triển dựa theo chuẩn đó.

Một trong những tính năng nổi bật của ES6 đó là sự bổ sung let và const phục vụ cho việc khai báo biến dữ liệu. Vậy tại sao lại cần tới let và const dù trước đó đã có var để khai báo biến, thì ở bài viết này chúng ta sẽ cùng tìm hiểu lý do của từng kiểu khai báo biến. Từ đó bạn có thể biết được khi nào nên dùng var, let và const.

---

Function-scope và Block-scope

Trong JavaScript có 2 loại scope: function-scope và block-scope.

Function-scope

function myFn() {
  var foo = 'peekaboo!';
  
  console.log(foo); // 'peekaboo!'
}

console.log(foo); // ReferenceError: foo is not definedCode language: JavaScript (javascript)

Nếu sử dụng var thì phạm vi trong các biến sẽ có bị giới hạn trong function. Khi bạn gọi các biến này ở ngoài function sẽ nhận được thông báo lỗi như trên

Block-scope

if (true) {
  var foo = 'peekaboo!';
  let bar = 'i see u';
  const baz = 'baby blue!';

  console.log(foo); // 'peekaboo!';
  console.log(bar); // 'i see u';
  console.log(baz); // 'baby blue!';
}

console.log(foo); // 'peekaboo!';
console.log(bar); // ReferenceError: bar is not defined
console.log(baz); // ReferenceError: baz is not definedCode language: JavaScript (javascript)

foo không bị giới hạn bởi if-statement block. Tuy nhiên bar và baz thì bị giới hạn bới block

Đó chính là sự khác biệt giữa let, const và var

Một block là đoạn code nằm trong dấu {} trong JavaScript.

---

var

Có nhiều khác giữa var và let / const, vì vậy hãy cùng khám phá một vài đoạn code để hiểu rõ hơn về chúng.

var outside of a for-loop

// for-loop
for (var i = 0; i < 3; i++) {
  console.log(i);
}

console.log(i);

// 0
// 1
// 2
// 3Code language: JavaScript (javascript)

Biến i có thể truy cập bên ngoài vòng lặp for. Điều này được mong đợi vì các biến được xác định bằng var không thể truy cập được bên ngoài hàm.

Redefining var

var bạn có thể thay đổi giá trị của biến đó

function myFn() {
  var foo = 1;
  foo = 30;
  var foo = 101;

  console.log(foo);  
}

myFn();

// 101Code language: JavaScript (javascript)

---

let

let outside of a for-loop

// for-loop
for (let i = 0; i < 3; i++) {
  console.log(i);
}

console.log(i);

// 0
// 1
// 2
// ReferenceError: i is not definedCode language: JavaScript (javascript)

Redefining let

let cũng có thể thay đổi giá trị của biến nhưng cú pháp nó nghiêm ngặt hơn var

function myFn() {
  let foo = 1;
  foo = 30;
  // let foo = 101;    //  can't use "let" keyword again
  foo = 101;

  console.log(foo);  
}

myFn();

console.log(foo);  

// 101
// ReferenceError: foo is not definedCode language: JavaScript (javascript)

---

const

Từ khóa const là viết tắt của từ constant. Nó cũng giống như let, nhưng tuy nhiên là const không thể reasign giá trị

const myBoolean = true;

if (myBoolean) {
  const turtles = [
    'leonardo',
    'donatello',
    'michaelangelo',
    'raphael'
  ];
  // turtles = turtles.concat('Shredder');  //  this would throw an error

  console.log(turtles);
}

console.log(turtles); 

// ['leonardo', 'donatello', 'michaelangelo', 'raphael']
// ReferenceError: turtles is not definedCode language: JavaScript (javascript)

---

Tổng kết

Keyword	Function vs Block-scope	Redefinable?
var	function-scope	✅
let	block-scope	✅
const	block-scope	🚫

Nói chung, nếu bạn cần tạo một biến, sử dụng const. Tuy nhiên, nếu bạn biết hoặc nghĩ rằng bạn sẽ cần gán lại nó (vòng lặp for, câu lệnh chuyển đổi, hoán đổi thuật toán) hãy sử dụng let.

Nguồn:

https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/

https://ui.dev/var-let-const/

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.