Thứ Năm, Tháng Bảy 7, 2022
HomeWikiBiến Kiểu Let Và Var Toàn Tập Trong Javascript

Biến Kiểu Let Và Var Toàn Tập 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 biến khai báo dùng let và biến khai báo dùng var là gì, thì ở bài viết này chúng ta sẽ cùng tìm hiểu .

ECMAScript 2015

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

Những biến được khai báo bên ngoài bất kể một hàm sẽ có khoanh vùng 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
}

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

Biến được khai báo cục bộ ( bên trong một hàm ) sẽ có khoanh vùng 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

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

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

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

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

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

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

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 var và let 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
}
function myFunction() {
  let carName = "Volvo";   // Function Scope
}

Global Scope

Biến được khai báo với var và let 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
let x = 2;       // Global scope

Biến Global trong HTML

Với JavaScript, khoanh vùng phạm vi toàn cục là thiên nhiên và môi trường JavaScript .
Trong HTML, khoanh vùng phạm vi toàn cục là đối tượng người tiêu dù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

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

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

Redeclaring một biến kiểu var với let, 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
}

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
}

Redeclaring một biến kiểu let với 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
}

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
}

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";

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";

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";

Lời kết

Trên đây là những kiến thức về biến let và biến 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 những bạn đã đọc bài viết, nếu những bạn thấy hay thì ủng hộ giúp mình, có bất kể quan điểm góp phần gì thì mong những bạn để lại comment ở dưới để tất cả chúng ta cùng đàm đạo .
Nguồn tìm hiểu thêm : w3schools

Source: https://entechgadget.com
Category: Wiki

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Bài viết hay nhất

DANH MỤC WEBSITE