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!
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.
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"
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"
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 :)
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.
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
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
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.
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!
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!
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.
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!
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 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 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! ♥️
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
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!
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’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?
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.
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
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.
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.
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.
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... }
One important note about the "in" keyword is that it includes inherited properties, which might trigger unwanted behavior. The proper way to check for existence of properties of specific object is "hasOwnProperty" function.
@@lawrencedoliveiro9104 The idea of inheritance is to modify the behavior of the parent: child objects are guaranteed to have the interface of the parent, but can behave differently. Otherwise why not just use the parent in the first place. For in vs hasOwnProperty specifically, it's good to know the difference. A dumb example would be having a default set in the parent, and checking for the property overriding the default in the child using hasOwnProperty.
@@alexhere1 The idea of inheritance is to reuse some part of the behaviour of the parent. If the child overrides some attribute of the parent, then “in” will return the child value, otherwise it returns the parent value. The caller doesn’t have to worry about the difference.
@@lawrencedoliveiro9104 Ok, let's use the boring "Person" and "name" example. You define a base Person with the name='_'. Then you create a child from that parent. You want to check whether the child has a name given to this specific child. The "in" check will tell you that the child has a name. "Hello _"
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
I've used the template literals to handle adding the optional s based on the count. Pretty clean compared to some ternary if or something in the string itself.
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.
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
The scope (curly braces) is actually more important and this trick is used in other places. if / else / while / for statements just allow one statement after it. if (true) some_function(); The same for for and while. But this trick allow us to use more than 1 statement, because for the compiler a scope clock is a single statement too. if (true) { const welcome_to_new_scope = 1; another_statment(); } This is a heritage from the C syntax.
Kyle it would be much appreciated if you can make a video on decorators in typescript
3 года назад
Generators exist in python and they define usually as you did with the id generator a set of rules for a series which can be really useful for avoid the use of memory it can be like having a list but for example if the size is 1 million you don't need to store a 1 million size list instead only on demand you request the values
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
Please do note that in will return true for inherited properties, whereas hasOwnProperty() will return false for inherited properties. You probably need hasOwnProperty in most use-cases.
Hmm. I have recently dealt with someone who was having some code problems, they were using an import inside a click handler. That is actually not working the way it seems. The logic for the import cannot change based on data that only exists at runtime in the click handler, contextually. The import is actually hoisted to the top of the file, all imports are resolved at load time. Your example worked because the static value true or false was the same at load- and runtime, but it should be made clear that you cannot base the import logic on a contextual runtime value.
I know you're likely not using semicolons to 'clean' up the presentation, but perhaps you could include them and use a theme that reduces the contrast significantly, so they are still there, just not as visible. Good compromise between visual presentation and JS best practices.
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!
Generator functions confused me until now. I can see the power of generator functions for CLI apps 😱 I've been using promises but now that seems overengineered
I found this workaround for getting result out of a switch statement in a const (nesting the switch in a function) : const result = (() => { switch (foo) { case 'bar': return 7; }) ();
Good to see the generator in JS. As I understand, in JS a function is some kind of a "meta-type" and represents a class at the same time, because closures allow you to realise encapsulation indirectly. So generator is a class-function which implements IEnumerable (C#) or Iterable (Java) interfaces, right? Cool coding-tech to save RAM and CPU resources.
Functions are objects, like any other thing in JS. Strings are objects, arrays are objects, etc. When you call `new` in front of a function, it tells JS that the function is going to be an instance of an object, and to hold onto it. There are no such thing as classes in JS, other than by syntax. JS is a prototype-based programming language, unlike Java and C# which are class-based. The class keyword in JS is simply syntactic sugar for a function that is the constructor for the prototype. In JS, the syntactic sugar for generators (function *() {}) will create a Generator object which implements the next, throw and return methods, used for the control flow of the generator. Every generator is also an iterator (not enumerator) and can therefore also be used in for..of loops to handle control flow with iterations.
@@dealloc Thx for the reply. Very informative. I’m just trying to figure out what they did in ES6. Looks like they just used the classical JS paradigms to make built-in browser libraries to implement different interfaces and other high-abstract data structures. Similarly how it’s made with Intermediate Language (IL) in C# (.NET). I see the JS, also C# and Java, as descendants of C-language. The expression function() {//todo} is some kind of “anonymous class” - the JS unique concept and the keyword “new” is just an instruction to initialise that class. As we know, a class is a reference data type of user defined data. As you mentioned “JS is a prototype-based programming language”, all the magic is built around that hidden property: __proto__ (it saves the lexical environment of a function). It’s like a property in any OOP language. The __proto__ can have different types based on its current context, but its upper “proto” type is always Object type like in C#. For example, __proto__: Array -> __proto__: Object. It explains, on some degree, how the modules (from IIEF), classes (from closures), Promises (from nested callbacks), async/await were built in ES6 and what can be done more.
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 :)
where can i learn more?
@@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.
@@AlexFord LOL thank you
@@AlexFord 🤣🤣
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!
Yeah, you're absolutely right ..Great use case
the curly bracket thing is super cool, never knew that!
Same xD
Also same
It’s a standard feature of block-structured languages, like C. Which in turn copied it from old Algol.
I've used that with switch statements for a while, just never thought why it worked :)
me neither... super weird that you could use brackets like that
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.
“Example isn't another way to teach, it is the only way to teach." - A. Einstein
'98% of A. Einstein quotes were not said by A. Einstein' - A. Einstein
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"
I've been watching videos of JS things I've never heard of, and the dynamic import feature blows me away. This is truly a game changer.
For the template literal functions, I prefer them like this:
const user_profile = (firstName, hobby) => `
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"
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 :)
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.
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
Dynamic imports are a very cool feature! Definitely useful, but not well known 👍.
Interesting that, in Python, all imports are dynamic; you can put a regular “import” statement inside a function or class if you want.
Glad you're continuing on with these. Definitely learning a thing or two that I didn't know. Much love as always Kyle. See you soon!
Those are some awesome things I'm going to immediately forget the next time I have to write any JavaScript...
press Y for S ame
That id generator example was great, very intuitive use case!
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
Loving it! supposedly simple things like scopes open up completely new possibilities. Thx for your videos I'm always inspired
It's just amazing that you are able to explain these concepts so easily.
such an amazing teacher isn't he!
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.
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!
I cannot get enough of your knowledge and clarity. You are a saviour in all its dimension!
Generator functions are new to me. I'm glad you covered this.
For years now Ive been appending scripts to the body and listening for their load event, realizing import() is a thing is a literal game changer
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!
great examples! finally I understood the purpose of the generator functions.
dynamic import is also very useful, thank you!
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.
Kyle definitely knows what things I'm ignorant of. That's why he pushes my javascript level further every time.
Best advice is the dynamic module import, life saver!
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!
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 )
Kyle, you are so effective, helpful and concise. Please don't stop.
Thanks for explaining things to people whom have little prior coding experience. Every detail counts
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 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! ♥️
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
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!
You are the best at explaining confusing stuff in a simple way, thanks man!
the "in" keyword to validate an object is awesome
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.
@@Californ1a thanks!
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?
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.
Dang, how did I not know half of these... this was incredibly helpful! Thank you!
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
U always comes up with something new every time
Love the import() info at the end! Our pages are full of stuff so this will help speed up the code our team owns
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)
Love your explanations. Simple, short and clear. Thanks🤍
I like to click these on the off case that I may learn something. Today I learned 3 things. Nice work!
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.
11:55 However, note that “yield” is actually an expression, not a statement.
Like typeof and instanceof?
Well, those don’t do anything useful apart from returning values, whereas yield does transfer of control as well.
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.
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.
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...
}
I watched the last video and a few days later I used one of those features. Thank you for making great content
I liked the one about dynamic import and checking if a property exists in an object
Is going to use this in our project
“When you have a specific use case for them, they are really useful”
Well I can’t say that’s untrue
out of all the ways you could've said false, you chose the one that doesn't relate to programmers, F
You could use continue instead of if block
this is so good! right on point when i'm looking for a way to postload some modules.
You are awesome kyle! Looking forward to your javascript course!!
One important note about the "in" keyword is that it includes inherited properties, which might trigger unwanted behavior. The proper way to check for existence of properties of specific object is "hasOwnProperty" function.
What kind of “unwanted” behaviour? Isn’t the whole point of subclassing that instances of the subclass do behave like instances of the base class?
@@lawrencedoliveiro9104 The idea of inheritance is to modify the behavior of the parent: child objects are guaranteed to have the interface of the parent, but can behave differently. Otherwise why not just use the parent in the first place. For in vs hasOwnProperty specifically, it's good to know the difference. A dumb example would be having a default set in the parent, and checking for the property overriding the default in the child using hasOwnProperty.
@@alexhere1 The idea of inheritance is to reuse some part of the behaviour of the parent. If the child overrides some attribute of the parent, then “in” will return the child value, otherwise it returns the parent value. The caller doesn’t have to worry about the difference.
@@lawrencedoliveiro9104 Ok, let's use the boring "Person" and "name" example. You define a base Person with the name='_'. Then you create a child from that parent. You want to check whether the child has a name given to this specific child. The "in" check will tell you that the child has a name. "Hello _"
@@alexhere1 Is “name” an instance variable? Then when you create a child, you give it a name. Simple.
Generator function looks interesting, first time hearing about it, thanks mate !
3:04 what's the shortcut to move the closing bracket down the lines? I need that
Edit: nvm, I found it! just Alt + Arrow lol
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
I jumped when I saw this magic too! He used it elsewhere. I searched the comments before begging for this trick. Thanks for posting. :)
Berry nice. I think I have a use for the generator function in one of my projects.
Also the dynamic imports.
Thanks.
I've used the template literals to handle adding the optional s based on the count. Pretty clean compared to some ternary if or something in the string itself.
That Generator explanation is god damn helpful with me, thanks!
I am impressed with your knowledge of archane JS. I didn't know one or two of these.
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.
I think It would also fit nicely to create some loading screen with progress bar if function takes a lot of time
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
these are really good, I think I actually understand generators now.
Your videos are insanely helpful! Keep it up!
The template literal section was really interesting!
The scope (curly braces) is actually more important and this trick is used in other places. if / else / while / for statements just allow one statement after it.
if (true)
some_function();
The same for for and while. But this trick allow us to use more than 1 statement, because for the compiler a scope clock is a single statement too.
if (true)
{
const welcome_to_new_scope = 1;
another_statment();
}
This is a heritage from the C syntax.
Always such quality content! Love your work mate.
I've seen those template literal functions before in a Fireship video, I've never used it though lol
I use it all the time and i literally had to look up original syntax
I was like do u use + symbol or comma lol
the syntax on that is so weird - I kept expecting an error like it should have a comma or something else
Kyle it would be much appreciated if you can make a video on decorators in typescript
Generators exist in python and they define usually as you did with the id generator a set of rules for a series which can be really useful for avoid the use of memory it can be like having a list but for example if the size is 1 million you don't need to store a 1 million size list instead only on demand you request the values
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
Please do note that in will return true for inherited properties, whereas hasOwnProperty() will return false for inherited properties. You probably need hasOwnProperty in most use-cases.
Man, Kyle must really like bowling, weightlifting, and playing guitar.
I really enjoyed this video. Thank you for the time you spent carefully planning for it.
Hmm. I have recently dealt with someone who was having some code problems, they were using an import inside a click handler. That is actually not working the way it seems. The logic for the import cannot change based on data that only exists at runtime in the click handler, contextually. The import is actually hoisted to the top of the file, all imports are resolved at load time. Your example worked because the static value true or false was the same at load- and runtime, but it should be made clear that you cannot base the import logic on a contextual runtime value.
Am I the one that thought the curly braces in switch statements were just a part of the regular switch syntax? 🤣 I didn’t know it was separate!
I swear I have to look up switch syntax every time I use it... even if it's like the 100th time.. lol
Yeah, it's formally separate, but since using switch without the braces is so hazardous, it really should be regarded as a regular part.
I know you're likely not using semicolons to 'clean' up the presentation, but perhaps you could include them and use a theme that reduces the contrast significantly, so they are still there, just not as visible. Good compromise between visual presentation and JS best practices.
Very interesting with template strings🤯. Thank you!
And here I was, thinking I knew all there was to JavaScript. Silly me.
Thank you for sharing. Very helpful
yield is actually something I did not know. nice
me see the thumbnail: "hey.. I know that one"
also me start watching the video: "wha-- "
Same. I think I'm quite knowledgeable in this area, but then I find 2 things in this video that can improve my code right away.
This video gives me new knowledge. Thank you
Honestly, I wasnt really impressed with the tip for block statements, but the generator and the last tip were both really cool and useful!
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!
Awesome tips discovery. Thanks a lot for this 👌
Generator functions confused me until now. I can see the power of generator functions for CLI apps 😱 I've been using promises but now that seems overengineered
Generator functions are used very prominently in Redux-Saga for example. There it is incredibly useful.
I found this workaround for getting result out of a switch statement in a const (nesting the switch in a function) :
const result = (() => {
switch (foo) {
case 'bar': return 7;
}) ();
Great stuff. Thank you sooo much man!!!!
That curly bracket trick👌👌👌
javascript is awesome..., a personalized language. e.g. var a=1,b=2; if(a=4,b=2,a>=b) return a++,b--,a+b;
Hey Kyle.. Came across your videos recently.. I really like it.. It's concise and informative.. :)
Good to see the generator in JS. As I understand, in JS a function is some kind of a "meta-type" and represents a class at the same time, because closures allow you to realise encapsulation indirectly. So generator is a class-function which implements IEnumerable (C#) or Iterable (Java) interfaces, right?
Cool coding-tech to save RAM and CPU resources.
Functions are objects, like any other thing in JS. Strings are objects, arrays are objects, etc. When you call `new` in front of a function, it tells JS that the function is going to be an instance of an object, and to hold onto it.
There are no such thing as classes in JS, other than by syntax. JS is a prototype-based programming language, unlike Java and C# which are class-based. The class keyword in JS is simply syntactic sugar for a function that is the constructor for the prototype.
In JS, the syntactic sugar for generators (function *() {}) will create a Generator object which implements the next, throw and return methods, used for the control flow of the generator. Every generator is also an iterator (not enumerator) and can therefore also be used in for..of loops to handle control flow with iterations.
@@dealloc Thx for the reply. Very informative. I’m just trying to figure out what they did in ES6.
Looks like they just used the classical JS paradigms to make built-in browser libraries to implement different interfaces and other high-abstract data structures. Similarly how it’s made with Intermediate Language (IL) in C# (.NET). I see the JS, also C# and Java, as descendants of C-language. The expression function() {//todo} is some kind of “anonymous class” - the JS unique concept and the keyword “new” is just an instruction to initialise that class.
As we know, a class is a reference data type of user defined data. As you mentioned “JS is a prototype-based programming language”, all the magic is built around that hidden property: __proto__ (it saves the lexical environment of a function). It’s like a property in any OOP language. The __proto__ can have different types based on its current context, but its upper “proto” type is always Object type like in C#. For example, __proto__: Array -> __proto__: Object.
It explains, on some degree, how the modules (from IIEF), classes (from closures), Promises (from nested callbacks), async/await were built in ES6 and what can be done more.
what this video useFull is that you provide an usecase for everyone of those features