JavaScript - let Statement: A Beginner's Guide

Xin chào, các bạn học lập trình! Hôm nay, chúng ta sẽ cùng tìm hiểu một trong những khái niệm quan trọng nhất trong JavaScript hiện đại: câu lệnh let. Là một giáo viên khoa học máy tính gần gũi, tôi ở đây để hướng dẫn bạn trong hành trình này, từng bước một. Vậy, hãy chuẩn bị đồ uống yêu thích của bạn, ngồi thoải mái, và cùng bắt đầu cuộc phiêu lưu thú vị này nhé!

What is JavaScript let statement? (Câu lệnh let trong JavaScript là gì?)

Câu lệnh let là cách để khai báo biến trong JavaScript. Nhưng đợi đã, biến là gì, bạn hỏi? Hãy nghĩ về biến như một bình chứa giữ một mảnh thông tin. Giống như bạn có thể sử dụng một hộp để lưu trữ những món đồ chơi yêu thích của mình, chúng ta sử dụng biến để lưu trữ dữ liệu trong các chương trình của mình.

Hãy xem một ví dụ:

let myName = "Alice";
console.log(myName); // Output: Alice

Trong đoạn mã này, chúng ta đang tạo một biến叫做 myName và lưu giá trị "Alice" vào trong nó. Sau đó, chúng ta sử dụng console.log() để hiển thị giá trị của myName.

Từ khóa let được giới thiệu trong ES6 (ECMAScript 2015) và bây giờ nó là cách được ưa thích để khai báo biến trong JavaScript. Nó giống như cậu bé mới cool trên phố, thay thế từ khóa cũ var trong nhiều trường hợp.

Why use let? (Tại sao sử dụng let?)

1. Block scope (chúng ta sẽ tìm hiểu sâu hơn về này sớm)
2. Ngăn chặn việc khai báo lại không chủ ý
3. Giúp viết mã sạch hơn, dễ dự đoán hơn

JavaScript Block Scope vs. Function Scope (Kích thước block so với kích thước hàm trong JavaScript)

Bây giờ, hãy nói về một trong những siêu năng lực của let: kích thước block. Để hiểu điều này, chúng ta cần biết block là gì trong JavaScript.

Một block là một đoạn mã được bao quanh bởi dấu ngoặc CURLY {}. Điều này có thể là thân của một câu lệnh if, một vòng lặp for, hoặc một hàm.

Hãy xem một ví dụ để thấy sự khác biệt giữa kích thước block (let) và kích thước hàm (var):

function scopeExample() {
if (true) {
var functionScoped = "I'm function scoped";
let blockScoped = "I'm block scoped";

console.log(functionScoped); // Output: I'm function scoped
console.log(blockScoped);    // Output: I'm block scoped
}

console.log(functionScoped); // Output: I'm function scoped
console.log(blockScoped);    // Error: blockScoped is not defined
}

scopeExample();

Trong ví dụ này, functionScoped (được khai báo với var) có thể truy cập được suốt toàn bộ hàm, ngay cả ngoài block if nơi nó được khai báo. Mặt khác, blockScoped (được khai báo với let) chỉ có thể truy cập được trong block if.

Hành vi này của let giúp ngăn chặn sự rò rỉ biến không mong muốn và làm cho mã của chúng ta dễ dự đoán và dễ hiểu hơn. Nó giống như có một hang động bí mật chỉ bạn biết!

Redeclaring Variables in JavaScript (Khai báo lại biến trong JavaScript)

Một sự khác biệt quan trọng khác giữa let và var là cách chúng xử lý việc khai báo lại. Hãy xem một ví dụ:

var x = 1;
var x = 2; // This is allowed

let y = 1;
let y = 2; // This will throw an error

console.log(x); // Output: 2

Với var, bạn có thể khai báo cùng một biến nhiều lần mà không gặp lỗi nào. Điều này có thể dẫn đến hành vi không mong muốn và lỗi khó追踪.

Mặt khác, let không cho phép khai báo lại trong cùng một phạm vi. Nếu bạn cố gắng khai báo một biến với let đã được khai báo trong cùng một phạm vi, JavaScript sẽ ném ra một lỗi. Điều này giúp phát hiện lỗi sớm và làm cho mã của chúng ta robust hơn.

Tuy nhiên, điều quan trọng cần lưu ý là bạn vẫn có thể gán lại giá trị cho biến được khai báo với let:

let z = 1;
console.log(z); // Output: 1

z = 2;
console.log(z); // Output: 2

Điều này cho phép chúng ta cập nhật biến của mình khi cần thiết, trong khi vẫn ngăn chặn việc khai báo lại không chủ ý.

Variable Hoisting (Lifting biến)

Cuối cùng, hãy nói về hành vi lifting. Lifting là một hành vi trong JavaScript nơi các khai báo biến và hàm được di chuyển lên đỉnh của phạm vi tương ứng của chúng trong phase biên dịch, trước khi mã được thực thi.

Đây là nơi let hành xử khác với var:

console.log(x); // Output: undefined
var x = 5;

console.log(y); // Error: Cannot access 'y' before initialization
let y = 5;

Biến được khai báo với var bị lifting và được khởi tạo với undefined, trong khi biến được khai báo với let bị lifting nhưng không được khởi tạo. Điều này có nghĩa là nếu bạn cố gắng sử dụng một biến được khai báo với let trước khai báo trong mã, bạn sẽ gặp lỗi.

Hành vi này của let giúp ngăn chặn một nguồn lỗi phổ biến và làm cho mã của chúng ta dễ dự đoán hơn. Nó giống như có một mạng an toàn bắt chúng ta khi chúng ta vô tình cố gắng sử dụng một biến trước khi chúng ta đã thiết lập nó đúng cách.

Methods and Properties (Phương thức và Thuộc tính)

Dưới đây là bảng tóm tắt một số phương thức và thuộc tính phổ biến liên quan đến khai báo biến trong JavaScript:

Method/Property	Description
let	Khai báo một biến có kích thước block
const	Khai báo một hằng số có kích thước block
var	Khai báo một biến có kích thước hàm hoặc toàn cục
window.variableName	Truy cập một biến toàn cục (khi sử dụng var trong phạm vi toàn cục)
Object.freeze()	Ngăn chặn việc thay đổi thuộc tính của một đối tượng
Object.seal()	Ngăn chặn việc thêm mới thuộc tính vào một đối tượng

Nhớ rằng let và const có kích thước block, trong khi var có kích thước hàm. const giống như let, nhưng nó không cho phép gán lại giá trị sau khi khai báo.

Tóm lại, câu lệnh let là một công cụ mạnh mẽ trong JavaScript hiện đại giúp chúng ta viết mã sạch hơn, dễ dự đoán hơn. Bằng cách hiểu và sử dụng let hiệu quả, bạn đang bước một bước lớn để trở thành một nhà phát triển JavaScript thành thạo. Hãy tiếp tục thực hành, giữ vững sự tò mò, và chúc bạn may mắn trong việc lập trình!

Credits: Image by storyset