Tận hưởng sức mạnh của JavaScript Let - JavaScript Let Variable

  • Như

    Tác giả

    Như

  • Ngày đăng

    25 thg 10, 2023

  • Số lượt xem

    1018 lượt xem

Khám phá khả năng mạnh mẽ của JavaScript Let Variable. Bài viết này sẽ dẫn bạn qua một hành trình sâu rộng về cách sử dụng biến 'let' trong JavaScript.

Từ khóa let được giới thiệu trong ES6 (2015)

Các biến được xác định bằng let không thể được khai báo lại

Các biến được xác định bằng let phải được khai báo trước khi sử dụng

Các biến được xác định bằng let có Phạm vi khối

Không thể khai báo lại

Các biến được xác định bằng let không thể được khai báo lại.

Bạn không thể vô tình khai báo lại một biến được khai báo bằng let.

Với let bạn không thể làm điều này:

let x = "John Doe";
let x = 0;

 

Nhưng với var bạn có thể:

var x = "John Doe";
var x = 0;

 

Phạm vi khối

Trước ES6 (2015), JavaScript có Phạm vi toàn cầu và Phạm vi hàm.

ES6 đã giới thiệu hai từ khóa JavaScript mới quan trọng: let và const.

Hai từ khóa này cung cấp Phạm vi khối trong JavaScript.

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

{
  let x = 2;
}
// x can NOT be used here

 

Các biến được khai báo bằng từ khóa var KHÔNG được có phạm vi khối.

Các biến được khai báo bên trong khối {  } có thể được truy cập từ bên ngoài khối.

{
  var x = 2;
}
// x CAN be used here

 

Khai báo lại biến

Việc khai báo lại một biến bằng từ khóa var có thể gây ra vấn đề.

Khai báo lại một biến bên trong một khối cũng sẽ khai báo lại biến bên ngoài khối đó:

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

 

Khai báo lại một biến bằng từ khóa let có thể giải quyết được vấn đề này.

Khai báo lại một biến bên trong một khối sẽ không khai báo lại biến bên ngoài khối:

 

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

 

Sự khác nhau giữa var, let và const

  Phạm vi Khai báo lại Gán lại Hoisted Binds this
var Không Có Có Có Có
let Có Không Có Không Không
const Có Không Không Không Không

 

Ưu điểm

let và const có phạm vi khối.

let và const không thể được khai báo lại.

let và const phải được khai báo trước khi sử dụng.

let và const không liên kết với this.

let và const không được di chuyển lên đầu phạm vi trước khi chúng được thực thi.

Khuyết điểm

var không cần phải khai báo.

var được được di chuyển lên đầu phạm vi trước khi chúng được thực thi.

var liên kết với this.

Trình duyệt hỗ trợ

Từ khóa let và const không được hỗ trợ trong Internet Explorer 11 trở về trước.

Bảng sau xác định các phiên bản trình duyệt đầu tiên được hỗ trợ đầy đủ:

chrome edge firefox safari opera
Chrome 49 Edge 12 Firefox 36 Safari 11 Opera 36
Mar, 2016 Jul, 2015 Jan, 2015 Sep, 2017 Mar, 2016

 

Khai báo lại

Việc khai báo lại một biến JavaScript bằng var được phép ở bất kỳ đâu trong chương trình:

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

 

Với let, KHÔNG được phép khai báo lại một biến trong cùng một khối:

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

 

Khai báo lại một biến bằng let, trong một khối khác, được phép:

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

 

Hoisting

Các biến được xác định bằng var được đưa lên trên cùng và có thể được khởi tạo bất kỳ lúc nào.

Nghĩa là bạn có thể sử dụng biến trước khi nó được khai báo:

carName = "Volvo";
var carName;

 

Nếu bạn muốn tìm hiểu thêm về hoisting, hãy nghiên cứu bài JavaScript Hoisting.

Các biến được xác định bằng let cũng được đưa lên đầu khối nhưng không được khởi tạo.

Vì thế sử dụng biến let trước khi nó được khai báo sẽ dẫn đến lỗi ReferenceError:

Bài trước Bài kế tiếp

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về Javascript