Tại sao không nên dùng var để khai báo trong Javascript

Như các bạn có thể đã biết, Javascript có 3 cách để khai báo biến đó là dùng var, let, const. Thực tế, các lập trình viên Javascript chỉ sử dụng let và const mà bỏ qua thằng var này. Các bạn có biết tại sao không? cùng đọc bài viết này nhé.

Để dễ hình dung hơn các bạn có thể xem video trên, còn không thì… Let’s gooo

Câu chuyện của Var? 🥸

Trước khi ES6 ra đời, thì javascript chỉ có 1 kiểu đó là dùng var để khai báo. Chính vì chỉ có 1 kiểu như vậy nên nó được thiết kế có thể sử dụng rất đa năng.

Var giống như kiểu chàng trai badboy vậy, còn các newbie JS là các “cô nàng” luôn say đắm các anh chàng badboy trong thời gian đầu =)). Sau này lớn dần thì các “cô nàng” thích các anh goodboy, ngoan hiền, chung thủy với mình. Và các anh chàng goodboy đó là let và const.

Tại sao phải từ bỏ chàng badboy này 🧐

Đầu tiên phải kể đến đó là biến có thể bị khai báo đè. Khi bạn khai báo 2 biến trùng tên nhau, thì biến khai báo sau sẽ ghi đè lên biến trước.

var counter = 0;
console.log(counter) // 0
var counter = 10;
console.log(counter) // 10

Nhìn qua thì tưởng bình thường nhưng thực tế thì nó rất nguy hiểm. Giả sử bạn dùng module ngoài hay thư viện nào đó. Bạn dùng var và vô tình khai báo đè các biến trong module đó và làm nó trở nên hoạt động không đúng cách.

Tiếp theo đó là phạm vi sử dụng (scope) rất rộng. Các biến được truy cập bất cứ đâu trong 1 phạm vi là một hàm function.

function main() {
 // có thể dùng biến ở đây
  if (true) {
	var number = 10;
     // có thể sử dụng ở trong này
  }
  // và cả dưới này nữa
}

Nhận thấy vấn đề, JS mới ra mắt 2 kiểu khai báo khác đó là let và const.

Goodboy được sinh ra, let và const ra đời 🤩

Với let thì chỉ giống var đúng 1 điều, chính là có thể gán lại biến khi nằm trong phạm vi sử dụng (scope) của nó.

var number = 10;
number = 20;
console.log(number) // 20
// let cũng có thể gán lại biến tương tự như var
let num = 10;
num = 20;
console.log(num) // 20

Còn lại let khác hoàn toàn về các mặt còn lại. let không thể khai báo đè, và phạm vi của let là 1 block.

function main() {
  // biến num không dùng được ngoài này
  if (true) {
    let num = 10; // biến num được khai báo bên trong block {}
    let num = 20; // SyntaxError: Identifier 'num' has already been declared
  }
  // biến num k dùng được ở ngoài này
}

Còn khai báo bằng const thì sao? Nó giống y hệt let, trừ điểm duy nhất là không thể thay đổi giá trị biến trong vùng phạm vi (scope) của nó.

const string = 'hello Jonah'
string = 'Go dev...'
// TypeError: Assignment to constant variable.

Và đó là lý do các bạn nên bỏ var và sử dụng let và const để thay thế. Hi vọng bài viết hữu ích đến với bạn 🥰🥰.