Variable Javascript Là Gì Và Cách Sử Dụng Biến Trong Javascript

Hôm nay bạn hãy cùng mình sẽ đi tìm hiểu cách khai bảo, sử dụng biến của ngôn ngữ lập trình Javascript trong trang web nhé.

Biến(variable) là nơi để bạn có thể lưu trữ thông tin. Ví dụ trong thực tế bạn có trang web kinh doanh hàng online thì thông tin có thể lưu trữ là giá sản phẩm, mã sản phẩm, thông tin người mua hàng... Để tạo một biến trong Javascript thì ta có thể sử dụng ba cách khai báo sau:

• let: Cách khai báo thông dụng cho javascript hiện tại.
• var: Một kiểu thông báo cũ trong javascript (Mình sẽ nói rõ hơn về những điều khác biệt giữa var và let ở các chapter sau nhé!)
• const: Giống như cách khai báo let nhưng giá trị không thể thay đổi được

Bây giờ chúng ta sẽ đi vào cách khai báo biến bằng let và lưu trữ thông tin cho biến nhé:

Bước đầu tiên là ta sẽ xác định tên biến bằng đoạn code sau đây:

let thong_Bao;

Sau đó chúng ta sẽ gán giá trị cho nó bằng dấu =:

let thong_Bao;
 thong_Bao = 'Xin Chào';// Lưu trữ chuỗi xin chào trong biến thong_Bao

Để dễ hình dung mình có vẽ một hình minh họa mong nó sẽ giúp bạn phần nào hiểu về biến hơn:

Bây giờ chúng ta thử dùng hàm console.log() để hiển thị giá trị thông qua tên biến ở code bên dưới nhé:

let thong_Bao;
thong_Bao = 'Xin Chào';// Lưu trữ chuỗi xin chào trong biến thong_Bao
console.log(thong_Bao);

Kết quả của đoạn code trên bạn xem bên dưới nhé:

Bạn có thể thấy việc khai báo biến hơi phức tạp nên javascript cho phép chúng ta gộm hai bước khai báo tên biến và gán giá trị thành một. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé

let thong_Bao = 'Xin Chào';
console.log(thong_Bao)

Vậy đối với với việc khai báo nhiều biến thì bạn có thể dùng cách như sau nhé:

let thong_Bao = 'Xin Chào', ngon_ngu = 'Tiếng Việt', quoc_tich = 'Viet Nam';

Đối với số lượng biến quá nhiều thì để cho việc đọc code dễ hơn thì bạn nên sử dụng như sau nhé:

let thong_Bao = 'Xin Chào';
let ngon_ngu = 'Tiếng Việt';
let quoc_tich = 'Viet Nam';

Trong Javascript thì chúng ta có thể thay đổi giá trị của biến khi nào chúng ta muốn nhưng đối với khai báo cost thì không được nha. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

 let thong_Bao;
 thong_Bao = 'Xin Chào';
 thong_Bao = 'Hello World';
 console.log(thong_Bao);

Theo bạn nghĩ nó sẽ là hiện ra chữ Xin Chào hay Hello World trong console của trình duyệt? Trước khi đi vào xem kết quả mình có vẽ một hình minh họa mong rằng nó sẽ giúp bạn hiểu rõ hơn:

Khi chúng ta gán giá trị mới thì giá trị cũ bên trong biến sẽ mất đi. Và bây giờ hãy cùng mình xem kết quả nhé:

Chúng ta cũng có thể sao chép giá trị của biến này sang cho biến khác bằng đoạn code sau nhé:

     let thong_Bao = 'Xin Chào';
     let thong_Diep;
    /*Sao chép dữ liệu từ biến thong_Bao sang biến thong_Diep*/
     thong_Diep = thong_Bao;
    /*Bây giờ ta thử gọi hai hàm và xem thử kết quả nhé*/
     console.log(thong_Diep);
     console.log(thong_Bao);

Đây là hình ảnh kết quả bạn xem ở bên dưới nhé:

Bây giờ ta sẽ đi vào xác định cách khai báo biến bằng const ở bên dưới đây nhé:

 const pi = 3.14159265359;

Tiếp theo chúng ta thử thay đối giá trị của biến pi bằng đoạn code sau đây nhé:

 const pi = 3.14159265359;
 pi = 4;
 console.log(pi);

Và bạn xem kết quả ở bên dưới nhé:

Khi đặt tên biến bạn phải chú ý vấn đề sau đây nhé:

• Từ đầu tiên trong tên biến thì phải là chữ (a-z, hoặc A-Z), dấu $ hay dấu gạch dưới (_).
• Từ các từ tiếp theo trở đi thì có thể là chữ (a-z, A-Z), số (0,9), dấu gạch dưới(_)...
• Bạn không thể đặt tên các biến trùng với từ khóa (keyword) mà đã được Javascript sử dụng. Bạn có thể xem bảng danh sách các từ khóa Javascript bên dưới nhé:

  break	export	super
  case	extends	switch
  catch	finally	typeof
  class	for	this
  const	function	throw
  continue	if	try
  debugger	import	var
  default	in	void
  delete	instanceof	while
  do	new	with
  else	return	yield

Khi tên biến của bạn có chứa nhiều từ thì chúng ta nên sử dụng camelCase để dễ dàng hơn trong việc đọc biến. Để hiểu rõ hơn về camelCase thì bạn xem thêm ở đây nhé: Camel Case. Để hiểu hơn hãy cùng mình xem đoạn code dưới đây nhé:

 let thongBaoNguoiDung;

Một số trường hợp bạn đặt tên sẽ gây ra lỗi như hai ví dụ ở dưới đây:

 let 2hello; /* không thể bắt đầu bằng số*/
 let thong-bao; // Dấu '-' không được phép trong tên biến

Nhiều khi bạn có quá nhiều biến thì thường xảy ra hai lỗi sau đây là : biến không xác định và biến chưa được khai báo. Biến không xác định là một biến đã được khai báo nhưng chưa gán giá trị xác định cho nó. Biến chưa khai báo bạn có thể hiểu là nó không có trong đoạn code của bạn. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

 let thongBao;
 /*Biến không xác định*/
 console.log(thongBao); /* undefined */
 /*Biến chưa được khai báo*/
 console.log(thongDiep); /* ReferenceError: thongDiep is not defined */

Thật sự khi đặt tên biến đa số mọi người thường lấy một tên ví dụ đại khái để đặt tên cho biến. Điều này sẽ rất nguy hiểm khi lập trình viên mới hay kể cả bạn sau một thời gian quay lại đọc code thì sẽ rất khó hiểu. Việc đặt tên biến nó không chỉ là dùng để gán giá trị, mà tên của nó cần phải liên quan đến thông tin mà nó lưu trữ.

Có một số nguyên tắc mong có thể giúp bạn đặt được tên biến tốt hơn ở danh sách bên dưới nhé:

• Bạn nên cố gắng đặt tên biến mà người dùng bình thường nhìn vào có thể hiểu được.
• Bạn nên tránh những từ viết tắt khi đặt tên biến ví dụ như bạn không nên sử dụng let tb; để lưu trữ thông tin thông báo.
• Tên biến cần được miêu tả rõ ràng, ngắn gọn.
• Trong thực tế làm việc nhóm thì bạn nên tạo ra một nguyên tắc chung để đặt tên biến mà những thành viên trong nhóm ai cũng có thể hiểu được.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn hiểu được cách khai báo, sử dụng biến trong ngôn ngữ Javascript và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!