[ES6] Tìm hiểu về let

ES6 hay còn gọi ES2015 ra đời với khá nhiều điều mới mẻ trong đó có việc xuất hiện thêm hai từ khóa sử dụng để khai báo biến đó là let và const.Sau đây mình xin trình bày tổng quan về từ khóa let của ES6,trước khi tìm hiểu về biến mình sẽ nói qua về phạm vi(scope) hiện tại của JS đã nhé.

1.Global scope
Các biến được khai báo bên ngoài các function đều có phạm vi toàn cục ví dụ:

 var carName = "Volvo";  
 console.log(carName);  
 // => Volvo  
 function myFunction() {  
  console.log(carName);  
  // => Volvo  
 }  

Biến toàn cục có thể được truy cập từ bất kỳ đâu trong chương trình js.Khi sử dụng biến toàn cục theo cách này rất dễ loạn vì biến này có thể truy cập từ bất kỳ đâu nên tất nhiên nó có thể bị sửa đổi ở bất kỳ đâu khó kiểm soát nếu file js rất dài.

2.Function scope
Các biến được khai báo Locally(bên trong một function) có Function Scope.Tức là biến đó chỉ sử dụng được bên trong function khai báo nó.Nếu ta gọi nó ở bên ngoài hoặc ở hàm khác thì sẽ báo lỗi.
Ví dụ:

 function myFunction() {  
  var carName = "Volvo";  
  console.log(carName);  
  // => Volvo  
 }  
 console.log(carName);  
 // => carName not defined  

Biến local chỉ có thể truy cập từ bên trong hàm nơi biến đó được khai báo.

3.JavaScript Block Scope.
Trước ES6(ES2015) javascript không có block scope(phạm vi khối) mà chỉ có 2 phạm vi đã trình bày phía trên.Đến khi ES6 ra đời đã thêm block scope(phạm vi khối) vào.
Vậy nên khi sử dụng từ khóa var để khai báo,biến sẽ không có  block scope,biến được khai báo bên trong khối cũng sẽ truy cập ở bên ngoài vào được.VD:

 {   
  var x = 2;   
  console.log(x);  
 }  
 console.log(x);  
 // x CAN be used here  

Nhưng nếu sử dụng từ khóa let để khai báo biến thì biến này sẽ có block scope(phạm vi khối).VD:

 {   
  let x = 2;   
  console.log(x);  
  //=> 2  
 }  
 console.log(x);  
 // =>x is not defined  
 // x CAN NOT be used here  

4.So Sánh cách khai báo biến sử dụng let và var
4.1.Khai báo lại biến
Khi sử dụng từ khóa var để khai báo lại biến đã có sẵn sẽ phát sinh vấn đề.Khai báo lại một biến ở trong một block scope cũng sẽ làm thay đổi giá trị của biến đó ở bên ngoài.VD:

 var x = 10;  
 // Here x is 10  
 {   
  var x = 2;  
  // Here x is 2  
 }  
 // Here x is 2  

Nhưng nếu sử dụng từ khóa let để khai báo lại biến sẽ giải quyết được vấn đề.Khi khai báo lại biến trong một block scope sẽ không làm thay đổi giá trị của biến.VD:

 var x = 10;  
 // Here x is 10  
 {   
  let x = 2;  
  // Here x is 2  
 }  
 // Here x is 10  

4.2.Browser hỗ trợ
Từ khóa var được tất cả trình duyệt hỗ trợ
Từ khóa let không được hỗ trợ đầy đủ trong IE 11 và các phiên bản cũ hơn
Bảng dưới đây liệt kê các phiên bản đầu tiên hỗ trợ từ khóa let của các browser phổ biến

4.3.Vòng lặp
Sử dụng từ khóa var khai báo biến trong vòng lặp

 var i = 5;  
 for (var i = 0; i < 10; i++) {  
  // some statements  
 }  
 // Here i is 10  

Sử dụng từ khóa let khai báo biến trong vòng lặp

 let i = 5;  
 for (let i = 0; i < 10; i++) {  
  // some statements  
 }  
 // Here i is 5  

Ở ví dụ đầu tiên khi sử dụng từ khóa var khai báo lại biến thì giá trị của biến i sau khi thực hiện hết vòng lặp sẽ là giá trị cuối cùng của biến được khai báo trong vòng lặp.
Ở ví dụ tiếp theo khi sử dụng từ khóa let khai báo lại biến thì giá trị của biến i sau khi thực hiện hết vòng lặp cũng không thay đổi.Biến khai báo trong vòng lặp chỉ sử dụng được trong chính vòng lặp đó.

4.4.Phạm vi function
Các biến được khai báo với var và let khá giống nhau khi được khai báo trong một hàm VD:

 function myFunction() {  
  var carName = "Volvo";  // Function Scope  
 }  

Với

 function myFunction() {  
  let carName = "Volvo";  // Function Scope  
 }  

4.5.Phạm vi toàn cục
Các biến được khai báo với var và let khá giống nhau khi được khai báo bên ngoài block.
VD:

var x = 2;       // Global scope

let x = 2;       // Global scope

4.6.Biến toàn cục trong HTML.

• Với JS phạm vi toàn cục tương tự như biến môi trường của JS.
• Trong HTML,biến toàn cục là một đối tượng window.
• Biến toàn cục được khai báo với từ khóa var thuộc về đối tượng window,để hiểu thêm về đối tượng window các bạn có thể tìm hiểu thêm về HTML DOM nhé.

VD:

 var carName = "Volvo";  
 // code here can use window.carName  

Biến toàn cục được khai báo với let không thuộc về đối tượng window.

 let carName = "Volvo";  
 // code here can not use window.carName  

4.7.Khai báo lại biến.
Việc khai báo lại biến var sử dụng var được cho phép ở bất kỳ đâu trên chương trình.

 var x = 2;  
 // Now x is 2  
 var x = 3;  
 // Now x is 3  

Nhưng không được phép khai báo lại một biến var với từ khóa let trong cùng một phạm vi hoặc trong một khối.

 var x = 2;    // Allowed  
 let x = 3;    // Not allowed  
 {  
  var x = 4;  // Allowed  
  let x = 5  // Not allowed  
 }  

Không được phép khai báo lại một biến let với let trong cùng một phạm vi hoặc trong một khối.

 let x = 2;    // Allowed  
 let x = 3;    // Not allowed  
 {  
  let x = 4;  // Allowed  
  let x = 5;  // Not allowed  
 }  

Không được phép khai báo lại một biến let với var trong cùng một phạm vi hoặc trong cùng một khối.

 let x = 2;    // Allowed  
 var x = 3;    // Not allowed  
 {  
  let x = 4;  // Allowed  
  var x = 5;  // Not allowed  
 }  

Được phép khai báo lại một biến với let trong phạm vi khác hoặc trong một khối khác.

 let x = 2;    // Allowed  
 {  
  let x = 3;  // Allowed  
 }  
 {  
  let x = 4;  // Allowed  
 }  

4.8.Hoisting
Hosting là hành vi mặc định của javascript về việc đưa các khai báo biến lên đầu của chương trình.
Biến được khai báo bởi từ khóa var được đưa lên trên cùng nên chúng ta có thể sử dụng biến đó trước khi nó được khai báo VD:

 carName = "Volvo";  
 document.getElementById("demo").innerHTML = carName;  
 var carName;  

Nhưng biến được khai báo bởi từ khóa let lại không được đưa lên trên cùng của chương trình nên sử dụng biến let trước khi khai báo sẽ dẫn đến ReferenceError.Biến sẽ nằm trong "temporal dead zone"-vùng chết tạm thời từ khi bắt đầu khối cho đến khi được khai báo.

 // you can NOT use carName here  
 let carName;  

Vậy là mình đã trình bày xong về từ khóa let trong ES6 ở bài sau mình sẽ trình bày tiếp đến const.Chúc các bạn làm việc vui vẻ!

Tài liệu tham khảo
https://www.w3schools.com/js/js_let.asp
https://www.w3schools.com/js/js_hoisting.asp