Phạm Vi Biến Trong Javascript

Hôm nay bạn hãy cùng mình đi vào tìm hiểu về phạm vi của biến cũng như cách sử dụng khai bao biến bằng var, let và const trong ngôn ngữ lập trình Javascript để phát triển web nhé.

Đ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

Trong Javascript chúng ta có 3 cách khai báo biến là dùng từ khóa let, var và const. Hôm nay chúng ta sẽ đi vào tìm hiểu phạm vi biến của mỗi cách khai báo ở phần dưới đây nhé.

Biến toàn cục là những biến được khai báo bên ngoài tất cả các function (hàm) hoặc bên ngoài dấu {}. Đối với một biến toàn cục thì bạn có thể truy cập ở dữ liệu của biến ở bất cứ đâu trong chương trình. Bây giờ chúng ta sẽ đi vào ví dụ cụ thể để hiểu rõ hơn nhé:

Đoạn Code:

 let ten = "Nguyễn An";
 console.log(ten);
 function xinChao() {
    console.log("Xin Chào " + ten);
 }
 xinChao();

Kết Quả:

Như bạn thấy thì dù bên ngoài hay bên trong function (hàm) thì chúng ta đều có thể lấy được giá trị của biến ten.

Biến cục bộ là biến được đặt bên trong function hoặc {}. Chỉ có hàm chứa nó mới có quyền truy cập vào dữ liệu của biến đó. Do đó bạn có thể dùng nhiều tên biến khác nhau để đặt trong những hàm khác nhau mà không ảnh hưởng đến dữ liệu của biến. Bây giờ chúng ta sẽ đi vào hai dạng biến cục bộ là:

Khi bạn khai báo biến trong function thì chỉ có hàm đó có thể sử dụng dữ liệu của biến đó. Nếu ta gọi biến bên ngoài hàm thì sẽ xảy ra lỗi. Để nắm rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 function xinChao() {
    let ten = "Nguyễn An";
    console.log("Xin Chào " + ten);
 }
 xinChao();
 console.log(ten);

Kết Quả:

Khi chúng ta khai báo biến với từ khóa let hay const trong block statement {} như mệnh đề if, switch... thì chúng ta chỉ được phép truy cập biến bên trong block statement đó. Để dễ hình dung bạn xem ví dụ sau đây nhé:

Đoạn Code:

 if (true) {
  let ten = "Nguyễn An";
  console.log("Xin Chào " + ten);
 }
 console.log(ten);

Kết Quả:

Nhưng khi chúng ta khai báo biến bằng từ khóa var thì nó sẽ mặc định là biến toàn cục và cho phép truy cập dữ liệu của biến khi gọi từ bên trong và bên ngoài block statment {}. Để hiểu rõ hơn chúng ta thử đi vào sử dùng ba cách khai báo khác nhau trong block statement để xem kết quả sao nhé:

Đoạn Code:

 if (true) {
  let khaiBaoLet = "Khai Báo Biến bằng let";
  const khaiBaoConst = "Khai Báo Biến bằng const";
  var khaiBaoVar = "Khai Báo Biến bằng var";
 }
 console.log(khaiBaoVar);
 console.log(khaiBaoConst);
 console.log(khaiBaoLet);

Kết Quả:

Như bạn thấy thì chỉ cách khai báo var mới sử dụng được dữ liệu của biến bên ngoài block statement. Còn hai từ khóa let và var thì sẽ xảy ra lỗi cho chường trình.

Bây giờ chúng ta sẽ đi vào ví dụ thực tế là sử dụng biến bên ngoài phạm vi của hàm thông qua ví dụ dưới đây nhé:

Đoạn Code:

 function luuTru() {
    let ten = "Nguyễn An";
 }
 function xinChao() {
    luuTru();
    console.log("Tên khách hàng là: " + ten);
 }

xinChao();

Kết Quả:

Như bạn thấy là mặc dù chúng ta có gọi hàm luuTru() trong hàm xinChao() thì nó cũng không thể lấy được giá trị lưu trữ trong biến ten.

Bây giờ chúng ta thử khai báo bằng từ khóa var để xem có thể lấy được dữ liệu của biến ten không nhé:

Đoạn Code:

 function luuTru() {
    var ten = "Nguyễn An";
 }
 function xinChao() {
    luuTru();
    console.log("Tên khách hàng là: " + ten);
 }

xinChao();

Kết Quả:

Như vậy chúng ta có thể rút ra kết luận là đối với phạm vi biến được khai báo trong hàm thì việc sử dụng từ khóa let, const hay var cũng sẽ không có quyền truy cập vào dữ liệu của biến đó ở bên ngoài hàm chứa nó.

Nhưng có một cách giúp chúng ta giải quyết vần đề trên là không sử dụng từ khóa để khai báo biến. Lúc này phạm vi của biến sẽ là biến toàn cục và chúng ta có thể truy cập dữ liệu của biến ở mọi nơi trong chương trình. Để dễ hình dung bạn xem đoạn code sau nhé:

Đoạn Code:

 function luuTru() {
     ten = "Nguyễn An";
 }
 function xinChao() {
    luuTru();
    console.log("Tên khách hàng là: " + ten);
 }

xinChao();

Kết Quả:

Cách này mình khuyên chỉ sử dụng trong trường hợp cần thiết thôi nhé nếu không sẽ gây ra sự lộn xộn và dễ hiểu lầm phạm vi của biến trong đoạn code của chúng ta.

Lexical Scope là việc sử dụng các hàm lồng vào nhau. Và hàm con sẽ có quyền truy cập các biến của hàm cha nhưng hàm cha sẽ không có quyền truy cập và sử dụng các biến của hàm con. Để dễ hiểu thì chúng ta sẽ đi vào ví dụ thực tế sau đây nhé:

Đoạn Code:

 function hamCha () {
      let bienCha = "Tôi là biến Cha";

   function hamCon() {
      let bienCon = "Tôi là biến Con";
      console.log(bienCha);
   }

   console.log(bienCon);
 }
 hamCha();

Kết Quả:

Như bạn thấy thì khi chúng ta dùng bienCha trong hamCon thì sẽ được cho phép còn ngược lại nếu chúng ta truy cập bienCon bên ngoài hàm của nó thì sẽ xảy ra lỗi như trên.

Như ví dụ trên khi ta tạo một hamCon nằm bên trong hamCha thì lúc này chúng ta cũng đã tạo một clouser. Với hamCon chính là clouser. Và clouser này sẽ được quyền truy cập biến của hàm cha dù hàm đó có được trả về hay không. Điều này giúp nó duy trì quyền truy cập vào dữ liệu của các biến ở hàm cha. Nghe hơi khó hiểu nhỉ, bây giờ chúng ta sẽ đi vào ví dụ cụ thể sau đây nhé:

Đoạn Code:

 function hamCha () {
      let bienCha = "Tôi là biến Cha";

   function hamCon() {
      console.log(bienCha);
   }

 return hamCon;
 }
 hamCha()();

Kết Quả:

Đây là cách mà chúng ta khi muốn gọi và sử dụng hamCon trong hai hàm lồng vào nhau. Cái này mình sẽ có một bài giải thích kỹ hơn khi chúng ta học về cách tương tác với trình duyệt trong javascript nhé. Nếu bạn muốn tìm hiểu hay tham khảo thêm thì xem ở đây nha Clouser.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn hiểu được phạm vi biến trong ngôn ngữ Javascript và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!