Hướng dẫn hoisting trong javascript

Là một vấn đề cản bước rất nhiều lập trình viên nắm giữ JavaScript. Hoistring là gì? Hoisting hoạt động như thế nào? Cùng theo dõi bài viết với mình nhé.

1. Hoisting là gì?

Hôi à không hoisting là cơ chế của JavaScript cho phép các khai báo biến hoặc hàm được dời lên trên đầu phạm vi của chúng trước khi thực thi đoạn code.

Điều này có nghĩa là bất kể hàm và biến được khai báo ở đâu, chúng đều được chuyển lên đầu phạm vi của chúng, bất kể là toàn cục hay cục bộ.

> Lưu ý: Là cơ chế này chỉ di chuyển phần khai báo mà thôi còn các phần khác giữ nguyên không đụng gì đến nó hết.

1.1. Hành vi hoisting đối với biến

Trong JavaScript, ta có thể sử dụng biến trước khi khai báo nó, như thế này:

// Gán cho chuỗi NIIT cho biến thuongHieu

thuongHieu = "NIIT";

// Sử dụng biến thuongHieu

console.log(thuongHieu);

// Khai báo thuongHieu

var thuongHieu;
 

Kết quả:

Và JavaScript chỉ lưu trữ các khai báo, không lưu trữ các khởi tạo:

// Khai báo và khởi tạo biến thuongHieu

var thuongHieu = "NIIT";

// In ra thông tin biến

console.log(thuongHieu + " thành lập năm: " + namThanhLap);

// Khai báo và khởi tạo biến namThanhlap

var namThanhLap = 2002;
 

Nếu như bạn nghĩ kết quả nhận được: NIIT thành lập năm: 2002 thì xin lỗi...

Kết quả nhận được như thế này cơ:

NIIT thành lập năm: undefined
 

Bởi vì, ngay khi chạy chương trình thì JavaScript sẽ thực hiện khai báo một lượt các biến chưa sử dụng là lưu trữ nó.

Tuy nhiên, các biến này dù có được bạn khởi tạo thì JavaScript trước tiên vẫn gán cho nó giá trị mặc định là undefined.

Để hiểu hoạt động của hoisting đối với biến thì hãy cùng tìm hiểu tiếp ví dụ:

console.log(message);

var message = "Lập trình JavaScript căn bản";

}

hoi();
 

Kết quả ta được:

Tại sao hồi nãy nói là hoisting sẽ chuyển phần khai báo lên trên đầu phạm vi khi thực thi mà nó lại ra kết quả undefined?

Thực ra thì nó chuyển phần khai báo như này nè:

var message;

console.log(message);

message = "Lập trình JavaScript căn bản";

}
 

Như bạn đã biết, khi khai báo biến mà không gán dữ liệu thì mặc định nó có giá trị là undefied

Như vậy thì khi thực thi chương trình:

• Phần khai báo sẽ được chuyển lên đầu hàm hoi()

• Nhưng phần gán giá trị sẽ không được chuyển nên khi in ra sẽ là in ra undefined.

Các bạn lưu ý phần này nhé.

Để tránh những trường hợp như vậy xuất hiện về sau thì bạn nên khai báo và khởi tạo cùng một lúc như sau:

// Vừa khai báo, vừa khởi tạo

// trước khi sử dụng

var message = "Lập trình JavaScript căn bản";

console.log(message);

}

hoi();
 

1.2. Hành vi hoisting đối với hàm

Đối với hàm thì chúng ta biết là trong JavaScript có hai dạng hàm đó là khai báo hàm (function declarations) và biểu thức hàm (function expression).

> Quên thì xem lại bài Hàm trong JavaScript ngay

+ Đối với Khai báo hàm:

Mình vẫn sẽ lấy ví dụ hàm hoi() để các bạn tiện theo dõi. Đối với khai báo hàm thì hành vi hoisting cũng giống như biến JavaScript.

Việc khai báo sẽ được chuyển lên trên đầu.

// Gọi hàm trước khi khai báo

hoi();

// Khai báo hàm

function hoi() {

var message = "Lập trình JavaScript căn bản";

document.write(message);

}
 

Hàm trên tương đương với:

function hoi() {

var message = "Lập trình JavaScript căn bản";

document.write(message);

}
 

// Gọi hàm sau khi khai báo

hoi();
 

Như vậy thì chúng ta có thể hiểu đơn giản là cũng như biến, hàm khai báo cũng sẽ được gọi trước khi chúng ta đăng ký hàm đó.

Đó chính là cơ chế hoisting.

+ Đối với Biểu thức hàm:

Đối với biểu thức hàm ngược lại.

Vì biểu thức hàm bản chất là hàm được gán cho một biến. Do đó, nó cũng giống như vừa khai báo và vừa khởi tạo biến.

Thế nên, cơ chế hoisting không áp dụng cho biểu thức hàm.

Ví dụ:

hoi();

// Khai báo, khởi tạo biểu thức hàm

var hoi = function() {

var message = "Lập trình JavaScript căn bản";

document.write(message);

};
 

Kết quả trình biên dịch JavaScript sẽ ném lỗi vào mặt bạn:

Uncaught TypeError: hois is not a function
 

Đối với cách khai báo và sử dụng như dưới đây cũng không được chấp nhận:

hois();

hoi();
 

// Biểu thức hàm

var hois = function hoi() {

var message = "Lập trình JavaScript căn bản";

document.write(message);

};
 

2. So sánh thứ tự ưu tiên trong cơ chế hoisting

2.1. Gán biến ưu tiên hơn khai báo hàm

Trong cơ chế hoisting, phép gán biến nó sẽ có độ ưu tiên cao hơn khai báo hàm:

<html>

<body>

<script>

// Khai báo và khởi tạo biến message

var message = "Đây là biến chuỗi";

// Khai báo hàm message (trùng tên)

function message() {

document.write("Đây là hàm");

}
 

//in ra kiểu của message

document.write(typeof message);

script>

body>

html>
 

Khi chạy trên trình duyệt, ta sẽ được kết quả là string.

Điều này chứng to việc cố gắng ghi đè biến message bằng Khai báo hàm đã không thành công.

2.2. Biểu thức hàm ưu tiên hơn gán biến

Ta cố tính khai báo và khởi tạo một biến message.

Sau đó lại tạo ra một biểu thức hàm có tên là message.

<html>

<body>

<script>

// Khai báo biến

var message = "Đây là biến";

// Khai báo hàm

var message = function() {

document.write("Đây là hàm");

}

//in ra kiểu của message

document.write(typeof message);

script>

body>

html>
 

Trong trường hợp Khai báo hàm thì kết quả là string.

Còn khi là Biểu thức hàm như ví dụ này thì sao?

Khi chạy trên trình duyệt ta có kết quả: function

2.3. Khai báo hàm ưu tiên hơn khai báo biến

Trong cơ chế hoisting, nó phép khai báo hàm có độ ưu tiên cao hơn khai báo biến, ví dụ:

DOCTYPE html>

<html>

<body>

<script>

// Khai báo biến

var message;
 

// Khai báo hàm

function message() {

document.write("Đây là hàm");

}
 

//in ra kiểu của message

document.write(typeof message);

script>

body>

html>
 

Kết quả sẽ in ra là function, chứng tỏ khai báo hàm ưu tiên hơn là khai báo biến.

3. Đối phó với vấn đề hoisting như thế nào?

Bởi vì cơ chế hoisting khiến chúng ta quản lý code JS khá là khó khăn.

Và khó có thể hiểu được thực sự vấn đề đang gì xảy ra nếu bạn quản lý một dự án lớn, phức tạp.

Và để đối phó với vấn đề này cũng khá đơn giản.

• Cách #1: Bạn phải hiểu rõ về nó (Cách này hơi hơi khó thì phải :v)

• Cách #2: Hạn chế hành vi hoisting

Để hạn chế hành vi hoisting trong JavaScript bạn chỉ cần bật chế độ use strict.> Đọc thêm: Strict Mode trong JavaScript

Hoặc sử dụng từ khóa let hoặc const khi khai báo bất kỳ một biến nào.

Mặc dù biến khai báo bằng từ khóa let hoặc const vẫn được đưa lên trên đầu. Nhưng nó không cho phép sử dụng cho đến khi được khai báo.

Bởi vì, khi sử dụng biến let hoặc const trước khi nó được khai báo ngay lập tức dẫn đến một lỗi ReferenceError.

// Sử dụng trước khi khai báo

console.log(thuongHieu);

// Khai báo biến sử dụng từ khóa let

let thuongHieu;
 

Kết quả:

Uncaught ReferencError: Cannot access 'thuongHieu' before initialization
 

Vì thế, bạn không thể sử dụng biến một cách lung tung được.

Đi vào nề nếp, quy tắc thì sau đó bạn không cần phải nhớ bạn đã làm gì.

Cứ theo quy tắc để mà lần ra thôi.

> Ghi chú: Vấn đề này sẽ không gặp phải đối với một ngôn ngữ chặt chẽ như JAVA. Bởi vì ngay từ đầu JAVA đã được thiết kế để dành cho những dự án lớn, thiết kế tốt cho việc duy trì, mở rộng dự án trong tương lai. HỌC JAVA ngay nếu bạn thích những thứ gì chặt chẽ, quy củ.

Tổng kết

Như vậy là hôm nay mình đã giúp bạn tìm hiểu về hoisting trong JavaScript. Đây là một vấn đề rất quan trọng, hiểu và nắm giữ nó thì bạn mới biết thực sự JavaScript hoạt động như thế nào.

Việc nắm bắt hoisting trong JS cũng khá khó. Nhưng hãy luyện tập, THỬ - SAI để ngộ ra dần dần bạn nhé.

Hẹn gặp lại bạn ở bài học tiếp theo.