1. Phạm vi của biến trong JavaScript là gì?
Ví dụ như việc khai báo một biến bên trong hàm thì biến đó chỉ có thể sử dụng bên trong hàm mà nó được khai báo(không thể sử dụng bên ngoài hàm). Còn nếu một biến được khai báo bên ngoài hàm thì biến đó có thể sử dụng được cả ở bên trong lẫn bên ngoài hàm. Từ đây đã hình thành một khai niệm là phạm vi của biến.
Phạm vi biến là khả năng truy cập của biến, object và function trong JavaScript. Như các bạn đã biết thì biến sẽ được khai báo mọi nơi trong JavaScript. Nhưng tùy theo việc chúng được khai báo ở đâu thì sẽ có phạm vi khác nhau. Phạm vi của biến sẽ xác định phạm vi mà một biến có thể được sử dụng truy cập.
Nếu dựa vào phạm vi của biến thì biến sẽ được chia làm 2 loại:
- Biến cục bộ (Local Variable)
- Biến toàn cục (Global Variable)
Điểm quan trọng khi ta xác định phạm vi cho biến là sẽ bảo đảm cho đoạn mã của của chúng ta được an toàn. Nó chỉ cho phép người dùng truy cập vào những thông tin mà chúng ta muốn thông qua việc hiển thị và phân quyền truy cập vào biến lưu trữ. Ngoài ra giúp chúng ta tăng khả năng nhận biết lỗi một cách dễ dàng.
Thật ra biến toàn cục và biến cục bộ là những khái niệm mà bất kì một ngôn ngữ lập trình nào đều có và Javascript cũng không ngoại lệ. Nếu trong ứng dụng của bạn sử dụng trùng tên biến quá nhiều từ trong hàm cho đến ngoài hàm thì đôi khi dẫn đến những kết quả không mong muốn, và lỗi chính là lỗi kiểm soát được biến toàn cục và cục bộ.
2. Biến cục bộ trong JavaScript
Một biến được gọi là cục bộ trong Js khi mà ta khai báo biến ở bên trong một hàm cụ thể nào đó. Lúc này biến đó sẽ không được sử dụng ở bên ngoài hàm. Hay nói cách khác là một biến cục bộ là biến được giới hạn trong phạm vi (scope) nhất định như: hàm, vòng lặp,… Một biến cục bộ được định nghĩa trong hàm với từ khóa sẽ là biến cục bộ. Nếu các bạn định nghĩa không có tử khóa var thì sẽ trở thành biến toàn cục.
Ví dụ:
// code ở đây không thể dùng biến carName
function myFunction() {
var carName = "Voi";
// code ở đây không thể dùng biến carName
}
// code ở đây không thể dùng biến carName
Bởi vì những biến cục bộ chỉ có thể được nhận biết bên trong hàm, bạn có thể sử dụng nhiều biến với cùng tên trong các hàm khác nhau. Những biến cục bộ được khởi tạo khi hàm bắt đầu thực hiện, và bị xóa khi hàm kết thúc.
Ví dụ:
function demo(){
var myName = "Laptrinhtudau";
document.write("Tên tôi là: " + myName);
}
function hello(){
var myName = "hoc lap trinh tu con so )";
document.write("Xin chào " + myName);
}
Từ khóa let có tính phạm vi trong một khối(chỉ có thể truy cập biến trong khối).
Ví dụ:
let a = 10;
function phep_chia() {
let b = 5;
console.log(a / b);
if (b == 5) {
let c = 2;
document.write(a + ' ' + b + ' ' + c);
}
document.write(a + ' ' + b + ' ' + c);
}
phep_chia();
Trong chương trình trên, các biến:
- a là một biến toàn cục. Nó có thể được truy cập ở bất kỳ đâu trong chương trình.
- b là một biến cục bộ. Nó chỉ có thể được truy cập bên trong hàm phep_chia.
- c là một biến nằm trong phạm vi khối. Nó chỉ có thể được truy cập bên trong khối lệnh if.
- Do đó, trong chương trình trên, hai console.log() đầu tiên hoạt động mà không gặp vấn đề gì.
- Tuy nhiên, ta đã truy cập biến c bên ngoài khối lệnh if trong phương thức console.log() thứ ba. Điều này sẽ tạo ra một lỗi.
Chú ý
Trong JavaScript, var có tính phạm vi trong hàm và let có tính phạm vi trong một khối. Nếu ta cố gắng sử dụng var c = 2; bên trong câu lệnh if trong chương trình trên, toàn bộ chương trình sẽ vẫn hoạt động bình thường, vì c được coi như một biến cục bộ.
Ví dụ:
let a = 10;
function phep_chia() {
let b = 5;
console.log(a / b);
if (b == 5) {
var c = 2;
console.log(a + ' ' + b + ' ' + c);
}
console.log(a + ' ' + b + ' ' + c);
}
phep_chia();
3. Biến toàn cục trong JavaScript
Biến toàn cục là biến mà bạn khai báo bên ngoài và không nằm bên trong một hàm cụ thể nào cả. Khi một biến được định nghĩa bên ngoài bất cứ một function nào thì nó sẽ có giá trị là toàn cục (global), được sử dụng ở mọi nơi trong chương trình. Nhưng vấn đề lại không hề dừng lại đơn giản như vậy vì còn có sự có mặt của các từ khóa để khai báo biến. Nếu chúng ta khai báo biến trong function mà không có từ khóa thì sẽ trở thành biến toàn cục.
Ví dụ:
var a = 5;
var b = 2;
function phep_nhan () {
console.log(a*b);
}
phep_nhan();
Trong chương trình trên, biến a và b được khai báo ở đầu chương trình và là hai biến toàn cục. Nó có nghĩa là biến a và b có thể được sử dụng ở bất kỳ đâu trong chương trình.
Giá trị của một biến toàn cục có thể được thay đổi bên trong một hàm.
Ví dụ:
var a = 5;
var b = 2;
function phep_nhan () {
a = 10;
console.log(a*b);
}
phep_nhan();
console.log(a);
Trong chương trình trên, biến a và b là hai biến toàn cục. Giá trị của a ban đầu là 5. Sau đó, biến a được truy cập bên trong hàm và giá trị thay đổi thành 10. Do đó, giá trị của a được thay đổi sau khi thay đổi nó bên trong hàm.
Chú ý
Nên tránh sử dụng các biến toàn cục vì giá trị của một biến toàn cục có thể thay đổi trong các khu vực khác nhau trong chương trình. Nó có thể đưa ra các kết quả chưa biết trong chương trình.
Trong JavaScript, một biến cũng có thể được sử dụng mà không cần khai báo. Nếu một biến được sử dụng mà không khai báo, biến đó sẽ tự động trở thành một biến toàn cục.
Ví dụ:
var b = 2;
function phep_nhan () {
a = 10;
console.log(a*b);
}
phep_nhan();
console.log(a);
4. Một số ví dụ về biến toàn cục và biến cục bộ
Nếu trong hàm có sử dụng từ khóa var và để tạo một biến và tên của biến đó đã tồn tại ở bên ngoài (toàn cục) thì lúc này bên trong hàm sẽ hiểu là đang sử dụng biến cục bộ nên không ảnh hưởng gì biến bên ngoài cả.
Ví dụ:
// Biến toàn cục
var comment = "Nội dung comment toàn cục";
// Hàm có sử dụng biến toàn cục
function add_comment()
{
// Khai báo biến trùng với bên ngoài
var comment = "Nội dung comment cục bộ";
alert(comment);
}
// Gọi fuction comment
add_comment();
// In biến toàn cục
alert(comment);
Nếu bạn không sử dụng từ khóa var để khai báo biến trong hàm thì JS sẽ sử dụng biến toàn cục nên mọi thay đổi giá trị của biến comment đó sẽ được lưu lại.
Ví dụ:
// Biến toàn cục
var comment = "Nội dung comment trước khi thay đổi";
// Hàm có sử dụng biến toàn cục
function add_comment()
{
comment = "Nội dung comment đa bị thay đổi";
alert(comment);
}
// Gọi fuction comment
add_comment();
// In biến toàn cục
alert(comment);
Tổng kết lại thì biến toàn cục là biến được khai báo bên ngoài hàm và được sử dụng ở tất cả các vị trí, biến cục bộ là biến khai báo ở trong hàm và chỉ sử dụng được trong nội bộ của hàm đó thôi, sau khi hàm thực thi xong thì ngay lập tức nó sẽ bị xóa khỏi bộ nhớ. Và một chú ý quan trọng khác là ở phần ví dụ bạn cần hiểu được trường hợp ghi đè tên biến thông qua từ khóa var ở trong hàm nhé.
