Deep Foundations of Advanced JavaScript - Kyle Simpson - Frontend Masters
ฝัง
- เผยแพร่เมื่อ 8 ก.ค. 2024
- frontendmasters.com/courses/j... - Join Kyle Simpson - author of the popular “You Don’t Know JavaScript” book series - as he reveals the deep foundations of JavaScript. You’ll learn about object wrappers, coercion, scope, closure, types, prototype system, ES6 features, == vs === and more.
Understand deeply how the JavaScript engine looks for variables in function and block scope (var, let and const). Learn which ES6 features can help or hurt your coding and which new features should be used with caution. Also why coercion is one of the overlooked keys to using JavaScript more effectively. With this course, you’ll see how gaining a deeper understanding of JavaScript will make you a better communicator and programmer!
Kyle Simpson’s Introduction 1:05
Lesson: Scopes and Closures Introduction 1:46
Lesson: IIFE Pattern 5:14
Full Course at frontendmasters.com/courses/j...
About Frontend Masters:
Founded in 2008, MJG International curates and hosts expert-level workshops for developers that want to learn the secrets to level up their JavaScript and Node.js engineering skills. The Frontend Masters platform distills these practical workshops into a growing, world-class video library accessible live online and on-demand.
Connect with Frontend Masters online:
frontendmasters.com/
/ frontendmasters
/ frontendmasters - วิทยาศาสตร์และเทคโนโลยี
...coz setimeout is Web Api..and Async stuff? And when callback inside settimeout is executing loop is already done and i is 6 ?
Thanks Kyle
Brilliant. Why didn't I see this before?
Me either 😂
He just simply summarised his book easily. I like this guy
I like him when he sticks to code.
When he starts going off on some woke bs I tune out.
The video ends in the most interesting part. :(
that's the whole point of any commercial product preview :)
I can explain it roughly I guess. See, Javascript internally works by a combination of stack, queues and priority queues. There's also a "register" (It's called something else but bear with me) that detects events, this register isn't a feature of JavaScript engine but is provided by the environment(browser or NodeJS). All your code eventually executes when it is inside the stack. Your synchronous code gets pushed into the stack immediately while your asynchronous code is sent to the queues and told to wait for the stack to be empty. The event loop controls the entire thing, it's kind of a complex topic so let's just stick to the example.
What's happening in the example is, the for loop code enters the stack, and all the setTimeout function calls are added to the queue. Since your for loop is synchronous, it enters the stack immediately and gets executed while the setTimeout function calls are sitting inside the queue, waiting for the for loop to end so the stack can be empty and they can enter the stack and get finally executed. By the time the stack becomes empty for the setTimeout calls, the value of i is already 6. That's why it prints 6. Even if you change the setTimeout time to 0, it would still end up printing 6. Because synchronous code enters the stack directly and gets executed whereas asynchronous code has to enter the queue and wait for the stack to become empty to be executed!
But you can find the answer here in this video :)
th-cam.com/video/-xqJo5VRP4A/w-d-xo.html
this is a commercial to buy their outdated product lol :D
@@plinplinplonplinplonplin thanks for this!
i learn SO much from this guy. i scour yt for his talks... brotha KNOW his JS!
My explanation for the last code. setTimeout is api function which belongs to browser. When we call setTimeout, it is the same to call an asnyc function. Therefore, for each run of the for loop, the program just calls setTimeout and continues to execute next run. It does not call the setTimeout callback right away. After the for loop, variable i becomes 6. Also, after for loop, callback functions in each setTimeout we already called start executing. Therefore, the result will be 6,6,6,6,6.
P/s: setTimeout second parameter indicates that a callback function will be fired after at LEAST that amount of time, not EXACTLY. For example, if second parameter of setTimeout is 2000, it guarantees that the callback will be executed after 2 second. It can be after 2.001s depending on when event loop start executing callback function.
This is just my explanation. May be right, or may be wrong or may be half and half. Feel free to correct me. I love learning from people
var a = []; for(var i = 0; i < 10; ++i) { a[0] = function X() { return i }; }; log(a[0], a[1], ...). This will return 10. Loop makes 10 closures, sharing the same vars a, i. Vars are bound to closure by reference (not by the value). Call to function X will check the local scope of function. As i is not defined there, it will try to find i in domain of closure and the current value of i is 10.
@@dragansmiljanic1403 inside the loop you were only setting a[0] to the function, how come you were able to log a[1]. I am just a beginner though forgive my curiosity.
@@rockokechukwu3343 Correct code var a = []; for(var i = 0; i < 10; ++i) { a[i] = function X() { return i }; }; console.log(a[0](), a[1](), a[9]()). Pls let me know is this understandable for you. Output will be 10, 10, 10
@@dragansmiljanic1403 Nice, I now get it.
what you missed is the way to fix this, you could do something like this.
for(let i = 0; i < 6; i++){
setTimeout(function(x=i){
console.log(x)
}, (i * 1000))
}
isn't closure the privatisation of variables a function inside a mothod?
Why this abrupt ending :o
At 12:2, is he Azat Mardan who asked the question?
If you want to destroy your nerves, just learn JavaScript. You can start using JavaScript after a couple of months, but you cant learn it for entire life! I am two years in JavaScript, and i am mad of my self because i don't know how stuff works under the hoods. But who cares... You don't need to know how mechanical parts working inside your car, but you still can be word rally champion in driving. :D
can we create 2 iife with the same name and in the same scope?
yes
When I ran the last code on Google chrome I got 0,1,2,3,4 but you are saying the code will produce 6,6,6,6,6?
What's going on?
Google Chrome may have a different implementation, but what we should do is concentrate on these concepts
Did you use let i = 0 in you for loop? I think the reason it prints 6 five times is the scope of var, var is a function wide variable, so the by the time the function actually gets fired (after 1 second), the loop will be over and var i will be equal to 6.
What's the difference between and IIFE function and anonymous function?
addHandler(function() { ... }) is example of anonymous function.
IIFE is a pattern (fn)(...) where typeof fn === 'function'. IIFE can use anonymous function as well as named.
You also need to know what is difference between function declaration or function expression (FE). An example of FE is const x = function y() { ... }. If you are using modern browser you won't "see" y in the "scope" (not exact name) where x is defined. y is bound as a local variable inside of function y so this can be used to write recursion. Hope this helps
IIFE can be not anonymous, an anonymous function can be not IIFE. Basically, these are two different categories of functions.
IIFE stands for immediately invoked function expression which is executed immediately. The benefit is that you do not need to type functionName() after it to invoke it the first time and what is much more important is you not polluting the outer scope.
An anonymous function is a function without a name. You use it if you have a need to use a specific function only once and there is no reusability of it. The benefit is simpler to write for you as a developer and what is much more important, you free up some space for the user so your app runs faster.
Kyle actually recommends naming your IIFEs so these two are kinda opposite in this regard.
At 10.49,.....could any one..discribe ...what is going on ...in that code..
My system ..is giving errors
Isn't the very last example in the video not solved with using let instead of var?
Yeah
Yes. Its solved. But this example is great to explain concepts like eventLoop, closures, hoisting, the event queue. And how scopes works, how variable data are stored internally, if they are keep in the call stack memory to die after exececution or stored in heap memory all long as needed. tricky question, but useful for teaching. It basically allow interviewers to see if the person actually does know javascript in depth
what is meant by polluting here?
Changing the values that global variables hold.
very nice
most of what he demo'd here could be replaced with the 'let' keyword introduced in 2015. It allows block-scope variables.
exactly what I thought. Using var is just bad practice now. Polluting scope isn't an issue anymore
@@ericc.5141 Kyle Simpson notoriously prefers to use var wherever he can get away with it. Even wrote a few blogs back in the day arguing that var is not obsolete.
Kyle is a way experienced developer, for all those newbies, replacing var for let works better.
You are the Most Powerful JavaScript Ally now. don’t tell crockford
I didn't know you could name IIFEs
You can also create it as a variable or an easy way would be
let foo = ( (param1) => { console.log(param1); } )( );
Hi!
Supposing you have some secret JavaScript functions that you don't want anyone to know. Also, that code (functions) are very resource consuming and this is why they need to be client side and not server side so you can't write those functions in python or php.
Also, obfuscation of JavaScript is not useful since it can be easily deobfuscated or seen by placing a breakpoint in the debugging tools in the browser.
This been said, could you make, please, a tutorial teaching us the best way to protect your secret JavaScript functions without paying for third party services?
Thank you so much in advance!
All code in the frontend will always be exposed.
JavaScript designers are drunk.
😂😂
hi is the best
(function XXX() console.log("where is the rest of this video?"))();
This is very simple concepts but the way you are explaining making it difficult to understand..
thats exactly what I thought lol
Part of trying to make people buy his material.
You're perfectly right please.
That's a common pattern which exists since 1000's of years among humans, Experts generally hate simple explanations, as that would reduce their importance and value in their society. So they tend to over value the details that are mostly useless and only known by a minority.
For anyone reading this comment, the reason his explanations come off this way at first is because he explains a lot of javascript concepts that you wouldn't necessarily (need to) know at first
Javascript is very accessible but the more you use it the more you realize it's doing some random bullshittery without your command under the hood.
What Kyle Simpson teaches is not only to avoid this random bullshittery from happening, but to turn it into weaponized bullshittery which will allow you to bend the language to your will
The "function" keyword is not necessary, nor even is the name of the function. This works just as well:
(() => {
//your code here.
})();
It's good idea to use a named function as it helps in debugging.
That's fucked up code I don't know if I would want to use that. I can't see any scenario where it would be ok to use something like this. The examples he gave weren't valid imo. I mean, JQuery? What is this, 2013?
Why is he talking in 3rd person at the beginning
it's a promotion... then they gave a part of his discussion...
"6 at the end of the loo-"
Who on earth are you having the nerve to say "you don't know JavaScript"? Do you know me, or all the JavaScript programmers out there? I don't think so. I would kindly advise you to have a more humble approach to the subject JavaScript. You are not the JavaScript God, remember that. I Have seen good people over the years disappeared because of pride and lack of humility, and they fell very deep and never came back. When I saw the title on your book, you don't know JavaScript, i think it disgusted many, but few of them had the courage to say it directly to you. You are not creating a good atmosphere when you have this attitude that you are the JavaScript God.
bro chill
I don't think that was the meaning of the title. The idea is that an extreme minority of people on earth can say they fully understand JavaScript from top to bottom. I would say most people who write JS code are coming from a front-end web development background, and you don't need to know ANY JavaScript at all in order to make perfectly decent website. So a very large group of people only learn the minimum amount of JS necessary to get their projects done. Simply put, most people who write JS code truly do not know JS in a deep way. And that is perfectly fine. But the journey of learning JS in a deep way begins with an acknowledgement that "you don't know JS." There is so much more to it than most people realize.
@@dupersuper1000It would have been nice to agree with you and say amen, but when I start listen to him I clearly hear an attitude that is totlally unhealthy to pass over to the younger generation. The younger generation should have have humble role models. Well that is my opinion. We can agree on one part, and that is that many needs to learn javascript the correct way.
Read the books. I had read about 6 books before I got to YDNJS. Much of it was repeated information I already know, but it certainly taught me a lot more than I already knew, much more than the weird parts, more than allonge, more than the node and jQuery books I read. I didn't know JS, now I do, Show some humility and realize that not everything is about you, Kyle is very humble, he is taking his time to teach people his mastery while you're bitching on the internet like a spoiled child.
Well, you don't know JavaScript.