Mastering JavaScript - EVERYTHING You Need To Know

Key Takeaways

today I'll be discussing the topics and skills that you need to learn if you want to become a master of the JavaScript programming language now I've broken these skills into four categories we have beginner intermediate Advanced and then finally expert or Master Level now if you're a beginner you can treat this video just like a curriculum where I'll tell you all of the things you need to learn and the order in which you should learn them whereas if you're an intermediate or someone who's a bit more advanced then I'll likely share with you some topics or skills you haven't heard of before that you may want to consider learning just to level up your skill that much more if you are looking to dive into the essentials of JavaScript you can check out this free comprehensive guide from HubSpot this guide will help you learn about data types variables object-oriented programming and a lot more it's ideal for beginners or anyone who wants to refresh their JavaScript skills and I've left a link to it in the description the best part is it's completely free and I want to give a massive thank you to HubSpot for sponsoring this video and providing great free programming resources all right so let's get into it here a quick mention that all of the skills that I list here will be in the description in case you want that entire list or something to follow along with and also I'll be referencing that list if you see me looking over to the side that's what I'm doing I'm just making sure I don't forget any of the skills that I have now let's start with these beginner or basic skills this is designed for any of you that are just starting out and you want to get to a point after learning all these where you're confident writing code before you move on to the more advanced skills this is really the fundamentals of the language so first thing you're going to want to learn variables what is a variable how does it work what's the point of it we've got three main ways to make variables here VAR let and const you want to understand the difference between those keywords then we're going to be looking at data types things like strings numbers Boolean uh null undefined you want to know what those types are and the differences between them then we're going to be looking at operators so there's different types of operators we have arithmetic operators this is adding subtracting division multiplication we have a assignment operators things like the equal sign plus equal to minus equal to plus plus all assignment operators we have comparison operators this is something like the double equal sign the triple equal sign or the strict equal less than or equal to how do we compare different values and which values equal what then we have logical operators like and or not which tie in with the next topic which are conditionals how do you create a condition how do you chain them together Etc now that brings us to control flow with control flow we're talking about ifnl statements switch statements how we handle different areas of the code or how we go into different blocks based on a specific condition or something that we're checking that then leads us into basic data structures so we know the simple ones we talked about before now we're going to want to learn about arrays we're going to want to learn about objects and the concept of mutability mutability means that some objects can change others cannot we want to know which types are mutable which are not mutable and how that can cause issues in our code code next we're going to be looking at Loops so the for Loop the while loop the do while loop when do you use which of these Loops how do you Loop over a structure how do you Loop over an array you really want to understand that huge concept for pretty much every programming language next we're looking at functions how do you declare a function how do you invoke a function what is a parameter what is an argument what is a return type what type of code goes inside of functions how do you utilize them effectively next we're looking at common methods common methods meaning uh things that we can perform on different data types for example converting something into a string splitting a string making something uppercase making something lowercase useful to know at this point in time after that we're going to be looking at even more data types things like sets and maps how those work and the efficiency of them then we're going to be getting into advanced functions so here is where we're going to be talking about Arrow functions default parameters rest parameters and comparing that with our normal functions this now leads us nicely into scope how are different variables defined how do we locate different things that maybe have the same name in what scope can we access certain pieces of information a bit more of an advanced topic then we're going to be looking at Dom manipulation now you might have done this a little bit earlier but things like selecting elements in an HTML page modifying them handling user input even though this is based on JavaScript to be good at JavaScript you have to understand the interaction with HTML and the Dom after this I'd recommend looking at event handling so things like adding an event listener handling clicks and then in this context we're also going to be looking at the this keyword how does this work in the context of an arrow function versus a normal function specifically as it relates to events even here things like form submissions important to be looking at lastly in the beginner section I know there's a lot of stuff here we're going to be looking at basic debugging so how do we run a debugger how do we actually solve problems find errors in our JavaScript code this is a lot of stuff but if you know everything I mentioned here you are well on your way to becoming an intermediate JavaScript developer and you have the fundamentals of the language down and probably 90% of the code you need to write is going to fall into those different categories know that's a little bit overwhelming you want to learn all of those different topics and yes I am classifying those in the beginner category so now we're moving from beginner to intermediate these topics still are quite important you definitely need to understand them and they're going to allow you to really create some more complex apps Implement some more logic and just be much better with JavaScript to the point where you might actually be able to land a job and you're going to be a lot more capable of a developer now starting here we have error handling so try catch finally how you properly handle errors in your code next we move on to important operators so things like null coalescing optional chaining the tary operator there's a few of these kind of magic or unique operators in JavaScript that you should understand at this level now we're moving into asynchronous programming something that's definitely a bit more complex gets quite a few people stuck and frustrated but is so important to understand at a pretty deep level so things like callbacks promises the async and a wait syntax how you use this correctly and how you actually utilize asynchronous code next we're moving on to API so how do you call apis how to use the fetch API uh working with Json data making HTTP requests receiving response data handling errors within your different requests this really is something you need to get to that more intermediate level next we have object-oriented programming with JavaScript so understanding this keyword new Constructors functions or methods things like the class syntax and then how that relates with the prototypical inheritance so in JavaScript we have prototypes you're going to want to understand that especially as a relates to object-oriented Pro programming sorry so things like the Prototype chain creating prototypes The Inheritance patterns what is a prototype that's kind of where you need to start here and it's quite different than some other programming languages next we're moving into to the module system so things like the es6 module so using that import export syntax and then you're also going to want to understand maybe the older syntax like commonjs require module. exorts you're going to see that all over the place you need to understand how to separate your code out how to import it how to export it Etc finally to wrap up this section we're going to be looking at some more advanced tooling things like npm basic webpack Babble and then finally sorry one more here that I forgot functional programming basic so things like pure functions higher order functions closures things like map. filter. reduce how you use those in that slightly different style of programming that you may not be used to so that wraps up the intermediate section again quite a few topics here but these are quite important fortunately once you understand this and the beginner you have pretty much everything you're going to need for day-to-day JavaScript programming and what's going to be coming next is quite a bit more advanced and is only going to be used in specific scenarios still important to understand but you can definitely get by with what I've mentioned so far moving forward we get into the advanced section now full disclosure here a lot of the stuff that I'm about to mention I don't use every day in fact I hardly have to use a lot of the stuff that we're going to be mentioning in these next sections and it kind of proves the point that what I showed you before is really what you need to get by and to be quite good at JavaScript here is just going to that extra level but I know a lot of you want to hear about it so let's get into these topics first Advanced asynchronous pattern so things like microtasks macr tasks the event Loop web workers really understanding this at a deeper level and how to perform some more optimizations next we have advanced Dom manipulation and web apis things like the intersection Observer websockets local storage session storage Etc next we're moving into State Management this is where we understand state things like Redux how you implement that in an application understanding the context next we have advanced object-oriented programming so things like Factory functions mixins compositions moving on we have some more functional programming immutability recursion function composition currying some topics that you probably don't need to use every single day that but that you want to be aware of next Advanced error handling so things like custom error types error tracking and tracing moving on we have performance optimizations probably one of the more important ones on this list things like lazy loading debouncing and throttling memorization these are more advanced techniques that you're going to use in these larger applications when scalability becomes more of a concern next we have Security Essentials understanding xss csrf cores content security policies specific headers you might be having as a part of your requests things that you've probably run into errors before not really understood and now you want to actually really understand what these topics are now we have testing as well maybe you want to put this in intermediate but for me I find testing could be a little bit more complex especially when you're using some of these more advanced features and that leads us into unit testing integration testing end to end testing and then of course learning testing Frameworks things like just mocha chai whatever one you decide or whatever one you need to use for your job or the project you're working on finally we're getting into build tools and automations so things like Advanced webpack gulp npm scripts how you start taking all of these things combining them together and using them in a larger project there's so much stuff in this JavaScript ecosystem and in this Advanced section you start to learn some more of that tooling and how you can use that to build up some projects that are a little bit more advanced that wraps up the advanced section some important topics here but not that you necessarily need to master again if you want to get by in JavaScript but you're watching this because you want to be a master so let's move on to the next section now we are moving into the expert or Master Level features now the truth is once you get to this point there's so many different things you could be learning and you're probably going to be specializing in a few different Frameworks or Technologies related to JavaScript so it's difficult for me to make this concise because if you really are a true expert or Master you could probably learn whatever you want and there's like a million things that could be considered expert that I could put in this category so I've tried my best here but if you think I forgot anything then leave a comment down below let's get into it though first design pattern so understanding more about system design structuring your code things like the module pattern Factory Singleton The Observer pattern we then have advanced State Management things like State machines the Redux middleware just getting into that at a deeper level next we have advanced performance optimizations things like code splitting tree shaking web assembly then we go on to type systems things like typescript flow you're going to want to know those if you're going to be good at JavaScript because you're going to see them all the time then we get into serers side JavaScript so not necessarily something you have to learn but a specialty that many people are probably going to get into so things like node.js Express restful API design graphql things related to JavaScript and again kind of specific packages or Frameworks you could be learning then we move into full stack developments you might want to be learning things like the M Stack serers side rendering all these different libraries that you can use to create JavaScript applications that kind of leads me into the next one modern Frameworks so in-depth understanding of things like react angular view whatever one you decide to use you want to be really really good at those if you're going to call yourself an expert in JavaScript or in that specific category now lastly we're getting into larger topics like architecture and scalability so generally speaking system design microservices load balancing caching strategies cdns domains whatever you want to say here anything that kind of fits that broader scale system design category that's what I'm discussing now that was a lot of topics that I listed in this video now hopefully I didn't intimidate you too much you do not need to learn all of these but if you really want to get to that expert advanced level these are the type of topics you're going to need to know now full disclosure I don't know all of these topics most people don't know all of them you really can get by with about 50% of the topics that I had on this list and you can create some really awesome applications without being a true expert or Master anyways with that said guys I will wrap up the video here if you enjoyed leave a like subscribe and I will see you in the next [Music] one