One fun note: generators are the foundation of async/await syntax. Under the hood, when you create an async/await function, the JS engine creates a recursive generator where all the awaits are converted into yields, and the promises you're awaiting get a .then tacked on which calls the generator's next() method. Without generators, async/await wouldn't be possible :)
@@whoman7930 Look up the "co" module. It's on npm. Look at its source on github. That's how it works. The module "co" is a weird early version of doing async/await before async/await existed.
@@whoman7930 It is rumored that high up in the mountain valley there is a guru. One who has been trained in the ancient arts. The journey is perilous but those who reach him are blessed with the gift of his knowledge. Good luck.
That dynamic import part was mindblowing. I can see it being useful when you're making API calls to refresh the data of an application. There are many instances where the source is only updated weekly or monthly so instead of making API calls with every load. You could do some date checking first and then refresh the data if it is out of date. Great stuff as always Kyle!
Fun fact: Einstein was a socialist who supported the Soviet Union. I'm not using the word socialism the way right wingers use it. I mean he literally called himself a socialist. He even wrote a book called "Why Socialism"
Cool video, just a slight bugbear of mine: doesn't make it more semantic, if anything you made it less semantic. Stick with in that context. Strong doesn't simply make the text bold, it strongly emphasizes it.
I get ragged on constantly for talking too fast; once I taped a kind of infomercial and they needed four takes at one point to get useful footage because even me purposely slowing myself down left them clueless at how to make me clearly enunciate. So I really appreciate that I can hear and understand you perfectly fine at 2x speed. It saves me time but also means that you're not losing people like I am with my meandering babble speed.
Nice Video Kyle! Enjoyed it like most of them! 5:40 The in operator also looks at the prototype chain. Using object_name.hasOwnProperty(property_name) will search only for that property within the object. But in operator will search for the property within the object and if not found will search the prototype chain. In certain cases we need to consider that.
In the generator you could have just done `yield id++` since the ++ executes after the yield statement. You probably already know this but just in case, you can also reverse that syntax (`yield ++id`) to ensure the ++ executes *before* the yield statement :)
Template literal functions is really useful. I wish I knew before because I can now use it to sanitize user generated inputs for dynamically rendered content
I'm currently working on a Todoist clone and I never use Switch Statements, but when you mentioned it, I was literally working on a perfect part of the app to add a Switch Statement!
That's pretty sick bro good job. Can you make a vid about what a starting JS programmer can do between finishing a course/writing his first app and finding a job? Talking about finding a way to apply skills and maybe making some money along the way. Someone mentioned contributing to real projects on github but I can't find that video and how to do it.
For contributing to projects on github, check out CodingGarden's "How to Contribute to Open Source Projects" video. It's a livestream past broadcast, about 3 hours long, but he goes through the entire process of finding a project, going through all their contribution guidelines, finding an issue to work on, cloning the repo, running the tests, reproducing the issue locally, and tracking down the cause of the issue plus a little bit of trying to fix it.
I only started writing JavaScript about 2 or 3 months ago and these videos are absolute gold! Liked, subscribed, and a comment for the algorithm. Keep up the great content man! Love your work
I’m confused what the last template literal function example is doing. It doesn’t seem to be utilizing anything with template literals and seems like it could just be a regular function, right?
Wow the generator function knowledge blew my mind out of the back of my head and through the drywall into the garden! Insanely useful , thank you Kyle!
DUDE the curly brackets thing comes up with me using state management. the reducer switch statements always got me with this. I'd end up having the most dumb names for new objects and arrays because my naming convention was always impacted. So clutch!
Regarding the first example about block statements. While nothing you say is wrong, sometimes it's a case of "Just because you can, doesn't mean you should". The part about "redeclaring" variables in a new scope with the same name as in the outside scope does work, yes, but once you start to think in the direction of Clean Code it's not necessarily good practice. Because it actually makes it a teeny tiny bit harder to understand that code for outsiders/other maintainers of that code. There is even an eslint rule that checks that. But the rest of the video and your examples were very good, thanks!
Hi Kyle, I was mesmerized when you moved the brackets down in the switch-statement example. Can you show how you did that? Or even better: Wouldn't it be a nice topic for a video? Keyboard tricks for faster work in VS Code
5:45 "cant do any other way" can do: *if ( person.hasOwnProperty('name') )* also userful for stuff like: for ( let key in array ) can also loop over the values: for ( let val of array )
I have seen and used the tagged template literal syntax in developit/htm and have always wondered how it works but i didn't find the docs for it. Thank you so much for the tips! ♥️
Bro thank you so much. Not joking yesterday I was like 2am not knowing how to fix my Code... had a weird error inside a switch sentence. Ended up refactoring into if-else and now i know what the problem was. Thanks truly
tuples or the comma operator. with single equal sign (assign operator): if(x=getValue()) console.log(x); multi-assignment: let y; let x = y = 0; for(let i =0; (doSomeThing(), i
Might have been useful to point out that generator functions can be iterated through with a for-of loop too. That's easily my favourite way of using them.
5:09 could this "in" keyword work in a ternary where the check is for the key not the value ? "name" in person ? "Has name property" : "no name property"
The generator function in JavaScript is semantically similar to the concept of "lazy iterator" in other languages, in particular Rust. I'm mentioning Rust by name because it's not until I learned this language that I was able to fully appreciate how powerful iterators can be.
I want to see more real examples of generator usage. Id generator is too easy. I always try to use generator in my project (for study purposes), but I don't find a prefer place for it. More examples are glad. Thanks!
If you highlight you code block and then type the bracket you want to use it will wrap it for you rather than worrying about moving the bracket around manually
Back in the day, when I was using switch statements, I put the { } because I thought they were necessary, as I came from C# and I've seen switch statements with { } for each case Thanks to you, I realized it works because each { } block is basically a nested scope
One thing about block scope ({} scope), if nobody has mentioned it yet: Only variables defined with let and const are restrained to a block scope. Variables defined with var are not. Var variables will leak from for loops, if statements, or any other block scope (but not function scopes) while let and const variables will behave as demonstrated in the video.
WOW, that's amazing :) I feel like the generator function is pretty useful for building a linked list or binary trees and other algorithms. definitely makes thing easier.
Time to refactor my code! For the dynamic module import. I recently had to use require() because I wanted to put a template literal based on the name of file. But now I think I'm going to change it to the way you showed us 🙂 My example: for (const file of myFiles) { const myModule = require(`./foldername/${file}`).default // more code done with myModule... }
That curly braces thing is so called block scope in JS (ES6) scoping and applies to variables declared via const and let. Functions are also block scoped (in strict mode)
I used 'My name is Alina and I am female.' as a string with 'Alina' and 'female' as the values and after adding the strong tags my code returned 'My name is Alina and I am female.' I can confirm that I feel very strong now.
Hi, Kyle. Just FYI, that thing with "in keyword", which is actually an operator, you got it wrong and, unfortunately, teach it wrong. Try to log ("toString" in person) on your very same object from the video and see how that returns true. It's because the "in" operator looks up through the prototype chain. The correct way to see if an object has a property you look for is to use HasOwnProperty() method.
Very informative . dynamic import , curly brackets and generator func We need more examples and use cases about these features it will be useful too Thanks Kyle
17:22 But that will slow down the response to the click that causes the module import. And if the import is local to the event listener, then it will be discarded after every call, and need to be reimported on the next.
That is a compromise you make based on your needs. Sometimes it's better to lazily load some code, rather than upfront which can have advantages in performance and load times, compared to static imports. Other times, it's not worth it-it depends entirely on your situation. Also keep in mind that importing won't need to re-import the source once it's already been loaded. The browser is smart enough to cache imported modules (also dynamically imported ones). If you'd like to re-import something, you can always attach a query parameter to your import string with a unique string, although this is not recommended.
