%20cách%20hiệu%20quả.)
Người Viết : ViKiMi Editor
Sự khác biệt và cách phân biệt dễ dàng Let Variables với những cách khai báo khác của JS
Cách sử dụng biến trong JavaScript nếu là một điều khó khăn với bạn thì hãy giải quyết nó thật ngắn gọn. Việc sử dụng biến trong JavaScript rất đơn giản và nó ít những yêu cầu chặt chẽ như những ngôn ngữ khác. Nhưng vẫn cần phải dùng đúng cách, một trong những điều cần thiết đó là cách sử dụng biến khối let. Cách dùng đúng luôn hữu ích!
Cách sử dụng biến khối let thật đơn giản!
+ Một khối lệnh mà bạn muốn định nghĩa giúp giới hạn hoặc quản lý ngắn gọn những thứ liên quan tới nhau. Khối lệnh mà bạn thiết kế sẽ cho thấy rõ cách mà bạn có thể sử dụng với biến khối let.
+ Điều này thật đơn giản : Chúng ta chỉ cần tạo một khối lệnh với dấu { Khối lệnh thực thi tại đây }
Và tại đây đã có thể thấy rõ tính năng của biến khối let.
Những điều quan trọng khi bạn sử dụng biến khối let :
+ Các biến được khai báo với từ khoá let có phạm vi khối ( Nhưng bạn vẫn có thể sử dụng nó một cách bình thường nếu định nghĩa ngoài phạm vi một khối )
+ Các biến được khai báo với từ khoá let luôn yêu cầu khai báo trước khi sử dụng, nếu không khai báo sẽ có lỗi Reference-Error ( Nếu bạn sử dụng biến khai báo với từ khoá var thì điều này không có lỗi, đó là sự khác biệt )
+ Các biến được khai báo với từ khoá let không thể được khai báo lại trong cùng phạm vi một khối ( Nếu bạn sử dụng biến khai báo với từ khoá var thì điều này không có lỗi )
+ Các biến khối được khai báo với từ khoá let và thể hiện rõ đặc tính của nó trong khối { } mà các biến được khai báo tự động hoặc các biến khai báo với từ khoá var không có được.
Những trường hợp cụ thể để thấy cách hoạt động của biến khối :
A ] Trường hợp 1 :
Khi biến khối được khai báo với từ khoá let bên trong một khối thì phạm vi hoạt động của nó chỉ trong khối được khai báo.
<script>
{
/**
* Phạm vi hoạt động của biến a chỉ trong khối khai báo
*/
let a = 10;
}
/**
* Biến a sẽ không thể thể sử dụng bên ngoài phạm vi khối khai báo
*/
</script>
Tuy nhiên, đối với biến khai báo bằng từ khoá var thì điều này vẫn cho phép.
Và nó không gây ra bất kỳ lỗi gì, đó là được tính khác so với các biến khối được khai báo bằng từ khoá let
<script>
{
/**
* Phạm vi hoạt động của biến a là toàn cục
*/
var a = 10;
}
/**
* Biến a sẽ có thể thể sử dụng tại đây
*/
</script>
+ Tóm lại : Chúng ta thấy phạm vi hoạt động trong khối và phạm vi hoạt động toàn cục
Đó là cách mà JavaScript biên dịch một chương trình
B ] Trường hợp 2 : Nếu vô tình bạn có lập trình như bên dưới
Trong một phạm vi hoạt động chung hoặc cùng trong một phạm vi khối thì bạn không thể khai báo lại biến khối Let
<script>
/**
* Nếu bạn thực hiện như vậy sẽ gây ra lỗi vì thể khai báo lại
*/
let a = "Mặc định";
let a = 10;
</script>
Hoặc :
<script>
/**
* Nếu bạn thực hiện như vậy sẽ gây ra lỗi vì thể khai báo lại
*/
{
let a = "Mặc định";
let a = 10;
}
</script>
Tuy nhiên, đối với biến khai báo bằng từ khoá var thì điều này vẫn cho phép.
Và nó không gây ra bất kỳ lỗi gì
<script>
/**
* Điều này được phép
*/
var a = "Mặc định";
var a = 10;
</script>
C ] Trường hợp 3 :
+ Cách làm việc của biến khối Let sẽ chỉ gây ảnh hưởng trong phạm vi khối mà nó được khai báo. Bên ngoài khối được khai báo thì nó sẽ không gây ảnh hưởng
<!DOCTYPE html>
<html>
<body>
<h2> Khai báo lại và sử dụng biến khối Let </h2>
<p id="paragraph_01"></p>
<p id="paragraph_02"></p>
<script>
/**
* Tại đây phạm vi chung, Biến khối a được khai báo có giá trị 10
*/
let a = 10;
{
/**
* Tại đây phạm vi khối này,
* Biến khối a được khai báo lại có giá trị 2
*/
let a = 2;
/**
* Hiển giá trị của biến khối a tại thẻ p có id paragraph_02
* Giá trị hiện thị là 2, Giá trị trong phạm vi khối
*/
document.getElementById("paragraph_02").innerHTML = a;
}
/**
* Hiển giá trị của biến khối a tại thẻ p có id paragraph_01
* Giá trị hiện thị là 10, Giá trị trong phạm vi chung
*/
document.getElementById("paragraph_01").innerHTML = a;
</script>
</body>
</html>
+ Cách làm việc của biến var sẽ khác. 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 đó. Điều này làm giá trị của biến khai báo bằng từ khoá var sẽ thay đổi. Phạm vi hoạt động của biến var là toàn cục
<!DOCTYPE html>
<html>
<body>
<h2> Khai báo lại và sử dụng biến khai báo bằng từ khoá var </h2>
<p id="paragraph_01"></p>
<p id="paragraph_02"></p>
<script>
/**
* Tại đây phạm vi chung, Biến a được có giá trị 10
*/
var a = 10;
{
/**
* Tại đây phạm vi khối này,
* Biến a được khai báo lại có giá trị 2
*/
var a = 2;
/**
* Hiển giá trị của biến a tại thẻ p có id paragraph_02
* Giá trị hiện thị là 2
*/
document.getElementById("paragraph_02").innerHTML = a;
}
/**
* Hiển giá trị của biến a tại thẻ p có id paragraph_01
* Giá trị hiện thị sẽ là 2,
* Nguyên nhân là phạm vi hoạt động toàn cục của biến VAR
*/
document.getElementById("paragraph_01").innerHTML = a;
</script>
</body>
</html>
D ] Trường hợp 4 :
+ Các biến khối Let cho phép đưa lên đầu khối Script, nhưng buộc phải khai báo trước khi bạn muốn sử dụng sử dụng
Nếu không khai báo thì sẽ gây ra lỗi ReferenceError
<script>
/**
* Gây ra lỗi khi sử dụng
*/
a = "TinTuc";
let a = "Tin Moi Hon";
</script>
Hoặc :
Khi thực thi và sử dụng try catch để bắt lỗi.
Sẽ bắt được một lỗi và chương trình ném ra cho bạn.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Hoisting</h2>
<p>Hãy khai báo trước khi sử dụng, với biến Let</p>
<p id="display"></p>
<script>
try {
a;
let a = "Tin Tuc Moi";
}
catch(err) {
/**
* Bắt được lỗi tại đây
*/
document.getElementById("display").innerHTML = err;
}
</script>
</body>
</html>
+ Các biến var được đưa lên trên cùng và có thể được khởi tạo bất kỳ lúc nào. Điều này không gây ra lỗi !
<script>
/**
* Điều này được phép
*/
a = "TinTuc";
var a = "Tin Moi Hon";
</script>
Như vậy, chúng ta có thể thấy cách hoạt động của biến khối khai báo với từ khoá Let rất đơn giản. Tuy nhiên, nó lại mang hiệu quả tốt hơn khi bạn muốn quản lý một chương trình lập trình theo các chức năng, các chức năng quản lý bằng khối lệnh { } . Chương trình tường minh sẽ dễ dàng quản lý và bảo trì hơn.
+ Sử dụng biến khối Let thật hữu ích và nếu bạn không thể sử dụng Const thì biến Let là thay thế hợp lý.
