Bài 5. Sử dụng biến JavaScript

bởi | Th6 19, 2022 | Chưa phân loại

Biến là một đại lượng vô cùng quan trọng trong hầu hết các ngôn ngữ lập trình phổ biến hiện nay. Bạn không thể trở thành một kỹ sư lập trình giỏi nếu không có những hiểu biết về biến, vì vậy bạn cần phải hiểu những điều cơ bản về biến trước khi bạn đi sâu vào việc học lập trình và lập trình ứng dụng. Trong bài học này Wecode sẽ cùng bạn tìm hiểu về biến để giúp bạn bắt đầu học lập trình Javascript hay bất kể một ngôn ngữ lập trình nào đó một cách dễ dàng hơn.

Biến là gì?

Trong lập trình, biến hay còn gọi là đại lượng vô hướng là một vị trí lưu trữ gắn liền với một tên tượng trưng liên quan, chứa một số lượng thông tin (được gọi là giá trị).

Giống như nhiều ngôn ngữ lập trình khác, trong ngôn ngữ lập trình JavaScript chúng ta cũng có các biến. Các biến có thể được coi là các vùng chứa thông tin (lưu trữ các giá trị) được đặt tên tượng trưng.

Trong ví dụ này x, y và z, là các biến, được khai báo bằng từ khóa var:

var x = 5;
var y = 6;
var z = x + y;

Biến JavaScrip được lưu ở đâu.

Các biến JavaScript được lưu trữ trong bộ nhớ của browser process ( tiến trình trình duyệt) hiểu nôm na 1 cách đơn giản là biến được lưu trong phần Ram mà trình duyệt đang sử dụng.

Khai báo biến

Chúng ta có 4 cách để khai báo biên, bằng cách sử dụng từ khóa const, let, var hoặc không sử dụng 3 từ khóa đó. Hãy thử các ví dụ sau đây để hiểu hơn về cách khai báo biến.

Ví dụ 1: Trong ví dụ này x, y và z, là các biến, được khai báo bằng từ khóa var:

<!DOCTYPE html>
<html>
<body>
<h1>Biến trong javascript</h1>
<p>Trong ví dụ này x, y và z là các biến được khai báo bằng từ khóa var.</p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.write("Gia trị của z ="+z);
</script>
</body>
</html>

Ví dụ 2: Trong ví dụ này x, y và z, là các biến, được khai báo bằng từ khóa let:

<!DOCTYPE html>
<html>
<body>
<h1>Biến trong javascript</h1>
<p>Trong ví dụ này x, y và z là các biến được khai báo bằng từ khóa var.</p>
<script>
let x = 5;
let y = 6;
let z = x + y;
document.write("Gia trị của z ="+z);
</script>
</body>
</html>

Ví dụ 3: Trong ví dụ dưới đây x, y và z là các biến được khai báo không sử dụng từ khóa.

<!DOCTYPE html>
<html>
<body>
<h1>Biến trong javascript</h1>
<p>Trong ví dụ này x, y và z là các biến được khai báo bằng từ khóa let.</p>
<script>
x = 5;
y = 6;
z = x + y;
document.write("Gia trị của z ="+z);
</script>
</body>
</html>

Ví dụ 4: Trong ví dụ dưới đây x, y và z là các biến được khai báo bằng từ khóa const

<!DOCTYPE html>
<html>
<body>
<h1>Biến trong javascript</h1>
<p>Trong ví dụ này x, y và z là các biến được khai báo bằng từ khóa const.</p>
<script>
const x = 5;
const y = 6;
const z = x + y;
document.write("Gia trị của z ="+z);
</script>
</body>
</html>

Từ tất cả các ví dụ trên, bạn dễ dàng nhận ra:

  • x lưu trữ giá trị 5
  • y lưu trữ giá trị 6
  • z lưu trữ giá trị 11

Tuy nhiên ở Ví dụ 4 nếu chúng ta thêm vào phía sau câu lệnh const z=x+y một câu lệnh z=z+5 thì chúng ta sẽ thấy có sự khác biệt so với các ví dụ 1,2,3. Các bạn thử dự đoán kết quả trước khi chạy thử đoạn ví dụ đầy đủ sau nhé.

Ví dụ 5: thêm câu lệnh z=z+5 vào phía dưới câu lệnh const z=x+y 

<!DOCTYPE html>
<html>
<body>
<h1>Biến trong javascript</h1>
<p>Trong ví dụ này x, y và z là các biến được khai báo bằng từ khóa const.</p>
<script>
const x = 5;
const y = 6;
const z = x + y;
z=z+5;
document.write("Gia trị của z ="+z);
</script>
</body>
</html>

Như vậy, đúng như một số bạn dự đoán, sau khi chạy thử ví dụ 5 này các bạn sẽ không thấy trình duyệt in giá trị của z, điều này do ảnh hưởng của câu lệnh chúng ta vừa thêm vào z=z+5; Chúng ta cùng tìm hiểu lý do tại sao lại như thế nhé.

Khi nào thì sử dụng sử dụng var, let và const để khai báo biến

Cac biến của chúng ta nên luôn được khai báo bằng các từ khóa var, let, và const

  • Từ  khóa var được sử dụng trong tất cả các mã JavaScript từ 1995 đến 2015.
  • Từ khóa let và const đã được thêm vào JavaScript các phiên bản từ năm 2015.
  • Nếu bạn muốn mã của mình chạy trong trình duyệt cũ hơn, bạn phải sử dụng var

Ngoài ra, quan trọng hơn:

  • Từ khóa const được sử dụng để khai báo 1 hằng số, và giá trị của nó không thay đổi trong suốt chương trình.
  • Từ khóa let khai báo biến chỉ có thể truy cập được trong phạm vi nó được khai báo ví dụ như trong cặp {}
  • Từ khóa var khai báo biến có thể truy cập ở phạm vi hàm số hoặc bên ngoài hàm số, toàn cục.

Đặt tên biến trong JavaScript

Tất cả các biến JavaScript phải được xác định bằng các tên duy nhất .

Những tên riêng này được gọi là định danh .

Tên biến có thể đặt ngắn như x, y, z hoặc dài như sum, year, countall…

Các quy tắc chung để xây dựng tên cho các biến là:

  • Tên có thể chứa các chữ cái, chữ số, dấu gạch dưới và ký hiệu đô la.
  • Tên phải bắt đầu bằng một chữ cái
  • Tên cũng có thể bắt đầu bằng $ và _ (nhưng Wecode sẽ không sử dụng nó trong hướng dẫn này)
  • Tên phân biệt chữ hoa chữ thường (y và Y là các biến khác nhau)
  • Các từ dành riêng (như từ khóa JavaScript) không được dùng để đặt tên cho biến

Lưu ý quan trọng: Mã định danh (tên) trong JavaScript phân biệt chữ hoa chữ thường.

Kiểu dữ liệu của biến

Khi khai báo biến ta không cần phải khai báo kiểu của biến đó trước khi dùng. Kiểu sẽ được tự động xác định trong lúc chương trình được thực thi. Điều đó cũng có nghĩa là một biến có thể chứa giá trị của các kiểu dữ liệu khác nhau.

var Number = 123 ; // Number là một số
var Chuoi = "variable of js "; //Chuoi là một chuỗi
var Logic = true;  // Logic là một boolean

Theo tiêu chuẩn ECMAScript xác định bảy kiểu dữ liệu như sau :

  • Kiểu boolean
  • Kiểu null
  • Kiểu undefined
  • Kiểu số
  • Kiểu chuỗi
  • Kiểu Symbol (mới trong ECMAScript 6)
  • Kiểu đối tượng

Phạm vi của biến

Biến trong javascript có 2 loại đó là: biến cục bộ (local scope) và biến toàn cục (global scope). Biến toàn cục được khai báo ngoài hàm , trong khi đó biến cục bộ được khai báo bên trong một hàm hoặc 1 phạm vi nào đó (ví dụ một khối lệnh). Nên với cùng một tên biến, ta có thể khai báo ở những hàm khác nhau.

Một biến toàn cục có thể được truy cập từ bên ngoài của hàm cũng như bên trong của hàm nhưng, một biến cục bộ chỉ có thể được truy cập bên trong phạm vi khai báo. Nếu truy cập từ bên ngoài phạm vi khai báo, bạn có thể sẽ nhận được lỗi ‘undefined variable’ (biến không xác định).

var foo = 50;  //<= biến toàn cục 
function test() {
        var bar = 100; //<= biến cục bộ
}

Đây là những kiến thức cơ bản về biến trong javascript, hy vọng nó sẽ giúp bạn tự tin bắt đầu thực hiện các bài toán cũng như tự tin học javascript hơn. Chúc bạn thành công.