Mẹo Nhanh với JavaScript: Var, Let, Const và Hơn Thế Nữa

JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất ngày nay, và việc hiểu rõ cách sử dụng các biến là rất quan trọng. Trong bài viết này, chúng ta sẽ khám phá sự khác biệt giữa var, let, và const, cũng như những mẹo hữu ích khác.

Nội Dung

• 1. Var, Let và Const
• 2. Hàm Mũi Tên và Hàm Thông Thường
• 3. Cách Truy Cập Thuộc Tính: Notation Dấu Chấm và Dấu Ngoặc
• 4. Thực Hành Tốt
• 5. Những Cạm Bẫy Thường Gặp
• 6. Mẹo Tối Ưu Hiệu Suất
• 7. Giải Quyết Vấn Đề
• 8. Câu Hỏi Thường Gặp

1. Var, Let và Const

So Sánh Var, Let và Const

Hãy xem xét đoạn mã sau:

function sayHi() {
    console.log(name);
    console.log(age);
    var name = "Alex";
    let age = 24;
}
sayHi();

Khi bạn chạy hàm này, đầu ra sẽ là:

• undefined
• ReferenceError

Giải Thích

Biến được khai báo bằng var sẽ được hoisted lên đầu scope của nó trong giai đoạn biên dịch. Điều này có nghĩa là JavaScript tạo một không gian bộ nhớ cho biến trước khi mã được thực thi, nhưng không gán giá trị ngay lập tức. Thay vào đó, biến sẽ được khởi tạo với giá trị undefined. Vì vậy, khi chúng ta log name trước khi gán giá trị, chúng ta thấy undefined thay vì lỗi.

Ngược lại, biến được khai báo bằng let và const cũng được hoisted, nhưng điểm khác biệt chính là chúng không được khởi tạo tự động. Chúng vẫn ở trong trạng thái đặc biệt gọi là Temporal Dead Zone (TDZ) cho đến khi dòng mã thực sự gán giá trị cho chúng. Nếu bạn cố gắng truy cập chúng trong khu vực này, JavaScript sẽ ném ra một ReferenceError.

Tóm Tắt:

• var → hoisted và được khởi tạo với undefined ngay lập tức.
• let & const → hoisted nhưng không được khởi tạo (TDZ) cho đến khi mã thực thi đến khai báo của chúng.

2. Hàm Mũi Tên và Hàm Thông Thường

Ví Dụ Đoạn Mã

const square = {
    sideOfSquare: 10,
    area() {
        return this.sideOfSquare * this.sideOfSquare;
    },
    perimeter: () => this.sideOfSquare * 4
};
console.log(square.area()); // 100
console.log(square.perimeter()); // NaN

Giải Thích

• Hàm Thông Thường (area): Khi bạn sử dụng một hàm thông thường bên trong một đối tượng, this sẽ tham chiếu đến chính đối tượng đó. Điều này có nghĩa là this.sideOfSquare sẽ đúng và trả về 10, vì vậy kết quả của area() là 100.
• Hàm Mũi Tên (perimeter): Hàm mũi tên không có this riêng của nó. Thay vào đó, nó sử dụng giá trị this từ phạm vi bên ngoài, mà thường là phạm vi toàn cục. Trong trường hợp này, hàm mũi tên được tạo bên trong đối tượng, nhưng this mà nó nắm bắt không phải là đối tượng đó – mà là phạm vi toàn cục.

Tóm Tắt:

• Sử dụng hàm thông thường khi bạn cần this tham chiếu đến đối tượng.
• Sử dụng hàm mũi tên khi bạn muốn giữ nguyên this từ phạm vi bên ngoài (ví dụ: trong các callback).

3. Cách Truy Cập Thuộc Tính: Notation Dấu Chấm và Dấu Ngoặc

Ví Dụ Đoạn Mã

const bird = { size: "small" };
const mouse = { name: "Mickey", small: true };

Ta có thể thực hiện như sau:

mouse[bird.size]; // true
mouse[bird["size"]]; // true

Điều không đúng là cố gắng:

mouse.bird.size; // undefined

Tóm Tắt:

• Notation Dấu Chấm: Khóa phải tồn tại như một thuộc tính.
• Notation Dấu Ngoặc: Khóa có thể là một biến hoặc biểu thức giải quyết thành tên thuộc tính.

4. Thực Hành Tốt

• Luôn khai báo biến với let hoặc const thay vì var để tránh các vấn đề hoisting.
• Sử dụng hàm mũi tên trong các callback để giữ nguyên this.
• Kiểm tra kỹ các thuộc tính khi truy cập chúng bằng notation dấu chấm.

5. Những Cạm Bẫy Thường Gặp

• Cẩn thận với các biến trong TDZ, điều này có thể gây ra lỗi không mong muốn.
• Khi sử dụng hàm mũi tên, hãy chắc chắn rằng bạn hiểu cách this hoạt động trong ngữ cảnh của nó.

6. Mẹo Tối Ưu Hiệu Suất

• Sử dụng const cho các biến không thay đổi để tăng độ rõ ràng và hiệu suất.
• Tối ưu hóa mã của bạn bằng cách tránh sử dụng các hàm mũi tên trong các vòng lặp lớn khi không cần thiết.

7. Giải Quyết Vấn Đề

Khi gặp phải lỗi ReferenceError, hãy kiểm tra xem bạn có đang truy cập biến trước khi nó được khai báo không. Sử dụng console.log để kiểm tra giá trị của các biến tại các điểm khác nhau trong mã.

8. Câu Hỏi Thường Gặp

Q: Sự khác biệt giữa let và const là gì?
A: let cho phép bạn thay đổi giá trị của biến, trong khi const không cho phép thay đổi giá trị sau khi đã gán.

Q: Tại sao tôi thấy NaN khi sử dụng hàm mũi tên?
A: Bởi vì hàm mũi tên không có this riêng và nó tham chiếu đến phạm vi bên ngoài, có thể không có thuộc tính mà bạn đang cố gắng truy cập.

Kết Luận

Bài viết này đã cung cấp cho bạn những mẹo nhanh về cách sử dụng var, let, và const, cùng với một số khái niệm nâng cao hơn về hàm mũi tên và các phương pháp truy cập thuộc tính. Hãy thử nghiệm với các đoạn mã và áp dụng những kiến thức này vào dự án của bạn ngay hôm nay!

Để tìm hiểu thêm về JavaScript, hãy tham khảo tài liệu chính thức và thực hành nhiều hơn nữa!