Hoisting trong Javascript [JAVASCRIPT]


Khái niệm "Hoisting" là gì trong javascript ? Ta xem ví dụ sau nhé:

var name = 'Duy';
console.log(name);

Ví dụ trên sẽ log ra "Duy". Cái này đơn giản phải không nào. Nhưng nếu ta viết lại như sau:

console.log(name);
var name = 'Trang';

Thì kết quả là "undefined". Thì tại sao lại như vậy ? Bởi vì javascript sẽ tự động đưa tất cả khai báo lên đầu như vậy "var name;" sẽ không có giá trị nên khi log ra sẽ thấy là "undefined";

var name;
console.log(name); // undefined

Thì việc đưa các biến khai báo lên đầu gọi là hoisting. Tương tự đối với function. Ta xem ví dụ sau:

function sayName(){
  console.log('Hello Mr D');
}

sayName(); // Hello Mr D

Ta khai báo 1 function trước sau đó gọi function này bằng sayName(). Thì hàm này sẽ in ra dòng thông báo "Hello Mr D". Còn nếu ta đảo ngược lại gọi hàm trước và khai báo sau thì như thế nào. Cùng xem nhé.

sayName(); // Hello Mr D
function sayName(){
  console.log('Hello Mr D');
}

Kết quả cũng tương tự như trên. Tại sao vậy ? Bởi vì hositing trong javascript sẽ đưa các khai báo biến hoặc fuction lên đầu, mặc dù hàm sayName ta khai báo sau, nhưng hoisting sẽ đưa hàm lên bên trên, nên ta gọi hàm sayName() thì chương trình được thực thi bình thường.

Còn nếu trường hợp ta khai báo như sau thì như thế nào ?

sayName();
var sayName = function sayName(){
  console.log('Hello Mr D');
}

Thì lúc này ta sẽ bị lỗi sau:

TypeError: sayName is not a function

Tại sao lại có lỗi "sayName is not a function". Bởi vì hoisting thấy khai báo biến "var sayName = ... " sẽ đưa biến này lên đầu và biến này không có giá trị.

var sayName;
sayName(); 

Vì vậy khi thực hiện dòng code gọi hàm sayName(), lúc này ta chỉ có biến sayName đâu có function sayName đâu nên sẽ báo lỗi "sayName is not a function". Như vậy khi muốn dùng function gán vào 1 biến thì ta phải gán trước rồi gọi hàm sau.

var sayName = function sayName(){
  console.log('Hello Mr D');
}

sayName(); // Hello Mr D

Như vậy ta đã hiểu cách dùng hoisting trong javascript rồi nhé. Cũng đơn giản phải không nào. ^_^