Biến trong Javascript: Hướng dẫn toàn tập về var, let & const

Bắt đầu hành trình lập trình web, chắc hẳn bạn sẽ gặp ngay khái niệm về biến trong JavaScript. Đây là nền tảng cốt lõi nhưng cũng dễ gây nhầm lẫn với ba ‘người bạn’ var, let và const. Đừng lo lắng, bài viết này của WiWeb sẽ giúp bạn tìm hiểu mọi thứ từ A-Z một cách đơn giản và trực quan nhất, để bạn tự tin làm chủ những ‘hộp chứa’ dữ liệu quan trọng này.

Biến trong JavaScript là gì?

Trước khi đi sâu vào kỹ thuật, chúng ta hãy cùng làm quen với khái niệm cơ bản nhất nhé. Hãy tưởng tượng biến trong JavaScript giống như những chiếc hộp có nhãn dán. Bạn có thể đặt bất cứ thứ gì vào trong hộp và dán nhãn cho nó để sau này tìm lại.

Định nghĩa: Biến là ‘hộp chứa’ dữ liệu

Trong lập trình, biến là một cái tên đại diện cho một vùng nhớ trong máy tính. Vùng nhớ này được dùng để lưu trữ dữ liệu, ví dụ như một con số, một dòng chữ, hay một đối tượng phức tạp hơn. Thay vì phải nhớ địa chỉ ô nhớ phức tạp, bạn chỉ cần gọi tên biến là có thể lấy ra hoặc thay đổi dữ liệu bên trong.

Ví dụ, để lưu trữ lời chào, bạn có thể tạo một biến tên là loiChao:

let loiChao = "Xin chào WiWeb!";
console.log(loiChao); // In ra: Xin chào WiWeb!

Ở đây, loiChao là tên biến (nhãn dán), và "Xin chào WiWeb!" là giá trị (thứ bên trong hộp).

Vai trò và tầm quan trọng của biến trong lập trình

Biến là một trong những khái niệm nền tảng nhất của mọi ngôn ngữ lập trình, không chỉ riêng JavaScript. Chúng đóng vai trò cực kỳ quan trọng:

• Lưu trữ thông tin: Biến giúp lưu lại dữ liệu tạm thời để xử lý, từ thông tin người dùng nhập vào đến kết quả của một phép tính.
• Tái sử dụng dữ liệu: Bạn chỉ cần khai báo biến một lần và có thể sử dụng giá trị của nó ở nhiều nơi trong chương trình. Điều này giúp code ngắn gọn và dễ bảo trì.
• Giúp code dễ đọc, dễ hiểu: Đặt tên biến có ý nghĩa (ví dụ: tenNguoiDung thay vì x) sẽ làm cho mã của bạn sáng sủa và dễ hiểu hơn rất nhiều, ngay cả khi người khác đọc vào.

Có mấy cách khai báo biến trong JavaScript?

Trong JavaScript, có ba từ khóa chính để bạn khai báo biến, đó là var, let, và const. Mỗi từ khóa có cách hoạt động và quy tắc riêng. Hãy cùng WiWeb xem qua từng cách nhé.

Khai báo bằng var – Cách truyền thống

var là cách khai báo biến đã tồn tại từ những ngày đầu của JavaScript. Trước khi phiên bản ES6 (ECMAScript 2015) ra đời, đây là cách duy nhất để tạo biến.

var tuoi = 25;
tuoi = 26; // Có thể gán lại giá trị
console.log(tuoi); // In ra: 26

Dù quen thuộc, var có một vài hành vi khá ‘kỳ lạ’ liên quan đến phạm vi và hoisting mà chúng ta sẽ tìm hiểu sâu hơn ở phần sau. Hiện nay, việc sử dụng var đã được hạn chế tối đa trong các dự án hiện đại.

Khai báo bằng let – Giải pháp hiện đại cho biến có thể thay đổi

let được giới thiệu trong ES6 để khắc phục những nhược điểm của var. Khi bạn khai báo một biến với let, bạn có thể gán lại giá trị cho nó sau này. Đây là lựa chọn hoàn hảo khi bạn biết trước giá trị của biến sẽ cần thay đổi trong quá trình chạy chương trình.

let diemSo = 8;
diemSo = 9.5; // Gán lại giá trị mới
console.log(diemSo); // In ra: 9.5

Khai báo bằng const – Dành cho hằng số không đổi

Cũng ra mắt trong ES6, const là viết tắt của ‘constant’, nghĩa là hằng số. Khi bạn khai báo một biến bằng const, bạn phải gán giá trị cho nó ngay lập tức và không thể gán lại một giá trị mới cho nó.

const soPI = 3.14;
// soPI = 3.14159; // Dòng này sẽ gây ra lỗi!
console.log(soPI);

const giúp mã của bạn an toàn hơn bằng cách đảm bảo rằng những giá trị quan trọng không bị vô tình thay đổi. Đây được xem là lựa chọn ưu tiên khi khai báo biến.

So sánh chi tiết var, let và const

Đây chính là phần quan trọng nhất khi tìm hiểu về var let const trong js. Sự khác biệt giữa chúng nằm ở bốn yếu tố cốt lõi: Phạm vi (Scope), Hoisting, Gán lại giá trị, và Khai báo lại.

Phạm vi (Scope): Function Scope và Block Scope khác nhau thế nào?

Phạm vi của biến quyết định nơi bạn có thể truy cập biến đó.

• var có Function Scope: Biến var chỉ có thể được truy cập bên trong hàm (function) mà nó được khai báo. Nếu khai báo bên ngoài hàm, nó trở thành biến toàn cục (global).

  
  function kiemTraVar() {
  if (true) {
  var ten = "WiWeb";
  }
  console.log(ten); // In ra: "WiWeb" - Vẫn truy cập được dù ngoài block if
  }
  kiemTraVar();
  

• let và const có Block Scope: Biến let và const chỉ tồn tại bên trong khối lệnh (block) nơi chúng được định nghĩa. Một khối lệnh là bất cứ thứ gì nằm trong cặp dấu {} như if, for, while.

  
  function kiemTraLet() {
  if (true) {
  let hoDem = "Master";
  console.log(hoDem); // In ra: "Master"
  }
  // console.log(hoDem); // Dòng này sẽ gây lỗi! Vì hoDem không tồn tại ở đây.
  }
  kiemTraLet();
  

  Block scope giúp kiểm soát biến tốt hơn và tránh các lỗi không mong muốn.

Cơ chế Hoisting: Tại sao let và const an toàn hơn var?

Hoisting trong javascript là một cơ chế ngầm định của JavaScript, nó sẽ ‘nhấc’ phần khai báo biến lên đầu phạm vi của chúng trước khi thực thi mã.

• Với var, biến được ‘nhấc’ lên và khởi tạo với giá trị undefined. Điều này cho phép bạn gọi biến trước khi khai báo mà không bị lỗi, chỉ nhận về undefined.

  
  console.log(thongDiep); // In ra: undefined (không báo lỗi)
  var thongDiep = "Hello!";
  

• Với let và const, chúng cũng được ‘nhấc’ lên nhưng không được khởi tạo. Việc truy cập chúng trước khi khai báo sẽ gây ra lỗi ReferenceError. Vùng từ đầu block đến chỗ khai báo được gọi là ‘Temporal Dead Zone’.

  
  // console.log(loiNhan); // Gây lỗi ReferenceError!
  let loiNhan = "Hi there!";
  

  Chính hành vi này làm cho let và const an toàn hơn, vì nó giúp bạn phát hiện lỗi sớm hơn.

Gán lại giá trị (Re-assignment): Khi nào giá trị có thể được cập nhật?

• var và let: Cho phép bạn thay đổi giá trị của biến sau khi khai báo.
• const: Không cho phép gán lại giá trị mới. Biến phải được khởi tạo giá trị khi khai báo và giữ nguyên giá trị đó.

Khai báo lại (Re-declaration): Từ khóa nào cho phép khai báo trùng tên?

• var: Cho phép bạn khai báo lại một biến đã tồn tại trong cùng một phạm vi mà không gây ra lỗi.

  
  var nguoiDung = "Alice";
  var nguoiDung = "Bob"; // Hoàn toàn hợp lệ
  console.log(nguoiDung); // In ra: "Bob"
  

• let và const: Không cho phép khai báo lại biến trong cùng một phạm vi. Điều này giúp ngăn chặn các lỗi do vô tình đặt trùng tên biến.

  
  let user = "Charlie";
  // let user = "David"; // Dòng này sẽ gây lỗi SyntaxError
  

Bảng tóm tắt so sánh nhanh var vs let vs const

Khi nào nên sử dụng const, let hay var?

Với những sự khác biệt trên, việc lựa chọn từ khóa phù hợp trở nên rất rõ ràng. Dưới đây là quy tắc vàng mà WiWeb khuyên bạn nên tuân theo trong các dự án JavaScript hiện đại.

Ưu tiên const theo mặc định

Hãy luôn bắt đầu bằng const. Điều này tạo ra một thói quen tốt, giúp bạn viết mã an toàn và dễ dự đoán hơn. Khi bạn khai báo một biến bằng const, bạn đang gửi đi một thông điệp rõ ràng rằng giá trị này không nên thay đổi. Điều này làm giảm đáng kể khả năng xảy ra lỗi do gán lại giá trị không mong muốn.

Sử dụng const cho:

• Các hàm
• Các đối tượng (objects) và mảng (arrays) mà bạn không có ý định gán lại toàn bộ.
• Các giá trị cố định như hằng số toán học, cấu hình.

Sử dụng let khi cần gán lại giá trị

Chỉ chuyển sang sử dụng let khi bạn chắc chắn rằng giá trị của biến đó cần phải thay đổi. Các trường hợp phổ biến bao gồm:

• Biến đếm trong vòng lặp (ví dụ: for (let i = 0; ...)).
• Biến dùng để lưu trạng thái có thể thay đổi, ví dụ như giá trị của một phép tính tổng.

let tong = 0;
for (let i = 1; i <= 5; i++) {
  tong = tong + i; // Giá trị của 'tong' thay đổi liên tục
}
console.log(tong); // In ra: 15

Tại sao nên hạn chế tối đa việc sử dụng var?

Trong lập trình JavaScript hiện đại, bạn nên tránh sử dụng var. Các hành vi khó lường về phạm vi của biến (function scope) và hoisting của var là nguồn gốc của nhiều lỗi khó tìm. let và const được tạo ra chính là để giải quyết những vấn đề này. Việc sử dụng chúng sẽ giúp mã của bạn sạch sẽ, dễ hiểu và ít lỗi hơn rất nhiều.

Quy tắc và quy ước đặt tên biến trong JavaScript

Việc đặt tên biến không chỉ là để chương trình chạy được, mà còn để con người có thể đọc và hiểu được mã. Tuân thủ các quy tắc và quy ước sẽ giúp bạn trở thành một lập trình viên chuyên nghiệp hơn.

Các quy tắc bắt buộc

Đây là những quy tắc bạn phải tuân theo, nếu không chương trình sẽ báo lỗi:

• Tên biến phải bắt đầu bằng một chữ cái (a-z, A-Z), dấu gạch dưới _, hoặc ký hiệu đô la $. Tên biến không được bắt đầu bằng số.
• Sau ký tự đầu tiên, tên biến có thể chứa chữ cái, số, dấu gạch dưới.
• Tên biến có phân biệt chữ hoa và chữ thường. userName và username là hai biến hoàn toàn khác nhau.
• Tên biến không được trùng với các từ khóa dành riêng của JavaScript (ví dụ: let, const, function, if…).

Các quy ước phổ biến giúp code dễ đọc (camelCase)

Đây không phải là quy tắc bắt buộc nhưng là quy ước được cộng đồng JavaScript sử dụng rộng rãi để đảm bảo tính nhất quán và dễ đọc:

• Sử dụng camelCase: Với những tên biến có nhiều từ, hãy viết thường từ đầu tiên và viết hoa chữ cái đầu của các từ tiếp theo. Cách này dễ đọc và rất phổ biến.
  • Nên: firstName, userProfileImage, totalAmount.
  • Không nên: firstname, UserProfileImage, total_amount.
• Đặt tên có ý nghĩa: Tên biến nên mô tả rõ ràng dữ liệu mà nó chứa. Tránh các tên chung chung như a, b, x, data trừ khi trong các ngữ cảnh rất rõ ràng (như biến đếm i trong vòng lặp).
  • Tốt: customerName, productPrice.
  • Chưa tốt: cn, price.

Lời kết

Vậy là chúng ta đã cùng nhau đi qua một hành trình chi tiết về biến trong JavaScript. Hiểu rõ var, let và const là một kỹ năng nền tảng cực kỳ quan trọng giúp bạn viết mã tốt hơn.

Để giúp bạn dễ nhớ hơn, WiWeb đã tổng hợp lại những ý chính:

• Biến là những chiếc hộp để lưu trữ dữ liệu trong chương trình.
• Luôn ưu tiên dùng const để đảm bảo tính bất biến và an toàn.
• Chỉ dùng let khi bạn biết chắc chắn giá trị của biến sẽ thay đổi.
• Tránh hoàn toàn việc sử dụng var trong các dự án mới để không gặp phải những lỗi khó chịu về scope và hoisting.
• Luôn tuân thủ quy ước đặt tên biến camelCase để mã của bạn chuyên nghiệp và dễ đọc.

Cách tốt nhất để học lập trình là thực hành. Bạn hãy thử mở trình duyệt, bật công cụ Developer Tools (F12), và tự mình khai báo các biến với var, let, const. Hãy thử nghiệm với các phạm vi khác nhau, kiểm tra hoisting và xem các lỗi xảy ra. Việc tự tay gõ code sẽ giúp bạn nhớ kiến thức lâu hơn rất nhiều.

Bạn còn thắc mắc nào về biến trong JavaScript không? Hãy để lại bình luận bên dưới, WiWeb sẽ giải đáp giúp bạn nhé!

Nếu bạn cần một website chuyên nghiệp để phát triển thương hiệu, WiWeb luôn sẵn sàng tư vấn. Liên hệ với chúng tôi nhé!