Thắc mắc về hoisting trong js

console.log(myName); // undefined
console.log(demo); // undefined
show(); //Hello everybody

var myName = "this is name";
function show(){
    console.log("Hello everybody");
}

var demo = function () {
    console.log("this is function anonymous");
};

console.log(myName); // this is name
demo(); // this is function anonymous
show(); //Hello everybody

Ok mình cảm thấy hoisting đang rất dễ hiểu

console.log(name); // this is name
console.log(demo); // undefined
show(); //Hello everybody

var name = "this is name";
function show(){
    console.log("Hello everybody");
}

var demo = function () {
    console.log("this is function anonymous");
};

console.log(name); // this is name
demo(); // this is function anonymous
show(); //Hello everybody

Giờ thì mình không hiểu vì sao lại như thế?
Update…
Trong quá trình vừa viết câu hỏi vừa check code để tìm câu trả lời mình đã phát hiện ra 1 điều. Vâng. Nói ra chắc sẽ có bạn nói rằng cảm ơn bạn đã nói những điều ai cũng biết hoặc đại loại thế, nhưng mình cứ viết ra đây để tự bản thân mình nhớ lâu hơn.
Đại khái là nó thế này, như ở đoạn code đâu tiên thì hoisting là khá rõ dàng khi mà cosole.log(myName) thứ nhất sẽ cho ra kết quả là undefinedconsole.log(myName) thứ hai sẽ cho ra kết quả là this is name.
Còn ở đoạn code tiếp theo thì console.log(name) thứ hai sẽ cho kết quả là this is name điều này dễ hiễu rồi, còn console.log(name) thứ nhất vẫn có kết quả là this is name thì đúng là hoisting có vấn đề. Bạn nào tìm hiều về hoisting sẽ thấy.
Mình đang học tới hoisting và cảm thấy thật ngu người khi kết quả hiển thị là như vậy. Có xóa đi viết lại vẫn thấy thế cho tới khi mình bỏ hẳn biến var name mà thay bằng tên khác thì mới phát hiện ra là khi bạn tạo 1 file.js và thực thi nó trong file.html thì trình duyệt sẽ luôn khởi tạo trong đối tượng hay con trỏ(mình không biết chính xác nó là gì) this một key có tên là name và có giá trị mặc đinh là "" một giá trị falsey (rất tiện khi dùng nó làm codition). Một khi lỡ đặt tên một biến nào đó có tên là name và gán giá trị cho nó thì (tất nhiên là đã thực thi code) thì trình duyệt sẽ luôn lưu giữ giá trị đó dành cho key name của this dù cho sau đó ta có xóa đoạn code khai báo biến đó thì giá trị mà ta khai báo cho name luôn tồn tại cho tới khi ra tắt tab trình duyệt đang thực thi đoạn mã js đó.
Liên hệ lại với đoạn code mình post lên định để hỏi thì vì mình đã khai báo var name = "this is name". Thế nên là dù mình có xóa đi làm lại hay dựa vào hoisting để suy đoán thì cũng luôn luôn sai.
Kinh nghiệm rút ra là mình sẽ không đặt tên biến trong js là name nữa vì vốn dĩ nó đã tồn tại và có value. Còn về hoisting thì ok nếu không có cái name thì mình đã kết thúc phần tìm hiểu về nó và nhảy qua cái khác rồi chứ đã không post bài này định hỏi ngu nữa.
Mình sẽ post video lên và lưu ý rằng mình chỉ test trên chrome bản mới nhất còn những trình duyệt khác thì mình không biết. Cũng vì đang tập tành học js cho nó theo xu hướng nên bài post này có gì sai mong mọi người góp ý chứ đừng chửi. Còn gì nữa không nhỉ??? Thôi có còn thì cũng post vào replly.


Cảm ơn.

1 Like

Bạn tìm google khóa js của frontendmaster do Kyle Simpson giảng dậy nhé, có khá nhiều khóa nhưng đợt đấy mình down khóa này rất toàn bộ các vấn đề trong js. Nếu mình nhớ k nhầm thì là khóa này, xong khóa này thấy js dễ nhằn hơn nhiều https://www.pluralsight.com/courses/advanced-javascript

Cá nhân mình thấy trò hoisting này là cái ngu của js, đã là ngôn ngữ thông dịch thì cứ định nghĩa và thực thi theo thứ tự hết đi, định nghĩa rồi mới thực thi là đặc trưng của ngôn ngữ biên dịch. Đã thông dịch mà cứ phải chơi khôn để coder phải nhồi cái kiến thức không đâu vào đầu :fearful:

Share được không bạn?

Mình mới chỉ học js thôi nên chẳng biết được nhưng cảm thấy bạn nói cũng đúng thật =]]. Về sau hi vọng sẽ tìm hiểu được những cái hay ho của hoisting để không thấy nó ngu nữa.

js thì nổi tiếng cùi bắp, hoisting chỉ là một phần, nếu học lấy nền tảng mình k khuyên học js. Vụ hoisting này lên phiên bản mới thay = let với const hết rồi, không lo nữa đâu.

Còn về tài liệu thì bạn google free 3 months pluralsight vscode hoặc google tên khóa học rồi tải torrent nhé.

Bạn có thể giải thích giúp mình ý này được không? Cảm ơn

https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch1.md#whats-in-an-interpretation

JS source code is parsed before it is executed. The specification requires as much, because it calls for “early errors”—statically determined errors in code, such as a duplicate parameter name—to be reported before the code starts executing. Those errors cannot be recognized without the code having been parsed.

https://www.ecma-international.org/ (LAG)

7 Likes

“code javascript được parsed trước khi nó được thực thi”. Cho mình hỏi hành động parsed là gì? Cụ thể phân tích cú pháp là làm gì? Có phải do engine V8 của google parse không hay cái gì parse? chữ này mình gặp nhiều rồi mà không hiểu. Cảm ơn

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?