What is the best way to learn JavaScript in 2021?

JavaScript is a language you can see being used everywhere now. Some people consider that bad, but the fact is that no language comes closer to JS when it comes to how many different environments you can work on by yourself.

As a self-learner, JavaScript was super important to me as I probably would not have time/mental energy to learn:

Java for Android
Swift/Objective C for iOS
Python/Rust for backend server programming
JavaScript for frontend web development

But I wanted to work with all these environments, and fortunately, just learning JavaScript enables you the following:

Frontend web development with JavaScript and frameworks
Backend programming with Node.js
React Native/NativeScript for iOS and Android (even Ionic is a good solution in a lot of cases)

Therefore, it makes absolutely 100% sense to learn JavaScript as an indie-developer. In this article, we’ll go through the best way to learn JavaScript, and how you should approach learning that.

Learn ES6+ Syntax First in JavaScript

This is the first and most important tip of all time. JavaScript has been among us for so long, and people have been creating content/tutorials around it for decades. Also, because JavaScript has iterated so fast since the release of ES6, almost all of the content out there on JS is super old. It’s not wrong, but there are so much better ways to learn JS now.

Consider this simple example. I googled javascript http request and the first result that comes on Google is:

XMLHttpRequest is a great, highly backward compatible method to create HTTP requests in JavaScript. But it is verbose, too verbose. As a beginner, you should really be learning about fetch first, which is a newer JS API, comes with promises inbuilt, has a much nicer and intuitive syntax.

But consider you did that google search as a beginner and had no idea about fetch. You’ll be scratching your head with the following code:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
document.getElementById(“demo”).innerHTML = xhttp.responseText;
}
};
xhttp.open(“GET”, “filename”, true);
xhttp.send();

Now consider the modern alternative of this code:

async function makeReq() {
const response = await fetch(‘filename’)
const data = await response.text()
document.getElementById(‘demo’).innerHTML = data
}

makeReq()

You can’t argue that the code above looks much nicer, cleaner and readable. The problem with tutorials about javascript, and web development, in general, is the information overload that has happened, and most resources don’t teach you great things, they just teach you okay-ish things.

Therefore, the first tip is to make sure you try to learn modern ES6+ JS syntax first. Sure, you can learn about var and all the edge cases it had later, but you’d have a better speed if you learn about let and const in JavaScript first.

Related links:

Check out this free JavaScript essential course from codedamn. This includes not only modern syntax, but also quizzes and hands-on practice within browser.
Also check out this Advanced Practical JavaScript course – one of the best course on learning modern practical parts of JavaScript – promises, generators, iterators, DOM, etc. with hands-on practice.

Practice, practice, practice, practice….

Video tutorials are awesome. But they can only take you so far, you need hands-on-keyboard practice. Programming is much like sports in the sense that you can learn a bunch of things by reading/watching others, but you really have to get in the field and do hard work to be good at it. Similarly with programming, unless you are coding yourself, you’ll not become good. There are good reasons for it:

Practice develops confidence – confidence to attack a problem as a developer is a fundamental difference between good and not-good programmers. Good programmers know that they can solve a problem eventually, even if they don’t know it yet. Not good programmers get scared and think they are not good enough to solve it.
Practice develops deep knowledge and experience – A single course can only teach you so much. Although on codedamn you’ll see multiple core JS courses like javascript essential course, advanced practical JS course, advanced theoretical JS course, and so on, still I’d argue it couldn’t even cover everything in the topics that are covered. This is because there’s just too much information, pretty much in every topic. It is impossible to retain everything unless you have used it at least once and develop a faint ‘aha’ moment around that concept – it could be a few hours wasted on debugging, or something you found surprising. That can only be acquired by experience, and experience comes with practice, not time.
Practice is mandatory anyway – If you’re you’re looking for a job you need good projects on resume to show, and you need to build them. If you’re looking to learn coding for fun/your own projects, well, you need to code your own projects. The end goal of programming is always practicality. Therefore, why not start learning to code by practicing too? You’d have to practice it in some way or another anyway.

Make sure you understand these JavaScript concepts

These concepts are the raw, fundamental, barebone concepts in JavaScript, and no matter what someone says, you should not have to “Google” them to know how to work with them. Googling is fine, and used by people a lot, but you should absolutely understand the fundamentals of these concepts, you should not be completely “blank” when you need to work with them (in no specific order):

Working with HTML + CSS + JavaScript together
Syntax of the language (including conditional statements, functions, variables, scopes)
Working with JSON
Network requests (Native fetch recommended, but pick your poison)
Console usage
Chrome devtools usage to some extent for debugging

debugger and breakpoints
DOM manipulation and common methods ( querySelector, getElementById, etc.)
Timers (setTimeout, setInterval)
Promises with async-await [super important]
Objects
Arrays and common methods (map, filter, forEach)
Primitive types and data structures
Loops
Error handling

I’ll be updating this list often, but we cover a wide variety of these important topics in these 2 hands-on courses:

Learn in multi-pass way

Okay, this might be more of an opinion than a fact, but this is tried and tested for me (and a lot of top developers I follow on twitter). You do not need to learn full JS in one go. You can’t, ever. Instead, your learning should be more focused towards goal focused learning. Do you want to become a frontend developer? Learn the necessary tech stack (like HTML, CSS, JS, React, Material UI) in a “basic dev mode” first. This is your first iteration in learning.

Take a step back and come back to JavaScript again, while you’re learning, say, React. Revise important concepts and try discovering new and interesting things. For example, following the frontend developer roadmap on codedamn, you’ll see it’s not necessarily in “HTML” -> “CSS” -> JS format. Basics things are at starting, more intermediate and advanced things are at the end.

I call this type of learning as multi-pass learning. You learn and solidify your concepts over time, instead of just learning it in a single go. This has the advantage that when you start learning, you don’t even know what you don’t know. You discover things you don’t know that you don’t know, later. Therefore, you want to come back to those things and learn them.

Don’t be shy of taking help

Use stackoverflow, a lot. Learn how to ask questions properly and that site can do wonders for you when you’re stuck. I have seen myself and learned from others too thatr people are considered rude on SO, but with hindsight now, I believe I got all I needed from stackoverflow – answers. At the end of the day, if you can develop a thick skin in the online world to not be discouraged by a few, and keep asking things, keep asking for help, people will help.

Conclusion

Learning any web development technology is not hard, it just takes time because you need to become familiar with a lot of things before you can comfortably hack your way around things. If you’re disciplined in your learning and towards your goal, you’ll see pieces fitting together in no time. Good luck!