JavaScript

Khái niệm Hoisting trong JavaScript

Khái niệm Hoisting trong JavaScript
Được viết bởi Minh Hoàng

Series lập trình JavaScript, ngôn ngữ lập trình linh động, thực thi phía client.

Khái niệm Hoisting trong JavaScript

Hoisting là hành vi mặc định của JavaScript về việc di chuyển tất cả các khai báo lên đầu (top) của phạm vi hiện tại (current scope), nghĩa là lên top của chương trình JavaScript hiện tại hoặc hàm hiện tại.

1. Các khai báo JavaScript được Hoisted

1. Các khai báo JavaScript được Hoisted

– Trong JavaScript, một biến có thể được khai báo sau khi nó đã được sử dụng.

– Hay nói cách khác, một biến có thể được sử dụng trước khi nó được khai báo.

– Chính vì điều này mà 2 ví dụ bên dưới sẽ cho kết quả giống nhau:

Ví dụ 1:
[code language=”javascript”]x = 5; // Gán giá trị 5 cho x

elem = document.getElementById("demo"); // Tìm một element có id là "demo"
elem.innerHTML = x; // Hiển thị giá trị của x vào element này

var x; // Khai báo biến x[/code] Try it »

Ví dụ 2:
[code language=”javascript”]var x; // Khai báo biến x
x = 5; // Gán giá trị 5 cho x

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x; // Display x in the element[/code] Try it »

– Đối với biến khai báo bằng từ khóa let hoặc const thì sẽ không được Hoisted.
– Chi tiết xem thêm: Từ khóa let | Từ khóa const.

2. Các khởi tạo JavaScript không được Hoisted

2. Các khởi tạo JavaScript không được Hoisted

– JavaScript chỉ hoist các khai báo, chứ không hoist các khởi tạo.

– Chúng ta cùng xem xét 2 ví dụ sau:

Ví dụ 1:
[code language=”javascript”]var x = 5; // Khởi tạo x
var y = 7; // Khởi tạo y

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y[/code] Try it »

Ví dụ 2:
[code language=”javascript”]var x = 5; // Khởi tạo x

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y

var y = 7; // Khởi tạo y[/code] Try it »

– Ở ví dụ 1: y = 7, nhưng ở ví dụ 2: y = undefined. Bởi vì, ở ví dụ 2 chỉ khai báo biến y được hoisted lên top chương trình, còn việc khởi tạo giá trị (=7) cho biến y thì không được hoisted.

– Và cách viết sau cũng có ý nghĩa, kết quả tương tự như ví dụ 2 (y = undefined), vì khởi tạo của biến y không được hoisted lên top chương trình:

Ví dụ:
[code language=”javascript”]var x = 5; // Khởi tạo x
var y; // Khai báo y

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y

y = 7; // Gán giá trị 7 cho y[/code] Try it »

★ Nên khai báo biến trước khi sử dụng

Hoisting (đối với nhiều lập trình viên) là một hành vi có thể không biết hoặc bị bỏ qua khi làm việc với JavaScript. Nếu không hiểu về hoisting thì viết chương trình có thể có bugs (errors).

– Do đó, để tránh lỗi phát sinh không đáng có thì luôn khai báo biến trước khi chúng được sử dụng.

– Trong JavaScript, có chế độ “strict mode” không cho phép sử dụng các biến nếu chúng chưa được khai báo.
– Xem thêm: Strict Mode trong JavaScript là gì?

Cảm ơn bạn đã theo dõi. Đừng ngần ngại hãy cùng thảo luận với chúng tôi!

Giới thiệu

Minh Hoàng

Xin chào, tôi là Hoàng Ngọc Minh, hiện đang làm BrSE, tại công ty Toyota, Nhật Bản. Những gì tôi viết trên blog này là những trải nghiệm thực tế tôi đã đúc rút ra được trong cuộc sống, quá trình học tập và làm việc. Các bài viết được biên tập một cách chi tiết, linh hoạt để giúp bạn đọc có thể tiếp cận một cách dễ dàng nhất. Hi vọng nó sẽ có ích hoặc mang lại một góc nhìn khác cho bạn[...]

Translate »