Hoisting

Hoisting

"Hoisting là gì?" là một câu hỏi thường gặp khi chúng ta đi phỏng vấn. Hãy cùng khảo sát ví dụ bên dưới (Ví dụ 1):

b();

function b() {
    console.log('Called b!');
}

Output: Called b! 

Mặc dù ta gọi hàm b trước khi nó được khai báo nhưng chương trình vẫn chạy bình thường mà không báo lỗi

Tiếp tục một ví dụ khác (Ví dụ 2):

console.log(a);

var a = 'Hello World!';

Output: undefined

Ta có thể truy xuất biến a trước khi nó được khai báo.
Hoisting: Là bởi vì cơ chế hoạt động của JavaScript mà ta có thể truy xuất biến hoặc gọi hàm trước khi chúng được khai báo.

Giải thích cơ chế hoạt động

Như bài trước mình có đề cập, js engine sẽ tạo ra execution context khi một nhóm lệnh được thực thi (có thể là một hàm được gọi), mỗi execution context sẽ trải qua hai giai đoạn: creation phase và execution phase.
Creation phase: Trước khi code được thực thi js engine sẽ duyệt qua các khai báo biến, hàm và thiểt lập vùng nhớ cho chúng. Đối với biến, js engine sẽ gán cho một giá trị đặc biệt undefined.
Execution phase: Giai đoạn này mới là giai đoạn thực thi từng lệnh một. Và lúc này hàm/ biến đã được chuẩn bị sẵn trước đó có thể được thực thi bình thuờng mà không bị lỗi gì cả.
Đọc đến đây có lẽ bạn đã có thể giải thích hai ví dụ trên một cách dễ dàng rồi phải không.
Ok bây giờ bạn hãy thử đoán kết quả của ví dụ sau nhé:

console.log(a);

Output: ?

=> Chương trình sẽ lỗi bởi vì tại execution phase js engine không tìm thấy khai báo của biến a trong bộ nhớ.

Good practice: Undefined là một giá trị/từ khoá đặc biệt của js engine thế nên chúng ta không nên sử dụng giá trị này để gán cho biến trong chương trình, điều này sẽ có ích cho việc debug lỗi, nếu ta dùng undefined bừa bãi sẽ không thể phân biệt được giá trị của biến bị undefined là do chưa được gán giá trị hay do chính chúng ta đã gán.
Hãy cùng thảo luận bên dưới comment bạn nhé - Sound off on the comment...

Tài liệu tham khảo

1. Understanding the Weird Parts - Tony Alicea