Video học lập trình mỗi ngày

Hoisting javascript là gì? Đây là một vấn đề mà nhiều developers nói với tôi là họ cảm thấy khó hiểu Hoisting trong javascript. Mặc dù có rất nhiều bài viết về vấn đề này nhưng chưa đủ để họ hiểu và không biết thật sự Hoisting có nên tồn tại trong javascript hay không?

Để giải thích nhanh gọn trong 1 phút cho devjs thì tips and tricks javascript muốn bạn phải hiểu về về khai báo hàm và biểu thức hàm trước tiên. Hay còn gọi là function expressions và function declarations

Function expressions và function declarations

Trên đây là có hai cách để tạo một function đó là sử dụng function expressions và function declarations Với function declarations thì bạn khai báo bắt đầu là function operator, sau đó gán cho nó một cái tên như ví dụ dưới đây:

// Function declaration
function add(num1, num2) {
	return num1 + num2;
}

Còn với function expressions thì bạn tạo một variable sau đó gán cho nó với một anonymous function như ví dụ sau đây:

// Function expression
var add = function (num1, num2) {
	return num1 + num2;
};

Nhưng khi một file javascript compiled thì bất ngờ xảy ra thì Function declaration luôn được nâng lên hay như định nghĩa trên thì javascript sẽ di chuyển các khai báo lên đầu, còn function expression thì không? Vậy chính xác Hoisting trong javascript là gì?

Hoisting javascript là gì?

Hoisting thật ra rất dễ hiểu chứ không như cái từ của nó. Hoisting là hành vi mặc định của JavaScript về việc di chuyển các khai báo lên đầu để compiled hay thực thi code của bạn. Giải thích thêm cho anh em devjs một chút nữa. 

Khi một file javascript compiled bởi browser, nhưng trước khi nó thực sự executed thì Function declaration sẽ được stored in memory và được đẩy lên nhưng chính xác ta vẫn nhìn nó vẫn ở vị trí cũ. Và khi javascript file thực sự run thì browser thực sự đã biết những function đó trước khi đọc code của file javascript. 

Điều đó chứng minh rằng có vẻ Function declaration được đẩy lên vị trí hoisted trên file, nhưng nó vẫn ở vị trí cũ. Xem một ví dụ để kết thúc bài hướng dẫn về hoisting javascript

// This was hoisted, so it works
// returns 6
add(3, 3);
function add(num1, num2) {
	return num1 + num2;
};


// This was not, so it doesn't
// returns Uncaught TypeError: subtract is not a function
subtract(7, 4);
var subtract = function (num1, num2) {
	return num1 - num2;
};

Hoisting javascript tốt hay xấu

Thật ra câu trả lời này khó, nó tuỳ theo nhiều hoàn cảnh, tuỳ theo code, và chức năng của mỗi chúng ta. Nhưng ở quan điểm cá nhân tipjs thì tipjs đồng quan điểm với tác giả. 

Đó là tipjs nghĩ là sự xuất hiện Hoisting có thể dẫn đến code của mỗi chúng ta cẩu thả và phá vỡ cấu trúc rất nhiều. Nhưng nếu có sự xuất hiện của Hoisting ES6. Nhiều người thích điều đó cho phép họ viết code của họ từ trên xuống theo cách mà họ thấy dễ đọc hơn. 

Cá nhân tipjs thích code theo kiểu unction expression, vì nó tạo vẻ thân thiện hơn và nó mang lại một file có nhiều cấu trúc hơn. Một hướng dẫn nhỏ cho các bạn nếu chưa hiểu Hoisting javascript la gì? 

Câu hỏi, kết quả thế nào của code dưới đây

var salary = "1000$";

(function () {
  console.log("Original salary was " + salary);

  var salary = "5000$";

  console.log("My New Salary " + salary);
})();

Kết qủa:

Original salary was undefined
My New Salary 5000$

Đây chính là hoisting trong javascript, điều đó co nghĩa là salary không được đẩy lên cho nên line đầu tiên = undefined. Có thể chúng ta sẽ viết lại cho các bạn hiểu:

var salary = "1000$";

(function () {
  var salary = undefined;
  console.log("Original salary was " + salary);

  salary = "5000$";

  console.log("My New Salary " + salary);
})();

Chính xác hoisting javascript là vậy

Ref: gomakethings