Video học lập trình mỗi ngày

Lexical scope là gì? Vì sao chúng tôi lại đặt tiêu đề như vậy, thử hỏi "Quê mi ở mô?", "Choa có chộ mô mồ". Đố thằng miền Nam mà hiểu đó. Đố luôn đó. 

Bài viết này lấy một ví dụ thực tế để giúp các bạn làm quen với javascript để hiểu hơn về khái niệm scope trong javascript. Bài ngày trước chúng ta đã bàn luận cực mạnh về "Scope in javascript" với hai khái niệm đó là Phạm vi và Chuỗi phạm vi. 

Và hôm nay chúng ta đi đến một khái niệm nữa đó là "Lexical scope". Và kèm theo là một ví dụ mà chắc ai cũng nên biết từ đó khám phá được Miền Trung quê choa chứ. Bây giờ chúng ta sẽ phân tích khái niệm Lexical scope trong javascript.

Lexical

Đầu tiên phải phân tích khái niệm này thông qua từ "Lexical". Nó bắt nguồn từ "Lexicon" mà trong tiếng Latin: "lexis" có nghĩa là "từ". Có nghĩa là: Lexicon chỉ đơn giản có nghĩa là từ điển. 

Theo thứ tự từ, nó có nghĩa là từ vựng của ngôn ngữ của một người. Nó giống như một cuốn sách lưu trữ những ý nghĩa để nhằm giải thích một từ. Thực tế thế này, khi bạn học tiếng anh thì nếu không hiểu bạn đi tra từ điển để mà học từ vựng. Chứ nhìn vào mà đoán thì cũng khó. Đó đơn giản vậy đi. Tiếp theo hiểu Lexical Scope.

Lexical scope

Qua trên ta có thể nhận thấy rằng để định nghĩa được ta đoán như sau: Lexical Scope đơn giản có nghĩa là khu vực mà một "từ" tồn tại được xác định bởi nơi nó được xác định hoặc tạo ra. Đừng lo lắng nếu bạn vẫn cảm thấy rất mông lung. Tôi ở đây để cố gắng giải thích mà. yên tâm, chúng ta đi tiếp một ví dụ này nè. 

Bạn có biết từ "Chộ mô" là của người dân Nghệ An (NA). Và người NA đều hiểu nghĩa của từ đó. Hà Tĩnh và Quảng Bình cũng hiểu từ này và truy cập vào từ này để sử dụng cho cuộc sống hàng ngày cho địa phương của họ vì từ "Chộ mô" thuộc phạm vi Miền Trung. Người Sài Gòn không thể sử dụng từ này vì họ thuộc phạm vi khác. Vì từ này không phải do khu vực họ tạo ra, nên có nói họ cũng chả hiểu. 

Xem thêm: Scope và Scope chain trong javascript là gì? Ví dụ sáng tỏ 

Đến đây có ai hình dung ra chưa? Vì chúng ta là những lập trình viên nên tôi sẽ thay đổi "từ" thành "biến". Hay gọi là var đó. Định nghĩa mới của chúng ta sẽ là: Lexical Scope đơn giản có nghĩa là vùng mà một biến tồn tại được xác định bởi nơi nó được xác định hoặc tạo ra. Hoặc bạn sẽ không thể sử dụng biến này ở ngoài phạm vi khác. Vì vậy, Lexical Scope cho chúng ta thấy là một biến chỉ có thể được sử dụng trong phạm vi mà nó được tạo ra chứ không phải nơi nó được gọi. 

Giờ chúng ta sẽ biến hoá vị dụ cụ thể trên thành code, để xem thử hêy.

function danNgheAn() {
  let traloi = "Choa có chộ mô mồ"; // local variable
  return `reply ${traloi}`
}

function danSaiGon() {
  const show = danNgheAn();
  return show;
}

console.log(danSaiGon())

Vì danNgheAn (Dân Nghệ An) có chứa từ khai báo "Choa có chộ mô mồ" trong phạm vì hàm, nên một khi danSaiGon hỏi thì sẽ được tham chiếu tới biên reply. Vì vậy, với phạm vi từ vựng, bất cứ khi nào danNgheAn() được thực thi, JavaScript sẽ đi vào bên trong phạm vi của hàm để tìm kiếm các biến được sử dụng trong hàm này. 

Bây giờ chúng ta thay đổi một chút về cú pháp.

function danNgheAn() {
  return `reply ${traloi}` // Reference Error: traloi not defined
}

function danSaiGon() {
	let traloi = "Choa có chộ mô mồ";
  const show = danNgheAn();
  return show;
}

console.log(danSaiGon())

Giờ đây chúng ta sẽ nhận được một Error như trên. Function danSaiGon() không chính xác. Nó không thành công khi cố gắng truy cập traloi trong câu lệnh trả về. Tại sao? Điều này là do JavaScript sử dụng Lexical Scope đấy các Ông à. Cách hoạt động của điều này là khi nó gặp biến traloi trên hàm danNgheAn() nó sẽ tìm kiếm nơi biến traloi được tạo trong Chuỗi phạm vi của nó mà nó có đâu, khổ vậy đấy. Vì vậy, đó là cách JavaScript kiểm tra các biến. Cho nên việc hiểu khái niệm nõ cũng rổi rắm lắm. 

Có một điều mà tôi muốn nói là thật ra bạn không hiểu cũng chả sao đâu. Đến đâu mà lỗi, thì bạn khai báo lại chớ có gì đâu. hâhha, nói vậy thôi. Chứ việc khai báo tùm lum nó liên quan đền cấp phát bộ nhớ, và ro rỉ bộ nhớ chớ được gì đâu. Tóm lại, đọc để hiểu thôi, còn không hiểu cũng chả sao đâu. Thời đại học es12 javascript  tới nơi rồi, quan trọng chi mấy cái này cơ chứ. 

Bài viết được phóng tác bậy bạ dựa trên bài viết gốc: dev.to