100+ JavaScript Concepts you Need to Know
HTML-код
- Опубликовано: 21 ноя 2022
- The ultimate 10 minute JavaScript course that quickly breaks down over 100 key concepts every web developer should know. Learn the basics of JS and start building apps on the web, mobile, desktop, and more.
#javascript #programming #code
🚨 BLACK FRIDAY 40% Discount off PRO Memberships FOREVER
fireship.io/pro
🚨 Use code BLACKFIRE at checkout
💬 Chat with Me on Discord
/ discord
🔗 Resources
NEW Full JavaScript Course fireship.io/courses/js
JavaScript in 100 Seconds • JavaScript in 100 Seconds
JavaScript Docs developer.mozilla.org/en-US/d...
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- JavaScript 101 Course
- Getting Started with JavaScript
- JavaScript basics tutorial
- Learn JS for beginners
- Most important JS concepts to know
- What is JavaScript used for?
- How do I learn JavaScript programming?
- Prototypal Inheritance
- Higher Order Functions
- Closures
- Non-blocking event loop
- Node.js 
Наука
![Tee Grizzley - Swear to God (Feat. Future) [Official Video]](http://i.ytimg.com/vi/jBlC5AOYoBs/mqdefault.jpg)
The full JavaScript course is live… And use code BLACKFIRE to lock-in a 40% discount on a PRO membership forever! (expires Nov 30) fireship.io/courses/js
Just bought your course jeff. 😀
Hi, I've been wondering for a long time: how do you display return values and errors in-line while writing code? It's not listed in the description and I couldn't find any extensions that do this. Is it just edited? If not, it's a really cool feature that I'd like to use myself!
There are some additional concepts of importance
1. Object.create() - useful to correct prototype chain in some cases - like re-instantiating a object form local storage.
2. Closure has higher preference than Scope Chain
3. closure - means functions keep access to the variables in Heap, in the scope function was created. closure is also there in other cases when function are created
4. Maps - don't let you use function are values
5. Destucturing, Spread pattern and Rest pattern
6. fetch - then - catch - finally
7. try catch
8. map - filter -reduce , chaining , also find and array.forEach
9. DOM manipulation
10. Short circuiting && , ||
11. ?? Nullish Coalescing operator
12. Object.entries, Object.values, Object.keys
13. call, apply and bind
14. IIFE - Immediately Invoked Function Expression - still has a use case in async function call
15. some, every, flat, flatMap
16. BigInt
17. Classic Constructor functions for OOP. still lot of legacy code
18. ES6 classes being syntactic sugar till now
19. Inheritance between ES6 classes using extents
20. Method overriding
21. Protected properties #property in ES6 classes
22. super() and constructor in ES6 classes
23. Browsers APIs, like INTL, DOM, etc
24. Classical AJAX using XMLHTTPREQUEST , to deal with legacy code
25. throw error, as promise only rejects in case of network failure, you need to handle other cases with throw
26. Micro Task Queue is for async ajax, for other async Call back Queue.
27. For Event loop, Micro Task Queue has preference over Call back Queue, and can starve Call back Queue.
28. You can promisify Other call back functions. to overcome the call back hell
29. Promise Combinator like, Promise.race, all, allSettled, any
30. CommonJS modules - to deal with legacy code
31. Modules run in strict mode. also strict mode
32. Parcel module bundler
33. Babel, Polyfill
I expect another promo on December pls
@@Lord_Vertice that's an extension called Quokka.js . However it has a free and pay version.
Thanks alot Jeff, I can now safely put Javascript on my resume.
Bram
most original fireship comment
Bram
dont this is not even basics 🤣
Have yall not been doing this?
All 100+ Topics:
1. Web Browser 0:43
2. Html 0:55
3. High Level 0:58
4. ECMA 1:07
5. WASM 1:11
6. Runtime 1:16
7. Scripting Language 1:23
8. Browser Dev Tools 1:26
9. Interpreted 1:34
10. V8 Engine 1:42
11. Just In Time Compilation 1:47
12. Script Tag 2:00
13. Src Attribute 2:04
14. Console Log 2:06
15. Let 2:17
16. Dynamically Typed 2:25
17. Primitive 2:30
18. Mutable 2:06
19. Undefined 2:41
20. Null 2:46
21. String 2:50
22. Object 2:54
23. Semicolons 3:00
24. Const 3:13
25. Var 3:21
26. Lexical Environment 3:29
27. Global Scope 3:35
28. Function 3:50
29. Local Scope 3:43
30. Block Scope 3:46
31. Hoisting 3:55
32. Function Definition 4:00
33. Arguments 4:06
34. Return 4:10
35. Function Expression 4:14
36. Higher Order Function 4:19
37. Closures 4:26
38. Call Stack 4:31
39. Heap 4:40
40. this 4:51
41. Window Or Global 5:02
42. Bind 5:11
43. Arrow Function 5:16
44. Anonymous 5:22
45. Passed By Value 5:30
46. Passed By Reference 5:36
47. Object Literal 5:46
48. Object Constructor 5:52
49. Property 5:56
50. Prototype Chain 6:00
51. Inheritance 6:11
52. OOP 6:19
53. Classes 6:22
54. Constructor 6:25
55. Get/Set 6:34
56. Instance Method 6:39
57. Static Method 6:42
58. Array 6:46
59. Set 6:53
60. Map 6:56
61. Garbage Collection 7:05
62. Weakmap & Weakset 7:16
63. Event Loop 7:26
64. Sync 7:32
65. Async 7:36
66. Single Threaded 7:49
67. SetTimeOut 7:56
68. CallBack 8:04
69. CallBack Hell 8:12
70. Promise 8:18
71. Resolve 8:24
72. Reject 8:30
73. Then/Catch 8:33
74. Async 8:40
75. Await 8:46
76. Try/Catch 8:51
77. ES Modules 9:00
78. Default Import/Export 9:07
79. Named Import/Export 9:19
80. NPM 9:27
81. Node Modules 9:32
82. Package.JSON 9:36
83. DOM 9:45
84. Document 9:52
85. QuerySelector 10:00
86. CSS Selector 10:04
87. Element 10:10
88. QuerySelectorAll 10:16
89. Event 10:25
90. Imperative 10:34
91. Declarative 10:42
92. Components 10:48
93. Data Binding 10:58
94. Module Bundling 11:05
95. Network Waterfall 11:19
96. Dynamic Imports 11:28
97. Node.JS 11:35
98. Express 11:40
99. Cross Platform 11:45
100. TypeScript 11:54
101. ESLint07 12:01
Needs more likes
respect:))
🙏
Thanks
Dude! You are the biggest Gigachad since Gigachad.
This is beautiful. If you are a beginner you can actually use this as a roadmap to learn JavaScript. You can expand on each concept that he talks about, make detailed notes, watch other videos and so on.
Although maybe skip WASM and just focus on JS. Just adding since he mentioned WASM
Dont do it if you have at least 2 brain cells (x2 more than ILon Mask or Trump together).
i feel like i need to comeback to this video and watch it everyday
exactly what im doing/did
Let's admit it, for most of us, Jeff is probably the only person who can make us spend 12 minutes listening to concepts we've known for ages about a language we use 24/7 🙃
Agreed
Or the opposite. I used to watch these before knowing a single thing about code.
I went through everything hoping to learn something I didn't know. Unfortunately it was JS 101, what did I expect 😂
I watch these before learning a language so I can get a good overview of it
11:32 - This is why I watch these sorts of videos. Every once in a while there's something I didn't know about (code splitting) that I desperately need. It's not about learning, it's about exposure.
i didn't know about dynamic imports and code splitting either. glad i watched towards the end :D
Agreed. I always listen to/watch videos about topics I already learned. There is always something you missed when learning cause it wasn't relevant enough or you didn't fully understand what it meant at the time
100%
Note that dynamic imports can, sometimes, mess the things up with your bundler. Not always. But it can happen due to references to files that don't exist when all is bundled
how experienced are you???
Been learning JS for about a month now with no previous dev experience. It's a good feeling to realize that I really have been learning since I understood most of the video. Now to write down the parts I didn't get and learn those too!
This generally covers all the concepts you need to know to become competent with JavaScript. Thanks 👍.
the cool thing about JS is that literally everyone can just create an html file, add a script tag and start writing some code, you just need the browser (which everybody has installed) and nothing else. This may seem like a normal thing to us but this is actually one of the main reasons why a lot of programmers started with JS, because of how easy it is to start writing code without previous configurations or installations.
Small addition to handling errors of promises (8:51). You can chain `.catch()` after `await promise` instead of using try-catch, e.g. `const xyz = await promise.catch(error => handleError(error)).
I frequently use this syntax when I define a variable that's based on a promise. In this way, the assignment stays in the current scope instead of a new (try-catch) block scope. This means you don't have to declare an empty (let) variable and assign the resolved value from within the try-catch scope, which is especially useful if you want the variable to be a constant.
Additionally, in this way the error handling is always close to the async call, and when used properly it can prevent excessive nesting too (i.e. the horizontal Christmas tree).
Great video as always, thanks!
Instead of that, you can also use an IIFE and have the try/catch inside. That still allows you to make it const as is especially great if the logic for figuring out the variable value isn't small
Cool tip, thanks!
@@FlorianWendelborn nice idea. I sometimes use an async IIFE when I want to execute async code in a synchronous context, but it has never occurred to me that it can also be used to avoid polluting the global namespace. Thanks!
NB: for who doesn't know, the abbreviation IIFE stands for "Immediately Invoked Function Expression". The MDN docs have a nice article on the topic.
Nice tip!
Merry Christmas!
I know you see this a lot, but I just got a job as a React developer because of your videos. Even if I still know how to do something, I come back to your channel for reassurance.
You have no idea how your work impacts so many lives, I'll make sure I buy you a coffee once my first paycheck comes in lol thank you so much Jeff and Fireship!
Would love a Python 101 or a C++ 101 also. Great content as always.
+1 for python
-1 for C++ and all its manifestations
@@bookworm_7 it can't be that bad?
@@mhmd_old7 it's isn't
@@dami-vx2215 it's even worse
Honestly thank you for this video because this is things I try to teach since years. I have probably made about 80% of the same plan as your video but yours is way more clearer.
Best !
I'm SO HAPPY to "know" all of the 101 concepts presented in this video! I got a job in the beginning of this year, and I'm still an intern, but I'm learning each and every single day. JavaScript is so easy, hard, simple and complicated at the same time! I love-hate it! xD
Hey. What are some concepts you guys use a lot at your job? Im an aspiring programmer trying to land a job soon
I got my final interview tomorrow for a new job as a junior frontend dev! Been learning JavaScript and diviated a few times to C# and Python, but finally got something going.
I too became extremly happy to know of all the concepts, now I just need to learn them haha! And I agree; JavaScript is easy, it's just extremly complicated.
Been working a lot with javascript last year. U'll find jsdoc interesting if u like explicit code but can't switch to typescript. You can basically document your scripts in a docblock style to get type hinting and autocompletion 🙂
@@Tobsson How's your experience with python I'm going to be self learning it and I'm intimidated by it, my only programing expertise are Java, C, html, css, php, JavaScript, sql!
Peste, que felicidade ver voce por aqui, meu querido kerbal e, pelo visto, programador!!
Sounds exhilarating to me, listening to something i already knew as if I never know, thank you so much you are among the best♥️
Started getting serious about learning js a week ago, perfect timing!
This is the best thing to go over before an interview😆always struggling to give a standard definition of this after using it 1000 times
The fact that most of the JS concepts are similar to other languages but the quarks of JS are addressed here is really impressive. I've been an experienced Python programmer for years but trying to learn JS has really trip me up with concept of 'this' and proto dunder. Thank you
That's what makes Javascript strange and charming.
I’m a C++ programmer who has no problems with pointers but “this” scares me
This was actually extremely useful. I've been coding in JS for several years now and it's great to go back and get reminded of the roots. Thank you for the video! 💖
did you know all 101 concepts??
@@perc-ai Yes, with 2 years experience, but not necessarily at mastery level.
This vid is really helpful for me. I’m still learning JS and sometime i forgot some concept like lexical environment, async function and ‘this’ keyword. Thank you really!
"Hi mom" is the new "Hello World"
Love this fast funny summary/intro. Comprehensive, amusing, precise. Excellent job!
I had a job interview and thanks to your Video about Angular I got the job, thank you VERY much!
This is so cool! I started learning JavaScript early this year and I always feel like I barely know anything about it. But there were maybe 5 concepts I didn't know so I guess I'm doing well.
I like men. You are a man.
Do you wanna work on a project together?
@@Wanderer2035w programmer rizz
@@Wanderer2035I’d like.
Absolutely love all your videos, love watching them even though I already know what you are talking about. I want to buy all your courses but unfortunately don't have the cash for it :( thanks for making these available on RUclips!
This was amazing! Such a good explanation on such a rapid pace!
Perfect timing with this video. I was just going through Eloquent Javascript by Marijin Haverbeke. Currently looking at asynchronous programming with Javascript with web apis like setTimeout(). It is quite satisfying once you have success learning concepts like binding of this in javascript.
Ayyyy fellow reader! I started the book today myself :D What a coincidence!
As a kotlin and python programmer this is actually very educational for learning js
As a C# developer it feels like a happy walk on a minefield
This actually helped me understand some key concepts and tools in JS without boring me to death, instant sub :)
This was ridiculously fun to watch. Bravo 🙌
Combining it all together in a such a great way and everything... just... true masterpiece!
Thank you for an insightful video as always! This video could not have come at a better time for me. I have been wanting to learn JS to extend my web dev content on my channel! 🔥
Thanks bro, you make JS sound more creepier more than ever
For anyone starting out or that don't master the core concepts of Js I would highly recommend Kyle's I don't know js book series. You will be a complete different developer when you finish reading it.
thanks dude, you summarized everything I learned for 3-4 months in 12 minutes, very impressive
I'm so happy to see that have all the 101 concepts clear, this makes feel a full programmer
"JS. It's a wonderful programming language to learn for beginners. It's also a horrible programming language to learn for beginners."
I 100% AGREE
I would start with languages like Java or C# to really understand OOP and then move to Js and learn it without classes syntax to know about prototype and what is actually happening in the background. And then I would move to the enjoyable live of ES5+
@@DonatoBencosme That's definitely a way to learn!
@@DonatoBencosme
The two languages have nothing to do with each other, you will only waste your time
Determine the goal of learning the language
@@ziadidabde3662 I don't think that learning about oop first would be a waste of time and I don't mean mastering java or c#.
Honestly, as a beginner I hated Javascript but then I realized that to thrive as a fullstack web developer, I have no choice rather than make Javascript my best friend. Now I and JS have become 5 and 6
All 100+ Topics:
01. Web Browser
02. Html
03. High Level
04. ECMA
05. WASM
06. Runtime
07. Scripting Language
08. Browser Dev Tools
09. Interpreted
10. V8 Engine
11. Just In Time Compilation
12. Script Tag
13. Src Attribute
14. Console Log
15. Let
16. Camel Case
17. Primitive
18. Mutable
19. Undefined
20. Null
21. String
22. Object
23. Semicolons
24. Const
25. Var
26. Lexical Environment
27. Global Scope
28. Function
29. Local Scope
30. Block Scope
31. Hoisting
32. Function Definition
33. Arguments
34. Return
35. Function Expression
36. Higher Order Function
37. Closures
38. Call Stack
39. Heap
40. this
41. Window Or Global
42. Bind
43. Arrow Function
44. Anonymous
45. Passed By Value
46. Passed By Reference
47. Object Literal
48. Object Constructor
49. Property
50. Prototype Chain
51. Inheritance
52. OOP
53. Classes
54. Constructor
55. Get/Set
56. Instance Method
57. Static Method
58. Array
59. Set
60. Map
61. Garbage Collection
62. Weakmap & Weakset
63. Event Loop
64. Sync
65. Async
66. Single Threaded
67. SetTimeOut
68. CallBack
69. CallBack Hell
70. Promise
71. Resolve
72. Reject
73. Then/Catch
74. Async
75. Await
76. Try/Catch
77. ES Modules
78. Default Import/Export
79. Named Import/Export
80. NPM
81. Node Modules
82. Package.JSON
83. DOM
84. Document
85. QuerySelector
86. Selector
87. QuerySelectoral
88. Element
89. Event
90. Imperative
91. Declarative
92. Components
93. Data Binding
94. Module Bundling
95. Network Waterfall
96. Dynamic Imports
97. Node.JS
98. Express
99. Metaframework
100. TypeScript
101. ESLint
Mad lad!
🌝🌝
Incredible Man!
++
Life saver!
This video resumes a year of javascript learning. Good job 👍
Excellent video! Really putting everything together for me. Thank you!
Your editing skills along with your Programming skills are top-notch. 👍
best coding channel on RUclips.
Without a doubt
@@sebastianskovnielsen6472 yaa
@Don't read my profile picture ok i can't read ur name
Proud member of the Fireship PRO family 💪
Thanks for the new course Jeff!
Honestly this is an incredible video cheat sheet. He snuck in more than a hundred here like a boss. This might be the best researched and verified channel in coding.
Fireship is just like that
Speaking of ESLint-I'd love a quick video about formatters and linters in JS and their configuration.
Agreed
Another banger of a video, Fireship. Great concept and superb execution.
Just a small correction at 1:06
"""Its standard implementation is called Ecmascript"""
Ecmascript is not the implementation, its the standard itself. It's just a (huge) document written in legal-ish english that says how should people make compilers\interpreters\virtual machines
untimes\Engines for Javascript. "Implementation" is usually the word we use to call the program(s) that we use to run any language, so an implementations of Javascript would be the actual V8 Engine in chromium or NodeJS or any other VM that can run JS, but ES is just a set of rules governing how to make implementations for JS, not an actual implementation.
Been learning JS for most of this year and still managed to learn something from this!
also, it appears the video on your JS course on your site only has audio in the left ear
Get out
I am speechless the promise is truly delivered as it was awaited. Well I tried to catch all of this but I think what matters the most is that at a global scope all the concepts were perfectly explained. Thank you for this mesmerizing experience it's the best video I encountered on RUclips this week. Haddag A.
Can you create the same thing for C or maybe C++ ?
C++ would be better
I hate my life.
But Why lol
😐
Me too
Same lol
I love mine, hope u love your one day
Great video! Have learned JavaScript but use only java at work. Good refreshment!
Thank you! This was the perfect video to refresh my memory before I'm starting my internship this semester.
''wtfIsThis" : 100% me When trying to learn 'this'
bro Imma make a language called Javascraps where this is renamed to that except for arrow functions
Note that at 7:18, there is an error in the code, since WeakMaps can't have primitive values as keys. Garbage collection of the keys only makes sense for pass-by-reference stuff (objects), so passing a primitive was made illegal 🚨
JavaScript doesn't have primitives, implementation wise it's actually an object that contains your actual value in a buffer (very much like PyObject from the cpython virtual machine), so depending on which VM you're running your js on this will more than likely be accepted as valid code
@@theshermantanker7043 MDN says it's illegal too using the word "primitive". "Keys of WeakMaps are of the type Object only. Primitive data types as keys are not allowed (e.g. a Symbol can't be a WeakMap key)". I don't think the definition of the word "primitive" here refers to how it's implemented under the hood, but how the values appear to behave. Even if values are represented as objects, if it is immutable it behaves as if it's a primitive.
As a side note, nodejs thinks it's illegal too
> const a = new WeakMap();
> a.set("a",1);
Uncaught TypeError: Invalid value used as weak map key
at WeakMap.set ()
It was smooth vid for quick revisions of the core concepts. Thansk jeff
This explains a lot of stuff that other resources don’t bother with - I finally feel like I understand js
…as much as one can understand js
27 seconds ago. Anyways, these are quality videos. Keep going. And keep up the blame on every languages.
@@dont_read_my_profile_picture ok.
Don't use var, forget it exists.
That's insanely Amazing how he covered everything in just 12 minutes, Thanks alot Jeff!
Thanks Jeff! You are the king of summarizing things!
Last time I was this early youtube had a different icon!!!
JAVASCRIPT is the BEST and the worst programming language. I'M A REACT DEV 😜✅
math: finally a worthy opponent our battle will be legendary.
For some reason, this comment looks like a bot to me lol
Very sorry to hear that. Hope you will be okay.
1 👍 = 1 prayer.
I used to be a React dev, but then I found Vue. I hope you enjoy having to debounce all your hooks.
re-re-re-re-re-re-re useEffect re-re-re-re-render.
This is acrually helpful when preparing an interview, thank you very much
Despite the economic downturn, I'm so happy😊. I have been earning $ 60,200 returns from my $7,000 investment every 13days•❤️
Don't sleep on it...this is a time to invest I recently just bought another property valued at over $15m. I wish knew the right investment firm to invest with earlier, better late than never thought.
I started with just 4,000 dollars now earning upto 17,000 dollars WEEKLY
I think I'm blessed because if not I wouldn't have met someone who is as spectacular as expert Smith I think he's is the best broker I ever seen
Please how do I contact him, my income stream is in a mess......please🥺
*He's availability is sure on Tele gram user name👇*
Nice video that allows to refresh our JS knowledge!
it's great that you noted on classes being syntax sugar for prototype inheritance, but it would be also good if you note that `async` is also eventually a syntax sugar for promises
This is a really cool video! The kind of overview I needed of the language, complete and without distractions, thanks!
What a master class in 12 minutes. Amazing Job, no words, hats off 🎉
Thanks a lot Jeff! The JS content of this channel is amazing.
It's been a long time that I touched JavaScript. I forgot some of the concepts. I was looking for a crash course which can help me to cope this situation in less time and can cover all of the topics for me. It was a mess at the beginning to find such tutorials. Then suddenly, the name "Fireship" popped up in my mind and I was thinking that who else would make such tutorial other than him.
I looked up for "JavaScript in 100 secs by Fireship". After scrolling a bit, I found this video. Now, I have learned the things that I needed.
Thanks Jeff for making such life saving contents for us ❤️
The time put in and quality of these videos is incredible!
probably the best revision material
I started directly with TypeScript, and this really, *really* helped me to understand how the sausage is made. Thanks.
This video made me understand so much about javascript, it has gotten rid of bunch of doubts I had, subscribing rn.
javascript beginner to intermediate to advanced in literally 12 minutes! hats off! 🙌
im halfway through Meta's Front end dev courses and you help me more in one video. THANK YOU!
Thanks alot we need more videos like this
That amazing tutorial. This is exactly what i was looking for, fast, to the point not looking at a viewer as a kid learning for the first time.
Thank you so much! Your teachings are TOP NOTCH💯🥇
Your intro was both hilarious and accurate haha!
the video I needed, Thank you so much!
I’m finally getting around to learning js (coming from data analysis), WOW I wished this was the first video I watched. Great job
3:29 29. Lexical Environment (global / local / block scope)
4:05 Function Definition / Function Expression / Higher-Order Functions
4:26 Closure
5:19 Arrow Function (anonymous)
5:30 Passed By Value / Passed By Reference
5:45 Object Literal / Object Constructor
6:03 Prototype Chain
6:20 OOP - class, constructor, getter/setter, instance method / static method, array/set/map, garvage collection, weakmap
7:27 Non-Blocking Event-Loop
10:36 Imperative / Declarative
11:24 Network Waterfall
11:31 Dynamic Imports
Super fast...
Crystal clear..
Chrisp..
Amazing video ever
Thank you Author ❤
Thanks for clearing let and var variable
helpful refresher bro thx
I have been looking for this video for so long, here you explain things that people are learning months!!
Guys watching this 6 Months ago and not understanding a bit comparing to me today watching it and completely understanding every little detail he said makes me feel sooo freakin proud of my self.
Thanks so much.
Would be great if you could make a similar one for node.js
Thanks a lot dear, before this video i was banging my head on the table, to actually understand those quirky details of JavaScript as i came from a Java background which is rather intuitive and compliant with standard OOP concepts and UML diagrams.
Awesome video! I'd love to see more videos like this one. Maybe Python next?
Well explained.! Thanks
3:50 Hoisting was new to me. - Thank you for another great video teaching us something new!
It's an outdated feature though. Codes written recently often only use let and const, so they don't rely on this behavior. Also declaring something after you assigned its value is kind of a bad practice.
Both informative and funny, cheers mate :-)
daaamn... so much content packed in so little time... thank you, sir!
He reads our mind, one of my friends asked me how to learn js, i was opened youtube to sent him a fcc tut, in front me this came as uploaded 5 min ago :)
fast , Crisp, clear , concise what not...just Awsome.
want this type of video on java, AWS ........😁
Amazing content! Thanks man!
thanks for the quality content Jeff.
This pure GOLD 👏🏾🔥