5 MORE Must Know JavaScript Features That Almost Nobody Knows

  Рет қаралды 179,008

Web Dev Simplified

Web Dev Simplified

Күн бұрын

🚨 IMPORTANT:
JavaScript Simplified Course: javascriptsimplified.com
Part One: • 5 Must Know JavaScript...
JavaScript is a vast language with tons of features and it is impossible to know them all. In this video I will be covering 5 more features in JavaScript that nobody knows but are incredibly useful.
📚 Materials/References:
Tagged Template Literal Article: blog.webdevsimplified.com/202...
Dynamic Module Imports: blog.webdevsimplified.com/202...
Generator Function Article: blog.webdevsimplified.com/202...
ES6 Module Video: • JavaScript ES6 Modules
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:24 - Block Statements
03:36 - in Keyword
05:49 - Template Literal Functions
11:12 - Generator Functions
14:57 - Dynamic Module Imports
#JSTips #WDS #Top5JS

Пікірлер: 362
@IceMetalPunk
@IceMetalPunk 3 жыл бұрын
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
@whoman7930 3 жыл бұрын
where can i learn more?
@spacedoohicky
@spacedoohicky 3 жыл бұрын
@@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.
@AlexFord
@AlexFord 2 жыл бұрын
@@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.
@whoman7930
@whoman7930 2 жыл бұрын
@@AlexFord LOL thank you
@karthikkhoday5555
@karthikkhoday5555 2 жыл бұрын
@@AlexFord 🤣🤣
@deonrich3149
@deonrich3149 3 жыл бұрын
the curly bracket thing is super cool, never knew that!
@michael6955
@michael6955 3 жыл бұрын
Same xD
@TheRealCAPerry
@TheRealCAPerry 3 жыл бұрын
Also same
@lawrencedoliveiro9104
@lawrencedoliveiro9104 3 жыл бұрын
It’s a standard feature of block-structured languages, like C. Which in turn copied it from old Algol.
@bennybar
@bennybar 3 жыл бұрын
I've used that with switch statements for a while, just never thought why it worked :)
@KasuraIchimaki
@KasuraIchimaki 3 жыл бұрын
me neither... super weird that you could use brackets like that
@StevenHoodlebrink
@StevenHoodlebrink 3 жыл бұрын
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!
@sidharthsid3429
@sidharthsid3429 3 жыл бұрын
Yeah, you're absolutely right ..Great use case
@ahmaddynugroho
@ahmaddynugroho 3 жыл бұрын
“Example isn't another way to teach, it is the only way to teach." - A. Einstein
@chrisual
@chrisual 3 жыл бұрын
'98% of A. Einstein quotes were not said by A. Einstein' - A. Einstein
@sovietbot6708
@sovietbot6708 2 жыл бұрын
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"
@CodingNuggets
@CodingNuggets 3 жыл бұрын
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!
@christophalbrecht1088
@christophalbrecht1088 3 жыл бұрын
Loving it! supposedly simple things like scopes open up completely new possibilities. Thx for your videos I'm always inspired
@patrickc.6183
@patrickc.6183 3 жыл бұрын
Dynamic imports are a very cool feature! Definitely useful, but not well known 👍.
@lawrencedoliveiro9104
@lawrencedoliveiro9104 3 жыл бұрын
Interesting that, in Python, all imports are dynamic; you can put a regular “import” statement inside a function or class if you want.
@szpaklabs8893
@szpaklabs8893 2 жыл бұрын
great examples! finally I understood the purpose of the generator functions. dynamic import is also very useful, thank you!
@michakwasiuk1731
@michakwasiuk1731 3 жыл бұрын
You are awesome kyle! Looking forward to your javascript course!!
@stoneshou
@stoneshou 3 жыл бұрын
this is so good! right on point when i'm looking for a way to postload some modules.
@ritudey8520
@ritudey8520 3 жыл бұрын
Love your explanations. Simple, short and clear. Thanks🤍
@nfarruggia
@nfarruggia 3 жыл бұрын
Your videos are insanely helpful! Keep it up!
@sesho777
@sesho777 3 жыл бұрын
You are the best at explaining confusing stuff in a simple way, thanks man!
@ro1942
@ro1942 3 жыл бұрын
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!
@JimRooney
@JimRooney 3 жыл бұрын
Always such quality content! Love your work mate.
@i3looi2
@i3looi2 3 жыл бұрын
Berry nice. I think I have a use for the generator function in one of my projects. Also the dynamic imports. Thanks.
@xXYourShadowDaniXx
@xXYourShadowDaniXx 2 жыл бұрын
That id generator example was great, very intuitive use case!
@NickoSinclair
@NickoSinclair 3 жыл бұрын
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.
@88spaces
@88spaces 9 күн бұрын
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.
@danvindsouza2725
@danvindsouza2725 3 жыл бұрын
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.
@Rodo1802
@Rodo1802 2 жыл бұрын
I cannot get enough of your knowledge and clarity. You are a saviour in all its dimension!
@tezdogs
@tezdogs 3 жыл бұрын
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
@mohannadize
@mohannadize 3 жыл бұрын
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! ♥️
@Paul-xg1fr
@Paul-xg1fr 3 жыл бұрын
Very interesting with template strings🤯. Thank you!
@duanemcdonald6960
@duanemcdonald6960 3 жыл бұрын
Kyle, you are so effective, helpful and concise. Please don't stop.
@reyanrahman
@reyanrahman 3 жыл бұрын
U always comes up with something new every time
@aeronwolfe7072
@aeronwolfe7072 Жыл бұрын
Great stuff. Thank you sooo much man!!!!
@liondeluxe3834
@liondeluxe3834 3 жыл бұрын
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
@rejinraghavan7616
@rejinraghavan7616 3 жыл бұрын
Hey Kyle.. Came across your videos recently.. I really like it.. It's concise and informative.. :)
@jojok427
@jojok427 Жыл бұрын
Dang, how did I not know half of these... this was incredibly helpful! Thank you!
@jimmyj.6792
@jimmyj.6792 3 жыл бұрын
Awesome tips discovery. Thanks a lot for this 👌
@yeahyeahduderooski
@yeahyeahduderooski 2 жыл бұрын
Love the import() info at the end! Our pages are full of stuff so this will help speed up the code our team owns
@rachidb9624
@rachidb9624 2 жыл бұрын
Generator function looks interesting, first time hearing about it, thanks mate !
@tajuddinkhan5206
@tajuddinkhan5206 3 жыл бұрын
It's just amazing that you are able to explain these concepts so easily.
@brhh
@brhh 3 жыл бұрын
such an amazing teacher isn't he!
@ganeshbabu6458
@ganeshbabu6458 3 жыл бұрын
Your channel is awesome. Keep us educated as usual👍
@DewieTheBard
@DewieTheBard 3 жыл бұрын
I watched the last video and a few days later I used one of those features. Thank you for making great content
@88spaces
@88spaces 9 күн бұрын
Generator functions are new to me. I'm glad you covered this.
@HuoShengChiou
@HuoShengChiou 3 жыл бұрын
This video gives me new knowledge. Thank you
@IkraamDev
@IkraamDev 3 жыл бұрын
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!
@johnkeck
@johnkeck 3 жыл бұрын
Great stuff! Thanks so much!
@AymanAliAli
@AymanAliAli 3 жыл бұрын
I really enjoyed this video. Thank you for the time you spent carefully planning for it.
@stanislavmalyshev5209
@stanislavmalyshev5209 3 жыл бұрын
Top content! Thank you :)
@sohammondal578
@sohammondal578 2 жыл бұрын
Wow so much content in just 20 mins. Brilliant. ❤️
@devrxt10
@devrxt10 3 жыл бұрын
thanks for this video. keep making videos like this
@allthingsdev4071
@allthingsdev4071 3 жыл бұрын
Thanks for explaining things to people whom have little prior coding experience. Every detail counts
@Nyco3D
@Nyco3D 2 жыл бұрын
Best advice is the dynamic module import, life saver!
@HakunaMatata-it2qr
@HakunaMatata-it2qr 3 жыл бұрын
I love this feature series..!🔥🔥
@AlexFord
@AlexFord 2 жыл бұрын
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 :)
@CotyCondry
@CotyCondry 3 жыл бұрын
these are really good, I think I actually understand generators now.
@hamidmohamadi2943
@hamidmohamadi2943 3 жыл бұрын
Great kyle as always. Thanks a lot
@webgeeks9090
@webgeeks9090 3 жыл бұрын
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
@vincentjohnflorio
@vincentjohnflorio 2 жыл бұрын
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.
@MrBroady02
@MrBroady02 3 жыл бұрын
I like to click these on the off case that I may learn something. Today I learned 3 things. Nice work!
@christianfreund2039
@christianfreund2039 3 жыл бұрын
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
@ianterada6821
@ianterada6821 3 жыл бұрын
The template literal section was really interesting!
@WeaselBass
@WeaselBass 3 жыл бұрын
Those are some awesome things I'm going to immediately forget the next time I have to write any JavaScript...
@brhh
@brhh 3 жыл бұрын
press Y for S ame
@graemekalb2292
@graemekalb2292 3 жыл бұрын
DEFINITELY using the in keyword, thank you!!
@letieuanh8698
@letieuanh8698 2 жыл бұрын
That Generator explanation is god damn helpful with me, thanks!
@berkaybakacak
@berkaybakacak 3 жыл бұрын
Thanks for theese useful informations 😁
@AlanD20
@AlanD20 3 жыл бұрын
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.
@Lokus122
@Lokus122 3 жыл бұрын
I think It would also fit nicely to create some loading screen with progress bar if function takes a lot of time
@Vishalkumar-vj7hx
@Vishalkumar-vj7hx 3 жыл бұрын
Awesome explanation . Your new subscriber
@SergeofBIBEK
@SergeofBIBEK Жыл бұрын
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.
@hamzac.4555
@hamzac.4555 3 жыл бұрын
good job, keep it up !
@BrandonNozakiMiller
@BrandonNozakiMiller 3 жыл бұрын
I am impressed with your knowledge of archane JS. I didn't know one or two of these.
@patcodingcodester9781
@patcodingcodester9781 2 жыл бұрын
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!
@sapindersingh1165
@sapindersingh1165 3 жыл бұрын
Kyle definitely knows what things I'm ignorant of. That's why he pushes my javascript level further every time.
@Tuuhwix
@Tuuhwix 3 жыл бұрын
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... }
@aashiqahmed5273
@aashiqahmed5273 3 жыл бұрын
dynamic import are dope man
@dabbopabblo
@dabbopabblo Жыл бұрын
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
@elmyllo4219
@elmyllo4219 3 жыл бұрын
me see the thumbnail: "hey.. I know that one" also me start watching the video: "wha-- "
@raellawrence7116
@raellawrence7116 3 жыл бұрын
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.
@dasten123
@dasten123 3 жыл бұрын
Crazy good video!!!
@artgreg2296
@artgreg2296 3 жыл бұрын
Thanks Kyle. I was knowing all of them. Did you mention delegator generator?
@chlbri
@chlbri 2 жыл бұрын
the "in" keyword to validate an object is awesome
@Gigatless
@Gigatless 3 жыл бұрын
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.
@Californ1a
@Californ1a 3 жыл бұрын
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.
@Gigatless
@Gigatless 3 жыл бұрын
@@Californ1a thanks!
@rohithchittibommala2002
@rohithchittibommala2002 3 жыл бұрын
Kyle it would be much appreciated if you can make a video on decorators in typescript
@nithinkottary9578
@nithinkottary9578 3 жыл бұрын
please make such types of videos more
@HosamSultan
@HosamSultan Жыл бұрын
3rd time I watch this video, and, Man! So many new things I get every time!!
@ms77grz
@ms77grz 3 жыл бұрын
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)
@nitsanbh
@nitsanbh 3 жыл бұрын
“When you have a specific use case for them, they are really useful” Well I can’t say that’s untrue
@brhh
@brhh 3 жыл бұрын
out of all the ways you could've said false, you chose the one that doesn't relate to programmers, F
@antoniorivera6014
@antoniorivera6014 3 жыл бұрын
So useful!
@scheimong
@scheimong 3 жыл бұрын
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.
@josebarrera9346
@josebarrera9346 3 жыл бұрын
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
@jaideepshekhar4621
@jaideepshekhar4621 3 жыл бұрын
For the template literal functions, I prefer them like this: const user_profile = (firstName, hobby) => `
@JosePerez-qt8cf
@JosePerez-qt8cf 3 жыл бұрын
Thanks for the vídeo but can you explain a little more about destructuring in a closure please
@chaitanyavarma2283
@chaitanyavarma2283 3 жыл бұрын
Very useful👌
@karaway2117
@karaway2117 3 жыл бұрын
I've seen those template literal functions before in a Fireship video, I've never used it though lol
@nakulankurmullam2982
@nakulankurmullam2982 3 жыл бұрын
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
@CotyCondry
@CotyCondry 3 жыл бұрын
the syntax on that is so weird - I kept expecting an error like it should have a comma or something else
@manishneog9595
@manishneog9595 3 жыл бұрын
Your videos always helps me a lot ❤️ love from INDIA
@avi12
@avi12 3 жыл бұрын
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
@nept1187
@nept1187 Жыл бұрын
INCREDIBLE FOR DYNAMIC IMPORTS
@user-ld5qn7pq1q
@user-ld5qn7pq1q 9 ай бұрын
Isn't using curly braces usseccery in the switch case?(as you can declare the varuable before the switch?)
@mybluemars
@mybluemars 3 жыл бұрын
Hi Kyle, I just wanted to say that your logic and teaching style is very good, and I am not a programmer!
@user-fu6kf1yk2o
@user-fu6kf1yk2o 3 жыл бұрын
I knew every of this feature, and I wont really use any of them) Well maybe except 1st and last examples, I think they are awesome. Thanks for video
@helloredwan
@helloredwan 3 жыл бұрын
Thanks bro
@ehtishamtahir2187
@ehtishamtahir2187 3 жыл бұрын
That curly bracket trick👌👌👌
@DaggieBlanqx
@DaggieBlanqx 3 жыл бұрын
Wow! Just wow! Nothing more... just another wow!
@sanketmundada3260
@sanketmundada3260 3 жыл бұрын
Can you please do contents related devops ?
@techstuff2237
@techstuff2237 3 жыл бұрын
That was the simplest explanation of generator functions!
@exodustx0
@exodustx0 3 жыл бұрын
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.
@axiezimmah
@axiezimmah 3 жыл бұрын
yield is actually something I did not know. nice
@kitsunekaze93
@kitsunekaze93 3 жыл бұрын
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 )
Another 5 Must Know JavaScript Features That Almost Nobody Knows
22:42
Web Dev Simplified
Рет қаралды 212 М.
Learn JavaScript Event Listeners In 18 Minutes
18:03
Web Dev Simplified
Рет қаралды 559 М.
原来小女孩在求救#海贼王  #路飞
00:32
路飞与唐舞桐
Рет қаралды 41 МЛН
TypeScript Wizardry: Recursive Template Literals
14:47
Tech Talks with Simon
Рет қаралды 36 М.
How To Actually Get Hired In 2024
10:43
Web Dev Simplified
Рет қаралды 185 М.
Why I Get Up At 5AM And Why You Should Too
9:51
Web Dev Simplified
Рет қаралды 213 М.
Has Generative AI Already Peaked? - Computerphile
12:48
Computerphile
Рет қаралды 235 М.
10 Tailwind Classes I Wish I Knew Earlier
13:31
Web Dev Simplified
Рет қаралды 150 М.
All The JavaScript You Need To Know For React
28:00
PedroTech
Рет қаралды 528 М.
The Web Developer Job Market Is Broken
0:44
Web Dev Simplified
Рет қаралды 128 М.
How This Test Saved Kent’s Site
7:04
Web Dev Simplified
Рет қаралды 24 М.