Hoisting trong JavaScript

Trong bài viết này chúng ta cùng tìm hiểu về khái niệm Hoisting trong Javascript nhé 🔥.

Hoisting là gì?

Hoisting trong Javascript hiểu một cách ngắn gọn thì nó là một cơ chế đưa tất cả các variables và function declarations lên trên cùng scope hiện tại, Nghĩa là bạn khai báo biến và hàm ở đâu thì mặc định sẽ được chuyển lên trên cùng bất kể chúng nằm trong phạm vi toàn cục hay cục bộ (global or local).

Đây chính là lí do khi bạn thực thi hàm ở trên phần khai báo hàm và nó vẫn chạy 😁.

Sau đây chúng ta sẽ cùng làm một vài ví dụ để hiểu rõ hơn nhé!

Hoisting variables

Mình sẽ dùng từ khóa var để khai báo biến sau và console.log để xem kết quả:

console.log(name); // Output: undefined

var name = 'John';

Bạn đoán thử xem kết quả sẽ thế nào? Mình nghĩ nhiều bạn đoán kết quả sẽ bị lỗi ReferenceError: name is not defined. Nhưng kết quả trả về lại là undefined 😯. Tại sao lại như vậy?

Đó là vì cơ chế Hoisting của Javascript:

Khi bạn chạy dòng code trên thì trình thông dịch sẽ đưa khai báo biến của chúng ta lên trên cùng scope.

var name;

console.log(name);

name = 'John';

Biến name sẽ được đưa lên trên cùng (Không bao gồm giá trị khai báo). Trong Javascript một biến không khai báo sẽ được gán giá trị undefined. Chính vì thế trong trường hợp này ta sẽ nhận được giá trị undefined từ biến name.

Chúng ta có thể sử dụng biến trước khi khai báo và biến được khởi tạo với giá trị là undefined.

Cách tốt nhất là chúng ta khai báo biến và khởi tạo giá trị khai báo trước khi sử dụng để tránh bị lỗi nhé 😁.

Let và Const

Từ khóa let và const nếu dùng trong trường hợp trên cũng sẽ được đưa lên đầu scope (hoisting). Nhưng nó sẽ không có giá trị khởi tạo undefined như var. Chính vì thế, nếu bạn sử dụng biến trước khi khai báo sẽ bị lỗi.

console.log(car); //Uncaught ReferenceError: Cannot access 'car' before initialization
let car = 'ferrari'; 

Class nếu dùng trong trường hợp trên cũng sẽ bị lỗi tương tự như let và const

Hoisting functions

Ta có 2 loại Functions đó là: function declarations và function expressions.

Function declarations

Function declarations in JavaScript are hoisted.

sayHi();
function sayHi() {
    alert('Hi!');
}

Khi sử dụng function declarations trong trường hợp trên, chúng ta có thể gọi sayHi() trước khi khai báo.

Function expressions

Function expressions in JavaScript are not hoisted.

Cùng xem một ví dụ sau:

car(); //Uncaught TypeError: car is not a function
var car = function () {
    console.log('lamborghini');
};

Trong trường hợp này, chúng ta sẽ nhận được lỗi Uncaught TypeError: car is not a function.

Vì từ khóa var is hoisted. Nên var car sẽ được đưa lên đầu scope và có giá trị undefined.

var car = undefined;
car();
car = function () {
    console.log('lamborghini');
};

Chính vì lí do này nên ta nhận được lỗi Uncaught TypeError: car is not a function.

Đối với từ khóa const và let mình đã nói ở trên. Khi sử dụng function expressions bằng 2 từ khóa này, phần khai báo sẽ hoisted và được đưa lên đầu scope. Nhưng chúng không có giá trị khởi tạo giống var là undefined nên sẽ xảy ra lỗi Uncaught ReferenceError: Cannot access 'car' before initialization.

Kết luận

Như vậy là chúng ta đã tìm hiểu xong khái niệm Hoisting trong Javascript rồi. Đây là một cơ chế khá hay đúng không nào 😁.

Hi vọng sau bài viết này chúng ta sẽ hiểu về Hoisting và từ đó sử dụng Hoisting variables và Hoisting functions sao cho hợp lí nhé.

Happy coding 🔥.