Khái niệm

Trong Javascript bao gồm 2 loại biến là biến toàn cục và biến cục bộ.

• Biến toàn cục là biến mà bạn khai báo bên ngoài hàm hoặc bên ngoài dấu { }, và bạn có thể lấy được giá trị của biến ở bất kỳ đâu.

 let ten = "Trần Thái";
 console.log(ten);
 function demo() {
    console.log("Xin Chào " + ten);
 }
 demo();

// Kết quả
Trần Thái
Xin Chào Trần Thái

• Biến cục bộ là biến mà bạn khai báo bên trong hàm hoăc bên trong dấu { }, và bạn chỉ có thể lấy được giá trị của biến ở bên trong hàm chứa nó

 function demo() {
    let ten = "Trần Thái";
    console.log("Xin Chào " + ten);
 }
 demo();
 console.log(ten);

// Kết quả 
Xin Chào Trần Thái
Uncaught ReferenceError: ten is not defined

Các kiểu biến trong Javascript

Có 3 cách để khai báo biến trong Javascript là: let, const và var.

Var

Trước bản ES6 chúng ta thường dùng var để khai báo cho 1 biến, nhưng ở var có một vấn đề là nó bao gồm một tính chất hoisting – dù bạn có khai báo biến ở đâu thì nó đều sẽ bị đem lên đầu scope trước khi code thực hiện.

Ví dụ:

var demo = "Chào bạn";
var times = 4;

if (times > 3) {
    var demo = "Chào lần nữa nha!"; 
}

console.log(demo); 

// Kết quả
Chào lần nữa nha!

Việc bao gồm tính chất này của var dẫn đến việc mà chúng ta sẽ không biết việc biến của chúng ta bị thay đổi ở đâu và sẽ dẫn đến khó khăn trong việc debug nếu xảy ra lỗi.

Let, const

Để xử lý vấn đề trên thì ở ES6 đã bổ sung thêm 2 kiểu biến là let và const.

Let

Let có thể thay thế cho var là bởi vì nó chỉ là một phạm vi block chứ không phải là toàn cục như var. Nó giống như biến cục bộ, bạn chỉ có thể lấy được giá trị của nó ở trong hàm hoặc trong dấu { }, còn nếu ra ngoài thị sẽ không truy cập được nữa.

Ví dụ:

let demo = "Chào bạn";
let times = 4;

if (times > 3) {
     let hello = "Chào lần nữa nha!";
     console.log(hello); 
 }
console.log(hello); 

// Kết quả
Chào lần nữa nha!
hello is not defined

Ở let có một đặc điểm nữa là bạn trong cùng 1 block bạn không thể khai báo 2 tên biến giống nhau

let demo = "Chào bạn";
console.log(demo); 

demo = "Chào bạn lần nữa nha!";
console.log(demo);

// Kết quả
Chào bạn
error: Identifier 'demo' has already been declared

Nhưng bạn có thể khai báo tên biến giống nhau ở từng block khác nhau.

let demo = "Chào bạn";
if (true) {
    let demo = "Chào bạn lần nữa nha!";
    console.log(demo); 
}
console.log(demo);

// Kết quả
Chào bạn lần nữa nha!
Chào bạn

Const

Tương tự như let, const cũng là biến có phạm vi là block. Trong trường hợp biến chúng ta bao gồm các kiểu string, number, boolean, null và undefined thì sẽ không thể khai báo tên biến giống nhau hay update giá trị mới cho biến.

Ví dụ:

const demo = "Chào bạn";
demo = "Chào bạn lần nữa nha!"; 

// Kết quả
error : Assignment to constant variable. 

------------------------------------------------

const demo = "Chào bạn";
const demo = "Chào bạn lần nữa nha!"; 

// Kết quả
error : Identifier 'demo ' has already been declared

Tuy nhiến nếu biến của bạn là kiểu object, array hay function thì bạn có thể update giá trị cho thuộc tính của nó

const demo = {
    message : "Chào bạn",
    number : "five"
}

demo.message = "Chào bạn lần nữa nha!";
console.log(demo);

// Kết quả
{message: "Chào bạn lần nữa nha!', number: 'five'}

Hy vọng bài viết giúp bạn hiểu rõ hơn về phạm vi của biến. Nếu cảm thấy bài viết có ích hãy chia sẻ để mọi người cùng biết nha!