Hoisting trong Javascript | JavaScript nâng cao
HTML-код
- Опубликовано: 19 сен 2024
- 👉 Xem Lộ Trình Học: fullstack.edu....
👉 Đăng Ký Học Offline Tại F8: short.f8team.d...
Ở video tiếp theo này mình sẽ cùng các bạn tìm hiểu về khái niệm Hoisting trong Javascript | JavaScript nâng cao
Hoisting cũng có thể được coi là khái niệm cơ bản trong Javascript. Tuy nhiên khái niệm này chưa phù hợp để đưa vào khóa cơ bản vì:
- Các bạn sẽ thường thấy nhiều bài thử thách rất khó cho người mới khi áp dụng hoisting
- Để hiểu đúng đắn về hoisting thì không phải người mới học nào cũng dễ dàng làm được
- Theo mình, để "lean" cho người mới thì nên loại bỏ những kiến thức chưa cần thiết phải học trong khóa cơ bản
Trên là những lý do tại sao mình đưa hoisting vào khóa JS nâng cao. Chúc các bạn học tập vui vẻ!
#hoclaptrinh #hoclaptrinhmienphi #javascript #javascript_advanced #frontend #backend #devops #f8
-------
☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: s.net.vn/D8kL
Công cụ viết CV xin việc chuyên nghiệp: mycv.vn
--------------
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: fullstack.edu....
Xây dựng giao diện với HTML, CSS: fullstack.edu....
Xây dựng web responsive: fullstack.edu....
Lập trình Javascript cơ bản: fullstack.edu....
Lập trình Javascript nâng cao: fullstack.edu....
Làm việc với Terminal & Ubuntu: fullstack.edu....
Xây Dựng Website với ReactJS: fullstack.edu....
Xây dựng web với Node & Express: fullstack.edu....
HTML, CSS tips: fullstack.edu....
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu....
Xem thêm tại: fullstack.edu....
-------------------------------------
F8 Official
(c) Sơn Đặng
Website: fullstack.edu.vn
Facebook cá nhân: / sondnf8
Nhóm Học Lập Trình Web: / f8official
Email: contact@fullstack.edu.vn
© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.
*Lưu ý:* Biến được khai báo với var & function declaration được khai báo trong code block sẽ được hoisted phần hàm trong chính block đó và hoisted tên hàm ra ngoài block.
// Ví dụ 1:
console.log(sum) // undefined
{
sum(1, 2) // 3
function sum(a, b) {
return a + b
}
}
// Ví dụ 2:
sum(1, 2) // sum is not a function
{
function sum(a, b) {
return a + b
}
}
Hoisting là đặc tính của ngôn ngữ luôn tồn tại khi bạn code rồi, học để hiểu về cách hoạt động của ngôn ngữ. Với function declaration thì nó giúp bạn có thể sử dụng được trước khi khai báo đó. Với var, let, const thì học để hiểu cách hoạt động, khi code thì ko ai đi dùng biến trước khi khai báo cả (gây khó đọc code - người đọc khó hiểu).
*Anh em thấy chất lượng video như này đã ổn hơn chưa? Có cần cải thiện gì nữa không? Mong nhận thêm góp ý từ anh em 😍*
Quá tuyệt vời rồi anh
Quá chất lượng luôn anh.
biết ngay mà. Thấy cái mic rồi nha :)
thêm vài ví dụ nữa là ngon anh ạ. Tổng quan thì perfect
tuyệt vời anh ơi
mong ngóng từng video của anh, rất rất yêu anh
Hay quá anh, nhiều khi mình biết cách nó hoạt động nhưng chưa hiểu được bản chất vấn đề, nhờ video của anh mà em được hiểu nhiều hơn
Coi đến phần này hay này, kiếm thêm mấy ví dụ nữa là hiểu thêm nè. Cảm ơn bạn nhiều
video rất hay anh ạ, vừa có tâm vừa có tầm là anh.
mong anh cho thật nhiều những ví dụ lời khuyên thực tế để có thể áp dụng khi đi làm. Em học hết từ anh, em chuẩn bị xin đi thực tập mà cứ thấy mình biết ít quá :(((
video đỉnh anh ơi, mà a đừng thức khuya qá, dạo này thấy anh ốm hơn thì phải.
Cảm ơn em nha.
Chào mng, anh Sơn cho em hỏi:
arrow function không được hoist, sao function c khai báo sau function a, mà function a vẫn gọi được function c bên trong
const a= ()=>{
c()
}
const c=()=>{
console.log('run c')
}
a()
Thời điểm gọi a() thì hàm c đã được khai báo rồi mà em
Cảm ơn anh đã chia sẻ :D
Anh ơi, có lịch ra video không anh, cho tụi em xin mà hóng với anh :D
giờ đã hiểu lý do tại sao cần phải có hosting rồi. cảm ơn anh đã chia sẻ
làm về typescript đi anh
Video rất hay ạ
Video chi tiết quá, cảm ơn a Sơn.
em cảm ơn anh nhé
background mới xịn quá anh
Every failure is a lesson learned😁😁😁
Hay quá , thế mới là hảo hán
Anh cho em hỏi là nếu const, let cũng được hoisting thì tại sao trường hợp này lại không chạy được.
a=1;
let a;
console.log(a)
Vì trong bài giới thiệu ES6 về let, const em nhớ anh nói là let, const không được hỗ trợ hoisting.
Thanks anh.
Trong khoá cơ bản a có note ở phần ghi chú là vì là khoá cơ bản nên a k đề cập tới việc hoisting của let và const nên tạm coi nó là ko hosting cho đơn giản. Còn điều e thắc mắc a giải thích trong video rồi mà. Vì nó nằm ở temp dead zone nên đc hosting vẫn k xài đc e. Nó hosting nhằm mục đích có mặt trong scope thôi e
@@F8VNOfficial Tại em hiểu theo anh nói là khi được hoisting, vì nó k mang giá trị trên nó bị đẩy vào Temp Dead Zone, nhưng bản chất là em có gán giá trị thì mặc định nó vẫn bị đẩy vào Temp Dead Zone đúng k ạ.
@@imlava5464 Theo mình biết thì: Một biến trong chương trình khi được sử dụng sẽ phải trải qua 2 giai đoạn: (1) khai báo và (2) khởi tạo. Ở đây khai báo là bạn sẽ ghi ra là let a; sau khi biến được khai báo xong thì mình mới có thể khởi tạo giá trị cho biến đó. a = 1; Đối với const và let vẫn được hosting, lúc này các biến kiểu const, let trước khi được khai báo và khởi tạo thì nó sẽ được đưa vào vùng TDZ, lí do được hoisting là JS sẽ throw ra 1 error "Cannot user xxx before it initialization" vì nó detect được biến đó có tồn tại trong phạm vi đó nhưng chưa được khởi tạo để thoát khỏi vùng TDZ
chắc học cách js thực thi mới hiểu được cách anh nói ,
Cảm ơn anh Sơn
Hay a ơi, ra nhiều video nữa a nhé (y)
Em cảm ơn anh ạ
hoisting với var và function đưa phần khai báo lên trên đầu phạm vi và được khởi tạo giá trị mặc định là undefine
let va const có được hoisting lên nhưng mà nó không mang giá trị và sẽ được đưa vào vùng không truy cập được
hay quá a ơi
video bổ ích ạ
Tuyệt vời!
cho em hỏi là học cái này để làm gì ạ, hay chỉ phục vụ cho việc trả lời phỏng vấn thôi
Hi anh Sơn,
var fullName = "nguyen van a"
{
console.log(fullName)
var fullName = "ngyen van b"
}
E có đoạn code này cho e hỏi sao lúc e chạy nó lại ra là "nguyen van a"
Theo e học thì trong scope thì var fullName phải là undefined.Mong a trả lời giúp e !
Lưu ý: Biến được khai báo với var & function declaration được khai báo trong code block sẽ được hoisted phần hàm trong chính block đó và hoisted tên hàm ra ngoài block. A sơn có lưu ý như này k biết có đúng ý b muốn giải thích khum =))
Mn cho mk hỏi có nên hk c++ trc để có tư duy k ạ hay học luôn js trc cx đc ạ
luôn js gây lú bạn lên quất c++ trc để hiểu rõ cách hoạt động và làm quen vs lập trình và có tư duy nhé
Thêm currying nữa a ơi
anh ơi, em viết đoạn này nhưng chạy ra hai kết quả khác nhau, đọc tài liệu em thấy nó thích giải thích v từ khoá this của các hàm javascript.info/arrow-functions#arrows-have-no-arguments
const matchs = (object1, object2) => {
return Object.keys(object2).every(key =>
object1.hasOwnProperty(key) && object1[key] === object2[key]
);
}// true
const matches = function (object1, object2) {
return Object.keys(object2).every(function (key) {
object1.hasOwnProperty(key) && object1[key] === object2[key]
})
}// false
const user = {
name: 'tay dang',
age: 20,
address: 'vn',
phone: '123456'
}
const info = {
address: 'vn',
phone: '123456'
}
console.log(matches(user, info))
bỏ cái thói code tắt đi là hiểu tại sao
trời ạ, cái hàm matches() ông phải return kết quả là true hay false thì bên ngoài nó mới nhận được chứ. Còn hàm matchs() thì dùng arrow function kiểu trực tiếp mà không dùng {} như vậy là nó return luôn cho ông rồi
Kết luận: 1 hàm có return và 1 hàm ko có return, bảo sao kết quả nó không khác.
Cho em hỏi, lúc 10:34 nếu function increase được hoist lên đầu như vậy thì tại sao `++counter` lại không phải là 'dùng trước khi khai báo' và `counter` không được hoist lên ạ? Em đã nghĩ nó sẽ ra lỗi không thể truy cập vì chưa khai báo (temp dead zone) cơ:V
Đoạn đó ++counter nằm trong hàm khác mà em, thời điểm gọi hàm là sau khi biến counter được khai báo.
Anh ơi giờ anh hiểu chưa ạ
Hiểu rồi dạy cho em với
anh cho e hỏi, vậy thứ tự của các biến,hàm sau khi hoisting là như thế nào ạ, có phải cái khai báo cuối sẽ ở trên đầu tiên phạm vi đúng không ạ.
function declaration nằm dưới var e nhé
Hi anh, em gặp câu hỏi này nhưng chưa nghĩ ra tại sao output là...
function bigBrother(){
function littleBrother() {
return 'it is me!';
}
return littleBrother();
function littleBrother() {
return 'no me!';
}
}
bigBrother();
Có 2 hàm declaration trùng tên (littleBrother) nhau em, hàm số 2 nó khai báo sau nên khi hoisted nó nằm dưới nên ưu tiên hơn. Hàm declaration có thể khai báo nhiều hàm trùng tên, cái mới nhất sẽ ưu tiên hơn. Cái này hình như anh nói từ JS cơ bản rồi mà.
@@F8VNOfficial thanks anh ạ, em đi xem lại!
Trong bài "hiểu hơn về function" ý em nhé
Video rất hay và trực quan.
Great video!, thanks alot!
Ok la rồi anh
Anh Sơn cho em hỏi là tại sao ô cam anh không để vuông mà để tròn vậy anh :v
Vuông chiếm nhiều diện tích hơn e ơi
7:23 why is the "undefined"?
như anh nói thôi cái này nó là khai báo ra giống hois của var và đưa vào bộ nhớ ý còn let trc khi sd thì đưa vào dead zone (tạm thời k thể sử dụng)
let vs const thì nó như kiểu trình biên dịch nó tưởng thăng ăn trộm nó phát hiện đc ra và ném vào phần nghi ngờ trong bộ não nhưng chưa chắc chắn lên chưa nói ra
@@tranuchieu1718 ok, i see
Trong C va C++ co hoisting k nhi mn ?
không nha bạn. bắt buộc phải khai báo biến hoặc hàm trước thì mới được gọi hay thao tác.
Không có đâu bạn ơi.
Hello anh em 2k9
rất hay anh ạ