[Javascript] – Phần 7: Biến trong Javascript | StackLab.VN – Học Linux, DevOps, Ảo hóa & Storage từ A-Z

Biến là một khái niệm quan trọng trong lập trình JavaScript. Chúng được sử dụng để lưu trữ và quản lý dữ liệu. Trong JavaScript, bạn có thể khai báo biến bằng cách sử dụng các từ khóa đặc biệt như var, let, hoặc const, sau đó gán giá trị cho biến bằng toán tử =.

Biến có thể lưu trữ các loại dữ liệu khác nhau, bao gồm số, chuỗi văn bản, mảng và đối tượng. Có 4 cách để khai báo biến trong JavaScript:
- Tự động (Automatically)
- Sử dụng var
- Sử dụng let
- Sử dụng const

Ví dụ.

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

Ví dụ với HTML.

<html>
  <body>
    <p id="demo"></p>
    <script>
    x = 5;
    y = 6;
    z = x + y;
    document.getElementById("demo").innerHTML =
    "The value of z is: " + z;
    </script>
  </body>
</html>

Kết quả.

The value of z is: 11

Một quy tắc lập trình tốt là luôn luôn khai báo biến trước khi sử dụng.

Trong ví dụ dưới đây, chúng ta sử dụng var để khai báo biến:

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

Ví dụ với HTML.

<html>
  <body>
    <p id="demo"></p>
    <script>
    var x = 5;
    var y = 6;
    var z = x + y;
    document.getElementById("demo").innerHTML =
    "The value of z is: " + z;
    </script>
  </body>
</html>

Kết quả.

The value of z is: 11

Lưu ý:

Khai báo biến với var đã được sử dụng trong JavaScript từ năm 1995 đến 2015 và nó chỉ nên được sử dụng viết cho các trình duyệt cũ hơn.
Khai báo biến với let và const được thêm vào JavaScript vào năm 2015.

Chúng ta cũng có thể sử dụng let và const để khai báo biến:

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

Ví dụ với HTML.

<html>
  <body>
    <p id="demo"></p>
    <script>
    const x = 5;
    const y = 6;
    const z = x + y;
    document.getElementById("demo").innerHTML =
    "The value of z is: " + z;
    </script>
  </body>
</html>

Kết quả.

The value of z is: 11

Ví dụ về kết hợp của toán tử:

const price1 = 5;
const price2 = 6;
let total = price1 + price2;

Ví dụ với HTML.

<html>
  <body>
    <p id="demo"></p>
    <script>
    const price1 = 5;
    const price2 = 6;
    let total = price1 + price2;
    document.getElementById("demo").innerHTML =
    "The total is: " + total;
    </script>
  </body>
</html>

Kết quả.

The total is: 11

Hai biến price1 và price2 được khai báo bằng const, đây là giá trị hằng và không thể thay đổi. Biến total được khai báo bằng let, có thể thay đổi giá trị.

Khi Nào Sử Dụng var, let, hoặc const?

Luôn luôn sử dụng const nếu giá trị không nên thay đổi và dữ liệu không nên thay đổi áp dụng cho mảng và đối tượng.
Chỉ sử dụng let khi không thể sử dụng const.
Chỉ sử dụng var nếu bạn phải hỗ trợ các trình duyệt cũ hơn.

Nhận dạng biến trong JavaScript

Tất cả các biến JavaScript phải được xác định bằng tên duy nhất. Biến có thể là tên ngắn (như x và y) hoặc tên mô tả hơn (như age, sum, totalVolume).

Các quy tắc chung để xây dựng tên biến:
- Tên có thể chứa chữ cái, số, gạch dưới và dấ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 chúng ta 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à hai biến khác nhau).
- Các từ khóa đặc biệt của JavaScript không thể sử dụng làm tên biến.

Toán tử bằng (=).

Toán tử = được sử dụng để gán giá trị cho biến và nó không có nghĩa là so sánh bằng. Để so sánh giá trị bạn sử dụng toán tử == hoặc ===.

== (so sánh giá trị): So sánh giá trị của hai biểu thức và trả về true nếu chúng có cùng giá trị.
=== (so sánh giá trị và kiểu dữ liệu): So sánh giá trị và kiểu dữ liệu của hai biểu thức và trả về true nếu chúng có cùng giá trị và kiểu dữ liệu.

Ví dụ:

let x = 5;
let y = "5";

console.log(x == y); // true, vì x và y có cùng giá trị (5)
console.log(x === y); // false, vì x và y có giá trị giống nhau nhưng kiểu dữ liệu khác nhau (number và string)

Loại dữ liệu trong JavaScript.

Biến JavaScript có thể là số như 100 hoặc giá trị văn bản như “John Doe.”. Giá trị văn bản được gọi là chuỗi.

JavaScript có thể xử lý nhiều loại dữ liệu, dưới đây hãy xem xét số và chuỗi.
- Chuỗi văn bản được viết trong dấu nháy đôi hoặc nháy đơn.
- Số được viết mà không có dấu nháy.

Nếu bạn đặt một số trong dấu nháy, nó sẽ được coi là chuỗi văn bản.

<html>
  <body>
    <p id="demo"></p>
    <script>
    const pi = 3.14;
    let person = "John Doe";
    let answer = 'Yes I am!';
    var number_to_string = '100'
    document.getElementById("demo").innerHTML =
    pi + "<br>" + person + "<br>" + answer + "<br>" + number_to_string;
    </script>
  </body>
</html>

Kết quả.

3.14
John Doe
Yes I am!
100

Khai báo biến trong JavaScript.

Nếu bạn khai báo một biến mà không gán giá trị cho nó, biến đó sẽ có giá trị mặc định là undefined. Điều này áp dụng cho cả biến được khai báo bằng var và let. Trong cả hai trường hợp trên, biến carName và anotherCarName đã được khai báo nhưng chưa được gán giá trị, do đó chúng có giá trị mặc định là undefined.

var carName;
console.log(carName); // Kết quả: undefined

let anotherCarName;
console.log(anotherCarName); // Kết quả: undefined

Trong JavaScript, việc khai báo biến có thể được thực hiện bằng cách sử dụng var hoặc let.

Ví dụ:

carName = "Volvo";
let carName = "Volvo";

Có sự khác biệt quan trọng giữa chúng:

carName = "Volvo";: Trong trường hợp này, bạn đang gán giá trị “Volvo” cho biến carName mà không cần khai báo biến trước đó. JavaScript tự động tạo biến carName nếu nó chưa tồn tại. Tuy nhiên, việc này tạo ra một biến toàn cục, nghĩa là biến carName có thể truy cập từ bất kỳ đâu trong code JavaScript và có thể gây ra sự xung đột hoặc làm cho code của bạn trở nên khó kiểm soát.
let carName = "Volvo";: Trong trường hợp này, bạn đang tạo một biến cục bộ tên là carName và gán giá trị “Volvo” cho nó. Biến này chỉ có thể truy cập từ bên trong phạm vi nơi nó được khai báo (ví dụ: bên trong một hàm hoặc khối code cụ thể). Việc sử dụng let giúp hạn chế phạm vi của biến và làm cho đoạn code JavaScript này dễ quản lý hơn.

Trong nhiều trường hợp, việc sử dụng let (hoặc const nếu bạn không cần thay đổi giá trị của biến sau khi khai báo) được ưa chuộng hơn varđể tạo các biến cục bộ có phạm vi hạn chế, giúp tránh sự xung đột.

Trong ví dụ dưới đây, chúng ta sẽ tạo ra một phần tử HTML có id="demo" và sau đó sử dụng JavaScript để thay đổi nội dung của phần tử này.

<html>
  <body>
    <p id="dem"></p>
    <script>
    let carName = "Volvo";
    document.getElementById("dem").innerHTML = carName;
    </script>
  </body>
</html>

Dưới đây là cách hoạt động của code:

<p id="demo"></p>: Đây là một phần tử HTML <p> (đoạn văn bản đoạn) mà bạn đã đặt một id là “demo”. Điều này cho phép bạn tham chiếu đến phần tử này bằng JavaScript để thay đổi nội dung của nó.
<script>: Đây là một phần tử <script> trong HTML, được sử dụng để nhúng code JavaScript vào trang web của bạn.
let carName = "Volvo";: Đây là khai báo biến JavaScript sử dụng từ khóa let. Bạn đang tạo một biến có tên là carName và gán giá trị “Volvo” cho nó. Biến này được khai báo bên trong phạm vi code JavaScript và có thể sử dụng bên trong đoạn code này.
document.getElementById("demo").innerHTML = carName;: Dòng này sử dụng JavaScript để tìm phần tử HTML có id="demo" bằng cách sử dụng hàm getElementById(). Sau đó, nó thay đổi nội dung của phần tử này bằng cách gán giá trị của biến carName vào thuộc tính innerHTML. Kết quả là đoạn văn bản “Volvo” sẽ xuất hiện bên trong phần tử <p> với id="demo" trên trình duyệt web.

Kết quả.

Volvo

Bạn có thể khai báo nhiều biến trong một dòng.

Khai báo biến 1 dòng, ví dụ bắt đầu lệnh với let và tách các biến bằng dấu phẩy:

let person = "John Doe", carName = "Volvo", price = 200;

Ví dụ với HTML.

<html>
  <body>
    <p id="demo"></p>
    <script>
    let person = "John Doe", carName = "Volvo", price = 200;
    document.getElementById("demo").innerHTML = carName;
    </script>
  </body>
</html>

Kết quả.

Volvo

Một lệnh có thể khai báo trên nhiều dòng:

let person = "John Doe",
carName = "Volvo",
price = 200;

Ví dụ với HTML.

<html>
  <body>
    <p id="demo"></p>
    <script>
    let person = "John Doe",
    carName = "Volvo",
    price = 200;
    document.getElementById("demo").innerHTML = carName;
    </script>
  </body>
</html>

Kết quả.

Volvo

Toán tử trong JavaScript.

Bạn có thể thực hiện phép tính với các biến JavaScript, sử dụng các toán tử như = và +:

<html>
  <body>
    <p id="demo"></p>
    <script>
    let x = 5 + 2 + 3;
    document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

Kết quả.

Bạn cũng có thể cộng chuỗi, nhưng chuỗi sẽ được nối lại:

<html>
  <body>
    <p id="demo"></p>
    <script>
    let x = "John" + " " + "Doe";
    document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

Kết quả.

John Doe

Hãy thử cả hai:

<html>
  <body>
    <p id="demo"></p>
    <script>
    let x = "5" + 2 + 3;
    document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

Kết quả.

Nếu bạn đặt một số trong dấu nháy, các số còn lại sẽ được coi là chuỗi và nối lại.

<html>
  <body>
    <p id="demo"></p>
    <script>
    let x = 2 + 3 + "5";
    document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

Kết quả.

Vì JavaScript coi dấu $ là một ký tự, các biến có $ được xem là hợp lệ:

<html>
  <body>
    <p id="demo"></p>
    <script>
    let $$$ = 2;
    let $myMoney = 5;
    document.getElementById("demo").innerHTML = $$$ + $myMoney;
    </script>
  </body>
</html>

Kết quả.

Sử dụng dấu $ không phổ biến trong JavaScript, nhưng các lập trình viên chuyên nghiệp thường sử dụng nó như một biệt danh cho hàm chính trong một thư viện JavaScript.

Trong thư viện jQuery, ví dụ hàm chính $ được sử dụng để chọn các phần tử HTML. Trong jQuery, $("p") có nghĩa là “chọn tất cả các phần tử p“.

Kết luận.

Biến là một phần quan trọng của lập trình JavaScript, cho phép bạn lưu trữ và thao tác dữ liệu. Khai báo và sử dụng biến đúng cách là kỹ năng quan trọng trong việc phát triển các ứng dụng web. Nắm vững khái niệm về phạm vi của biến sẽ giúp bạn viết code JavaScript hiệu quả hơn và tránh các lỗi không mong muốn.

Hãy tiếp tục học và thực hành để trở thành một lập trình viên JavaScript giỏi hơn.

[Javascript] – Phần 7: Biến trong Javascript

Bài viết gần đây

SQL Injection cho người mới

Các vấn đề liên quan đến asymmetric routing

Minio là gì?

So sánh đồng bộ Active-Active giữa Community và Enterprise trong MinIO

Kỹ năng sử dụng FIO

Related Stories

Leave A Reply Cancel reply

Đăng ký nhận thông tin bài viết qua email