Let và Var trong JavaScript

Let và Var trong JavaScript

Một trong những tính năng nổi bật của ECMAScript 2015 đó là sự bổ sung let và const phục vụ cho việc khai báo biến dữ liệu. Vậy sự khác biệt giữa let và var trong JavaScript là gì thì ở bài viết này chúng ta sẽ cùng tìm hiểu nhé!

ECMAScript 2015 có gì?

ES2015 đã giới thiệu 2 keywords mới quan trọng là:  let  và  const .

Hai từ khóa này cung cấp các biến Block Scope (và constant) trong JavaScript.

Trước ES2015, JavaScript chỉ có 2 loại phạm vi: phạm vi toàn cục (Global Scope) và phạm vi của hàm (Function Scope). 

Global Scope là gì?

Những biến được khai báo bên ngoài bất kì một hàm sẽ có phạm vi toàn cục.

Ví dụ:

var carName = "Volvo"; // code ở đây có thể sử dụng biến carName function myFunction() { // code ở đây cũng có thể sử dụng biến carName }
Code language:JavaScript(javascript)

Biến toàn cục có thể được truy cập từ bất cứ đâu trong chương trình JavaScript .

Function Scope là gì?

Biến được khai báo cục bộ (bên trong một hàm) sẽ có phạm vi cục bộ.

Ví dụ:

// code ở đây không thể sử dụng biến carName function myFunction() { var carName = "Volvo"; // code ở đây có thể sử dụng biến carName } // code ở đây không thể sử dụng biến carName
Code language:JavaScript(javascript)

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

JavaScript Block Scope 

Biến được khai báo với từ khóa  var  không thể có Block Scope.

Biến được khai báo bên trong một block (block là code trong dấu ngoặc nhọn {} ) có thể được truy cập từ bên ngoài block.

Ví dụ:

{ var x = 2; } // x CÓ THỂ được sử dụng ở đây
Code language:JavaScript(javascript)

Trước ES2015 JavaScript không có Block Scope.

Biến được khai báo với từ khóa  let  có phạm vi Block Scope.

Biến được khai báo bên trong một block {} không thể được truy cập từ bên ngoài block:

Ví dụ:

{ let x = 2; } // x không thể được sử dụng ở đây
Code language:JavaScript(javascript)

Redeclaring (khai báo trùng lặp)

Khai báo lại một biến bên trong một block với từ khóa  var  sẽ ảnh hưởng biến đó bên ngoài block:

var x = 10; // ở đây x là 10 { var x = 2; // ở đây x là 2 } // ở đây x là 2
Code language:JavaScript(javascript)

Khai báo lại một biến bên trong một block với từ khóa  let  sẽ không ảnh hưởng đến biến đó bên ngoài block:

var x = 10; // ở đây x là 10 { let x = 2; // ở đây x là 2 } // ở đây x vẫn là 10
Code language:JavaScript(javascript)

Loop Scope

Sử dụng  var  trong một vòng lặp :

var i = 5; for (var i = 0; i < 10; i++) { // một số câu lệnh } // ở đây i là 10
Code language:JavaScript(javascript)

Sử dụng  let  trong một vòng lặp :

let i = 5; for (let i = 0; i < 10; i++) { // một số câu lệnh } // Ở đây i vẫn là 5
Code language:JavaScript(javascript)

Trong ví dụ sử dụng  var , biến i được khai báo lại trong vòng lặp sẽ thay đổi giá trị trước đó của biến i bên ngoài vòng lặp.

Trong ví dụ sử dụng  let , biến i  được khai báo trong vòng lặp sẽ không thay đổi giá trị trước đó của biến i bên ngoài vòng lặp.

Function Scope

Biến được khai báo với let và var là tương tự nhau khi được khai báo bên trong một hàm.

Cả hai sẽ có Function Scope:

function myFunction() { var carName = "Volvo"; // Function Scope }
Code language:JavaScript(javascript)
function myFunction() { let carName = "Volvo"; // Function Scope }
Code language:JavaScript(javascript)

Global Scope

Biến được khai báo với let và var là tương tự nhau khi được khai báo bên ngoài một block.

Cả hai sẽ có Global Scope:

var x = 2; // Global scope
Code language:JavaScript(javascript)
let x = 2; // Global scope
Code language:JavaScript(javascript)

Biến Global trong HTML

Với JavaScript, phạm vi toàn cục là môi trường JavaScript.

Trong HTML, phạm vi toàn cục là đối tượng window.

Biến global được xác định bằng từ khóa  var  thuộc về đối tượng window.

Ví dụ:

var carName = "Volvo"; // code ở đây có thể sử dụng window.carName document.getElementById("demo").innerHTML = "I can display " + window.carName;//I can display Volvo
Code language:JavaScript(javascript)

Biến global được xác định bằng từ khóa  let  không thuộc về đối tượng window.

let carName = "Volvo"; // code ở đây có thể sử dụng window.carName document.getElementById("demo").innerHTML = "I can not display " + window.carName;//I can not display underfined
Code language:JavaScript(javascript)

Ví dụ về Redeclaring (khai báo trùng lặp)

Redeclaring một biến JavaScript với  var  là được phép ở bất cứ đâu trong chương trình:

var x = 2; // Now x is 2 var x = 3; // Now x is 3
Code language:JavaScript(javascript)

Redeclaring một biến kiểu let và var, trong cùng phạm vi, hoặc cùng block, là KHÔNG được phép:

var x = 2; // Allowed let x = 3; // Not allowed { var x = 4; // Allowed let x = 5 // Not allowed }
Code language:JavaScript(javascript)

Redeclaring một biến kiểu  let  với  let , trong cùng phạm vi, hoặc cùng block, là KHÔNG được phép:

let x = 2; // Allowed let x = 3; // Not allowed { let x = 4; // Allowed let x = 5; // Not allowed }
Code language:JavaScript(javascript)

Redeclaring một biến kiểu  let và var , trong cùng phạm vi, hoặc cùng block, là KHÔNG được phép:

let x = 2; // Allowed var x = 3; // Not allowed { let x = 4; // Allowed var x = 5; // Not allowed }
Code language:JavaScript(javascript)

Redeclaring một biến với  let , trong một phạm vi khác, hoặc một block khác, là được phép:

let x = 2; // Allowed { let x = 3; // Allowed } { let x = 4; // Allowed }
Code language:JavaScript(javascript)

Hoisting

Biến kiểu  var  sẽ bị hoisting và có thể được khởi tạo bất cứ lúc nào.

Thế nào là hoisting? Hoisting là cách JavaScript kéo tất cả các khai báo biến lên trên scope hiện tại.

console.log(carName);//not error,in ra underfined var carName = "Volvo";
Code language:JavaScript(javascript)

Sau khi hoisting đoạn code trên được viết lại như sau:

var carName; //khai báo được kéo lên trên cùng của scope này console.log(carName); //not error, in ra undefined carName = "Volvo";
Code language:JavaScript(javascript)

Biến kiểu  let  sẽ bị hoisting nhưng không được khởi tạo.

console.log(carName);// Error: không thể truy cập 'carName' trước khi khởi tạo let carName = "Vinfast";
Code language:JavaScript(javascript)

Kết luận về let và var

Trên đây là những kiến thức về biến let và var trong JavaScript, thông qua bài viết hi vọng các bạn sẽ biết cách khai báo biến một cách hợp lí hơn. 

Cảm ơn các bạn đã đọc bài viết, nếu các bạn thấy hay thì ủng hộ giúp mình, có bất kì ý kiến đóng góp gì thì mong các bạn để lại comment ở dưới để chúng ta cùng thảo luận.

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

CodeGym Full-stack

Leave a Reply

Your email address will not be published. Required fields are marked *