Hoisting trong javascript là một khái niệm liên quan đến hoán đổi thứ tự của các khai báo biến và hàm từ vùng khai báo sang vùng đầu tiên của chương trình. Trong javascript, các khai báo biến sẽ được hoisting lên đầu của vùng khai báo, và các khai báo hàm sẽ được hoisting lên đầu của chương trình. Điều này có nghĩa là, chúng ta có thể sử dụng một biến hoặc hàm trước khi nó được khai báo.
Các bài viết liên quan:
Ví dụ:
console.log(x); // undefined
var x = 5;
console.log(add(2, 3)); // 5
function add(a, b) {
return a + b;
}Trong trường hợp trên, biến x và hàm add đã được hoisting lên đầu của chương trình nên chúng ta có thể sử dụng trước khi khai báo
Chú ý rằng hoisting chỉ diễn ra với khai báo hàm và khai báo biến bằng var, nếu sử dụng let hoặc const thì khai báo sẽ không hoisting.
Tại sao nên sử dụng Hoisting ?
Sử dụng hoisting trong javascript có thể giúp cho mã dễ đọc và dễ hiểu hơn bởi vì nó cho phép chúng ta sử dụng một biến hoặc hàm trước khi nó được khai báo. Điều này có thể giúp cho việc xây dựng các chương trình javascript dễ dàng hơn và giảm thiểu các lỗi do việc sử dụng một biến hoặc hàm trước khi nó được khai báo.
Bên dưới là cụ thể hơn những lợi ích của hoisting trong javascript:
- Giúp cho việc đọc và hiểu mã dễ dàng hơn: Hoisting cho phép chúng ta sử dụng một biến hoặc hàm trước khi nó được khai báo, giúp cho việc đọc và hiểu mã trở nên dễ dàng hơn.
- Giảm thiểu các lỗi do việc sử dụng một biến hoặc hàm trước khi nó được khai báo: Hoisting giúp cho việc sử dụng một biến hoặc hàm trước khi nó được khai báo trở nên an toàn hơn, giảm thiểu các lỗi có thể xảy ra.
- Tăng tính khả dụng của mã: Hoisting cho phép chúng ta sử dụng một biến hoặc hàm ngay cả trong các hàm con, tăng tính khả dụng của mã.
- Tăng tính gọn gàng của mã : Hoisting giúp chúng ta gọn gàng hơn trong việc đặt tên biến và hàm vì chúng ta không cần quan tâm đến vị trí của chúng trong mã.
- Tăng tính bảo mật: Hoisting cho phép chúng ta khai báo biến ở trên cùng của chương trình, giúp tăng tính bảo mật cho chương trình và giảm xung đột.
Sử dụng Hoisting trong javascript như thế nào ?
Sử dụng hoisting trong javascript là một quá trình tự động và không cần thiết lập bất kỳ thiết lập nào. Hoisting xảy ra mặc định khi chúng ta khai báo một biến hoặc hàm trong mã javascript.
Ví dụ :
console.log(x); // undefined var x = 5;
Trong ví dụ trên, javascript engine sẽ tự động hoisting biến x lên đầu của vùng khai báo, cho phép chúng ta sử dụng x trước khi khai báo
console.log(add(2, 3)); // 5
function add(a, b) {
return a + b;
}Trong trường hợp trên, javascript engine sẽ tự động hoisting hàm add lên đầu của chương trình, cho phép chúng ta sử dụng hàm trước khi khai báo
Như vậy chúng ta không cần thiết lập bất kỳ thiết lập gì để sử dụng hoisting.
Khi nào nên sử dụng Hoisting ?
Khi sử dụng hoisting trong javascript, chúng ta nên sử dụng nó khi muốn sử dụng một biến hoặc hàm trước khi nó được khai báo. Điều này có thể giúp cho việc xây dựng các chương trình javascript dễ dàng hơn và giảm thiểu các lỗi do việc sử dụng một biến hoặc hàm trước khi nó được khai báo.
Tuy nhiên, chúng ta cần chú ý đến việc hoisting có thể gây ra sự rối mắt trong việc đọc và hiểu mã, đặc biệt là khi chương trình có nhiều hàm và biến. Vì vậy, khi sử dụng hoisting, chúng ta cần chú ý đến việc chia sẻ không gian để tránh những lỗi có thể xảy ra.
Cần chú ý rằng hoisting chỉ áp dụng cho các biến và hàm khai báo bằng cách sử dụng từ khóa var và function chứ không áp dụng cho let và const
Một số ví dụ cụ thể khi sử dụng Hoisting trong javascript.
Cơ bản:
- Ví dụ về hoisting biến:
console.log(x); // undefined var x = 10; console.log(x); // 10
Trong ví dụ này, biến x được hoisted lên trên cùng của chương trình và gán giá trị là undefined từ đầu.
- Ví dụ về hoisting hàm:
foo(); // "Hello, world!"
function foo() {
console.log("Hello, world!");
}Trong ví dụ này, hàm foo được hoisted lên trên cùng của chương trình và có thể gọi được ngay cả trước khi nó được khai báo.
- Ví dụ về hoisting trong hàm:
function example() {
console.log(x); // undefined
var x = 10;
console.log(x); // 10
}
example();Trong ví dụ này, biến x được hoisted lên trên cùng của hàm example và gán giá trị là undefined từ đầu.
- Ví dụ về hoisting trong block scope:
if (true) {
console.log(x); // ReferenceError
let x = 10;
console.log(x); // 10
}Trong ví dụ này, hoisting không áp dụng cho let và const
do đó nó sẽ báo lỗi “ReferenceError” khi chúng ta sử dụng x trước khi khai báo nó.
Những ví dụ trên chỉ là các ví dụ cơ bản để giúp cho bạn hiểu hoisting trong javascript, có thể có nhiều trường hợp khác khi bạn
Nâng cao
- Ví dụ về hoisting trong closure:
function outer() {
var x = 10;
return function inner() {
console.log(x); // 10
}
}
var closure = outer();
console.log(x); // ReferenceError
closure();Trong ví dụ này, biến x được hoisted lên trên cùng của hàm outer và truy cập được từ trong closure.
- Ví dụ về hoisting với từ khóa new:
var obj = new Foo();
console.log(obj.x); // 10
function Foo() {
this.x = 10;
}Trong ví dụ này, hàm Foo được hoisted lên trên cùng của chương trình và có thể sử dụng với từ khóa new để tạo ra đối tượng mới với thuộc tính x có giá trị là 10.
- Ví dụ về hoisting với arrow function:
var example = () => {
console.log(x); // ReferenceError
let x = 10;
console.log(x); // 10
}
example();Trong ví dụ này, arrow function không hoist biến nên sẽ báo lỗi khi sử dụng trước khi khai báo.
Các ví dụ trên chỉ là một số ví dụ nâng cao về hoisting trong javascript, có thể có nhiều trường hợp khác khi bạn sử dụng hoisting trong các ứng dụng thực tế.
Kết luận
Trong javascript, hoisting là một tính năng mà biến và hàm được “nâng lên” trên cùng của chương trình trước khi chương trình thực thi. Điều này có nghĩa là bạn có thể sử dụng biến hoặc hàm một cách tự do trước khi khai báo chúng trong chương trình của bạn.
Sử dụng hoisting có thể giúp cho việc viết mã trở nên dễ dàng hơn và dễ hiểu hơn, nhưng cũng có thể gây ra các vấn đề về phạm vi và phản ứng không mong muốn nếu không được sử dụng chính xác.
Các bạn nên hiểu hoisting và sử dụng chúng một cách chính xác để tránh các lỗi và tối ưu hóa việc sử dụng chương trình.
