Đang load dữ liệu
Hôm nay mình sẽ giới thiệu về hoisting trong Javascript, một vấn đề không còn mới nhưng với những ai mới bắt đầu với JS thì sẽ gặp nhiều khó khăn khi không hiểu rõ được bản chất vấn đề.
Về cơ bản thì khi Javascript Engine compile code của chúng ta, tất cả các biến được định nghĩa bằng toán tử var sẽ được hoisted/lifted lên phía trên scope hiện tại mà nó được định nghĩa, cụ thể là function nếu nó được định nghĩa trong function, và global scope nếu được định nghĩa bên ngoài function mà không có quan tâm đến vị trí ta khai báo.
Ví đơn giản như sau
|
1
2
3
4
5
|
someString = "myString";
console.log(someString);
var someString;
|
Theo bạn thì console.log sẽ in ra gì ?
Như được đề cập ở trên thì console sẽ in ra màn hình “myString”.
Định nghĩa biến someString được đưa lên đầu, ta có thể access và assign giá trị cho nó.
someString sẽ có giá trị undefined khi mới chỉ được hoisted.
Và các bạn nên phân biệt giữa null và undefined. Undefined là variable đã được declare nhưng chưa được assign giá trị, còn null là nonexist value.
Có thể bạn quan tâm
Tính năng ít được biết đến trong JavaScript
JavaScript Tip: Đặt tên function để debugging một cách dễ dàng hơn
|
1
2
3
4
|
console.log(someString);
var someString = "myString";
|
Console sẽ print ra undefined chứ không ra “myString” vì JS chỉ hoisting declaration của variable
Một Ví dụ đơn giản khác của hoisted function là như sau
|
1
2
3
4
5
6
7
8
9
10
|
var doSomething;
doSomething();
function doSomething() {
console.log('Money');
}
doSomething = function() {
console.log('Diamond');
}
|
Kết quả in ra màn hình sẽ là Money bởi: Chỉ phần declaration của doSomething được hoisted lên trên đầu, phần assign value cho doSomething( print ra diamond ) không được hoisted.
Arrow function và function expression không được javascript hoisted
|
1
2
3
4
5
6
7
|
doSomething()
somefunc()
const doSomething = function somefunc() {
console.log(123)
}
|
Nếu bạn chạy đoạn code trên thì sẽ có lỗi runtime somefunc, doSomething is not defined. Lý do bởi vì function expression không được Javascript hoisted
Chúng ta đã biết hoisting là gì, vậy hãy đoán xem kết quả của đoạn code sau là gì
|
1
2
3
4
5
6
7
8
9
10
|
function testHoisting() {
var test = "someString";
function test() {
return "String in function";
}
return test();
}
console.log(testHoiting());
|
Thoạt nhìn có lẽ sẽ đoán là print ra “String in function”. Nhưng thực tế khi run thì sẽ print ra Error test is not function. Bởi vì với multiple declaration trong cùng 1 scope(cả varaible và function) thì hoisting của variable bị ignore và đoạn code trên sẽ được JS engine thực hiện như sau
|
1
2
3
4
5
6
7
8
9
10
|
function testHoisting() {
function test() {
return "String in function";
}
test = "someString";
return test();
}
console.log(testHoiting());
|
Để hạn chế các vấn đề problem về phạm vi sử dụng scope của các variable, chúng ta có một số cách sau:
|
1
2
3
4
5
6
|
let one, two, three, four;
vs
let one;
let ...
|
Nguồn: Sưu tầm từ internet via Viblo
.png "Lập trình frontend với reacjs (Full)")