Biến trong JavaScript

Biến trong JavaScript
Biến trong JavaScript

Biến trong JavaScript là gì?

Biến trong JavaScript là một vùng nhớ có tên dùng để lưu trữ các giá trị của một chuỗi, số, đối tượng, boolean,... biến đó có nhiều loại và cũng có nhiều phạm vi hoạt động.

Cú pháp tạo Biến trong JavaScript

tukhoa tenbien =  giatridulieu;

tukhoa: Từ khóa.

tenbien: Tên biến.

giatridulieu: Giá trị dữ liệu như: số, chuỗi, boolean hoặc đối tượng,...

Quy tắc đặt tên Biến trong JavaScript

- Ký tự đầu tiên của tên biến phải là chữ cái thường hoặc chữ cái hoa hoặc dấu gạch dưới _

- Ký tự đầu tiên của tên biến không để số.

- Tên biến không được để ký tự đặc biệt và không có khoảng trắng.

Khai báo biến với các giá trị dữ liệu trong JavaScript

Các giá trị dữ liệu như: số, chuỗi, boolean hoặc đối tượng,...

<script>
document.write("Biến số: ");
var bienso = 35;
document.write(bienso+"<br>");

document.write("Biến số thực: ");
var biensothuc = 35.6;
document.write(biensothuc+"<br>");

document.write("Biến chuỗi (String): ");
var bienstring = "Web Mới";
document.write(bienstring+"<br>");

document.write("Biến boolean: ");
var bienboolean = true;
document.write(bienboolean+"<br>");

document.write("Biến đối tượng: ");
var biendoituong = new Number(35);
document.write(biendoituong+"<br>");
</script>

Kết quả:

Biến số: 35
Biến số thực: 35.6
Biến chuỗi (String): Web Mới
Biến boolean: true
Biến đối tượng: 35

Chạy Thử

Các loại từ khóa khai báo biến

Khai báo biến với từ khóa var trong JavaScript

Phạm vi toàn trang, nếu tạo biến bằng từ khóa var ở trong câu lệnh if hoặc vòng lặp for thì ở ngoài vẫn in ra được biến đó:

<script>
//Nếu tạo biến bằng từ khóa var ở trong câu lệnh if thì ở ngoài vẫn in ra được biến đó.
document.write("<b>Nếu tạo biến bằng từ khóa var ở trong câu lệnh if thì ở ngoài vẫn in ra được biến đó:</b><br>");
let gioitinh = 1;
if(gioitinh==1){
var kqgt = "Giới tính nam";
}else{
var kqgt = "Giới tính nữ";
}
document.write(kqgt+"<br>"); // Biến khai báo bằng từ khóa var ở trong mệnh đề if else vẫn in ở ngoài được

//Nếu tạo biến bằng từ khóa var ở trong vòng lặp for thì ở ngoài vẫn in ra được biến đó.
document.write("<b>Nếu tạo biến bằng từ khóa var ở trong vòng lặp for thì ở ngoài vẫn in ra được biến đó:</b><br>");
let mang = [10, 20, 30];
for (let value of mang) {
 if(value==20){
   var ketqua = "Có số 20";
 }
}
document.write(ketqua+"<br>"); // Biến khai báo bằng từ khóa var ở trong vòng lặp for vẫn in ở ngoài được
</script>

Kết quả:

Nếu tạo biến bằng từ khóa var ở trong câu lệnh if thì ở ngoài vẫn in ra được biến đó:
Giới tính nam
Nếu tạo biến bằng từ khóa var ở trong vòng lặp for thì ở ngoài vẫn in ra được biến đó:
Có số 20

Chạy Thử

Khai báo biến với từ khóa let trong JavaScript

Nếu tạo biến bằng từ khóa let ở trong câu lệnh if hoặc trong vòng lặp for thì ở ngoài không in ra được biến đó, nếu đặt lại giá trị cho tên biến với cùng từ khóa let thì làm code lỗi ngay từ biến đó về sau, hoạt động giống tử khóa const:

<script>
//Nếu tạo biến bằng từ khóa let ở trong câu lệnh if thì ở ngoài không in ra được biến đó.
document.write("<b>Nếu tạo biến bằng từ khóa let ở trong câu lệnh if thì ở ngoài không in ra được biến đó:</b><br>");
let gioitinh = 1;
//let gioitinh = 0; //Khai báo thay đổi giá trị sẽ lỗi code ngay
if(gioitinh==1){
let kqgt = "Giới tính nam";
document.write(kqgt+"<br>"); // Nếu in ở ngoài mệnh đề if else sẽ không được
}else{
let kqgt = "Giới tính nữ";
document.write(kqgt+"<br>"); // Nếu in ở ngoài mệnh đề if else sẽ không được
}

//Nếu tạo biến bằng từ khóa let ở trong vòng lặp for thì ở ngoài không in ra được biến đó.
document.write("<b>Nếu tạo biến bằng từ khóa let ở trong vòng lặp for thì ở ngoài không in ra được biến đó:</b><br>");
let mang = [10, 20, 30];
for (let value of mang) {
 document.write(value+"<br>"); // Nếu in ở ngoài vòng lặp for sẽ không được
}
</script>

Kết quả:

Nếu tạo biến bằng từ khóa let ở trong câu lệnh if thì ở ngoài không in ra được biến đó:
Giới tính nam
Nếu tạo biến bằng từ khóa let ở trong vòng lặp for thì ở ngoài không in ra được biến đó:
10
20
30

Chạy Thử

Khai báo biến với từ khóa const trong JavaScript

Nếu tạo biến bằng từ khóa const ở trong câu lệnh if hoặc trong vòng lặp for thì ở ngoài không in ra được biến đó, nếu đặt lại giá trị cho tên biến với cùng từ khóa const thì làm code lỗi ngay từ biến đó về sau, hoạt động giống tử khóa let:

<script>
//Nếu tạo biến bằng từ khóa const ở trong câu lệnh if thì ở ngoài không in ra được biến đó.
document.write("<b>Nếu tạo biến bằng từ khóa const ở trong câu lệnh if thì ở ngoài không in ra được biến đó:</b><br>");

const gioitinh = 0;

// const gioitinh = 1; Khai báo thay đổi giá trị sẽ lỗi code ngay

if(gioitinh==1){
const kqgt = "Giới tính nam";
document.write(kqgt+"<br>"); // Nếu in ở ngoài mệnh đề if else sẽ không được
}else{
const kqgt = "Giới tính nữ";
document.write(kqgt+"<br>"); // Nếu in ở ngoài mệnh đề if else sẽ không được
}

//Nếu tạo biến bằng từ khóa const ở trong vòng lặp for thì ở ngoài không in ra được biến đó.
document.write("<b>Nếu tạo biến bằng từ khóa const ở trong vòng lặp for thì ở ngoài không in ra được biến đó:</b><br>");
const mang = [10, 20, 30];
for (const value of mang) {
 document.write(value+"<br>"); // Nếu in ở ngoài vòng lặp for sẽ không được
}
</script>

Kết quả:

Nếu tạo biến bằng từ khóa const ở trong câu lệnh if thì ở ngoài không in ra được biến đó:
Giới tính nữ
Nếu tạo biến bằng từ khóa const ở trong vòng lặp for thì ở ngoài không in ra được biến đó:
10
20
30

Chạy Thử

Những lỗi thường gặp khi sử dụng biến trong JavaScript

Khi làm việc với biến trong JavaScript, một số lỗi không nằm ở cú pháp mà xuất phát từ cách khai báo, phạm vi hoặc thay đổi giá trị. Hiểu rõ những trường hợp này giúp mã nguồn dễ kiểm soát hơn và hạn chế các lỗi khó phát hiện.

Khai báo lại biến không đúng cách

Việc khai báo lại biến phụ thuộc vào từ khóa được sử dụng. Với letconst, JavaScript không cho phép khai báo lại một biến trong cùng phạm vi. Trong khi đó, var có thể được khai báo lại, nhưng cách sử dụng này dễ khiến mã nguồn khó kiểm soát.

let name = "An";
let name = "Bình";

Đoạn mã trên tạo lỗi vì name đã được khai báo bằng let trong cùng phạm vi. Nếu cần thay đổi dữ liệu, chỉ cần gán giá trị mới thay vì khai báo lại biến.

let name = "An";
name = "Bình";

Sử dụng biến trước khi được khai báo

Không nên sử dụng let hoặc const trước dòng khai báo của chúng. Dù JavaScript có cơ chế đưa phần khai báo vào quá trình xử lý trước khi thực thi, hai từ khóa này vẫn nằm trong Temporal Dead Zone cho đến khi chương trình chạy tới dòng khai báo.

console.log(age);
let age = 20;

Để tránh lỗi, hãy khai báo biến trước khi sử dụng. Cách viết này cũng giúp luồng xử lý của chương trình rõ ràng và dễ đọc hơn.

Thay đổi giá trị của biến const

const được dùng khi biến không cần được gán sang một giá trị khác sau khi khởi tạo. Vì vậy, việc gán lại giá trị cho biến const sẽ gây lỗi.

const price = 100;
price = 200;

Nếu giá trị cần thay đổi trong quá trình chương trình chạy, hãy sử dụng let thay vì const. Tuy nhiên, với đối tượng hoặc mảng, cần phân biệt giữa việc thay đổi nội dung bên trong và gán lại chính biến đó.

Vô tình tạo biến toàn cục

Một lỗi dễ bỏ sót là gán giá trị cho một tên biến mà không khai báo bằng let, const hoặc var. Trong một số môi trường, cách viết này có thể tạo biến toàn cục ngoài ý muốn và gây ảnh hưởng đến những phần khác của chương trình.

function showMessage() {
    message = "Xin chào";
}

Thay vì để JavaScript tự xử lý tên biến chưa khai báo, nên khai báo biến một cách rõ ràng:

function showMessage() {
    const message = "Xin chào";
}

Khai báo biến đúng cách không chỉ giúp tránh lỗi mà còn giới hạn phạm vi dữ liệu, giảm nguy cơ xung đột tên và làm cho mã JavaScript dễ bảo trì hơn.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Biến trong JavaScript.

  • 0 Bình luận
Trần Thị Vân | Content Creator Web Mới
Trần Thị Vân
Trần Thị Vân là Content Creator tại Web Mới, phụ trách nghiên cứu, biên soạn nội dung và chia sẻ kiến thức về website, SEO, lập trình cùng các xu hướng công nghệ
Đánh giá
Chia sẻ nội dung đánh giá của bạn về Biến trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Yêu Cầu Báo Giá
Gửi trang web mẫu cần làm theo, chúng tôi sẽ báo giá đến bạn từ Email (tanlucit09@gmail.com - Bùi Tấn Lực) hoặc Zalo (Lực IT - 0398259259) !